<script setup lang="ts">
import { ElMessage } from 'element-plus';
import { contactConfig, taobaoConfig } from '@/config/constants.ts';

// 复制淘口令
function copyTaobaoCode() {
  navigator.clipboard.writeText(taobaoConfig.code).then(() => {
    ElMessage.success('淘口令已复制,打开手机淘宝即可购买');
  }).catch(() => {
    ElMessage.error('复制失败，请手动复制');
  });
}

// 跳转淘宝
function goToTaobao() {
  window.open(taobaoConfig.link, '_blank');
}
</script>

<template>
  <div class="newbie-guide-container">
    <div class="newbie-content">
      <div class="newbie-header">
        <div class="header-icon">
          🎉
        </div>
        <h3 class="header-title">
          新人特惠组合包
        </h3>
        <p class="header-subtitle">
          超值优惠，仅限首次购买用户
        </p>
      </div>

      <div class="newbie-body">
        <!-- 购买方式卡片 -->
        <div class="purchase-card">
          <div class="card-row">
            <div class="card-col">
              <div class="method-label">
                方法一
              </div>
              <el-button
                type="primary"
                size="small"
                @click="goToTaobao"
              >
                <el-icon><i-ep-link /></el-icon>
                淘宝链接
              </el-button>
            </div>
            <div class="card-col">
              <div class="method-label">
                方法二
              </div>
              <el-button
                type="success"
                size="small"
                @click="copyTaobaoCode"
              >
                <el-icon><i-ep-document-copy /></el-icon>
                复制淘口令
              </el-button>
            </div>
          </div>
        </div>

        <!-- 淘口令展示 -->
        <div class="taobao-code-box">
          <div class="code-label">
            淘口令
          </div>
          <div class="code-text">
            {{ taobaoConfig.code }}
          </div>
        </div>

        <!-- 或者分割线 -->
        <div v-if="false" class="divider-section">
          <span class="divider-line" />
          <span class="divider-text">或者</span>
          <span class="divider-line" />
        </div>

        <!-- 二维码区域 -->
        <div v-if="false" class="qr-code-section">
          <div class="qr-code-title">
            扫码购买
          </div>
          <div class="qr-code-box">
            <img :src="taobaoConfig.taobaoQr" alt="淘宝二维码" class="qr-code-image">
            <p class="qr-code-tip">
              打开手机淘宝扫一扫
            </p>
          </div>
        </div>

        <!-- 温馨提示 -->
        <div class="tips-box">
          <p class="tips-title">
            <el-icon><i-ep-info-filled /></el-icon> 温馨提示
          </p>
          <p class="tips-text">
            新人特惠仅限首次购买 · 购买后联系客服激活
          </p>
          <p class="tips-text">
            客服微信：{{ contactConfig.wechatId }}
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.newbie-guide-container {
  padding: 20px 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  background: linear-gradient(to bottom, #fff, #fdfdfd);
  border-radius: 8px;

  .newbie-content {
    text-align: center;
    //max-width: 450px;
    width: 100%;

    .newbie-header {
      margin-bottom: 20px;
      padding: 16px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border-radius: 10px;
      color: white;

      .header-icon {
        font-size: 32px;
        margin-bottom: 6px;
      }

      .header-title {
        font-size: 20px;
        font-weight: 700;
        margin: 0 0 6px 0;
      }

      .header-subtitle {
        font-size: 13px;
        margin: 0;
        opacity: 0.95;
      }
    }

    .newbie-body {
      display: flex;
      flex-direction: column;
      gap: 14px;

      // 二维码区域
      .qr-code-section {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px;
        background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
        border-radius: 12px;
        border: 2px solid #bae6fd;

        .qr-code-title {
          font-size: 16px;
          font-weight: 700;
          color: #0369a1;
          margin-bottom: 16px;
        }

        .qr-code-box {
          display: flex;
          flex-direction: column;
          align-items: center;
          background: white;
          padding: 16px;
          border-radius: 10px;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

          .qr-code-image {
            width: 180px;
            height: 180px;
            object-fit: contain;
            border-radius: 8px;
          }

          .qr-code-tip {
            margin: 12px 0 0 0;
            font-size: 13px;
            color: #0369a1;
            font-weight: 600;
          }
        }
      }

      // 分割线
      .divider-section {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 4px 0;

        .divider-line {
          flex: 1;
          height: 1px;
          background: linear-gradient(to right, transparent, #d1d5db, transparent);
        }

        .divider-text {
          font-size: 13px;
          color: #9ca3af;
          font-weight: 500;
        }
      }

      .purchase-card {
        background: #f7f8fa;
        border-radius: 10px;
        padding: 16px;
        border: 2px solid #e8ecf0;

        .card-row {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 16px;

          .card-col {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;

            .method-label {
              font-size: 13px;
              font-weight: 600;
              color: #606266;
            }

            .el-button {
              width: 100%;
            }
          }
        }
      }

      .taobao-code-box {
        background: linear-gradient(135deg, #f0f4ff 0%, #e8f0fe 100%);
        border-radius: 8px;
        padding: 14px;
        border: 2px dashed #bae6fd;

        .code-label {
          font-size: 12px;
          color: #0369a1;
          font-weight: 600;
          margin-bottom: 8px;
        }

        .code-text {
          font-size: 11px;
          color: #667eea;
          font-family: 'Courier New', monospace;
          line-height: 1.5;
          word-break: break-all;
          background: white;
          padding: 8px;
          border-radius: 6px;
          text-align: left;
        }
      }

      .tips-box {
        background: #f0f9ff;
        border: 1px solid #bae6fd;
        border-radius: 8px;
        padding: 14px;
        text-align: left;

        .tips-title {
          margin: 0 0 10px 0;
          font-size: 13px;
          font-weight: 600;
          color: #0369a1;
          display: flex;
          align-items: center;
          gap: 6px;

          .el-icon {
            font-size: 16px;
          }
        }

        .tips-text {
          margin: 4px 0;
          font-size: 12px;
          color: #0c4a6e;
          line-height: 1.5;
        }
      }
    }
  }
}

/* 移动端优化 */
@media (max-width: 768px) {
  .newbie-guide-container {
    padding: 16px 12px;
    min-height: auto;

    .newbie-content {
      max-width: 100%;

      .newbie-header {
        padding: 16px;
        margin-bottom: 16px;
        border-radius: 8px;

        .header-icon {
          font-size: 28px;
          margin-bottom: 6px;
        }

        .header-title {
          font-size: 18px;
          margin-bottom: 6px;
        }

        .header-subtitle {
          font-size: 13px;
        }
      }

      .newbie-body {
        gap: 12px;

        .qr-code-section {
          padding: 16px;

          .qr-code-title {
            font-size: 15px;
          }

          .qr-code-box {
            padding: 12px;

            .qr-code-image {
              width: 160px;
              height: 160px;
            }

            .qr-code-tip {
              font-size: 12px;
            }
          }
        }

        .purchase-card {
          padding: 14px;
          border-radius: 8px;

          .card-row {
            grid-template-columns: 1fr;
            gap: 10px;

            .card-col {
              .method-label {
                font-size: 12px;
              }

              .el-button {
                font-size: 13px;
              }
            }
          }
        }

        .taobao-code-box {
          padding: 12px;

          .code-label {
            font-size: 11px;
          }

          .code-text {
            font-size: 10px;
            padding: 6px;
            line-height: 1.4;
          }
        }

        .tips-box {
          padding: 12px;

          .tips-title {
            font-size: 12px;
            margin-bottom: 8px;

            .el-icon {
              font-size: 14px;
            }
          }

          .tips-text {
            font-size: 11px;
          }
        }
      }
    }
  }
}

/* 小屏手机进一步优化 */
@media (max-width: 480px) {
  .newbie-guide-container {
    padding: 12px 8px;

    .newbie-content {
      .newbie-header {
        padding: 12px;

        .header-icon {
          font-size: 24px;
        }

        .header-title {
          font-size: 16px;
        }

        .header-subtitle {
          font-size: 12px;
        }
      }

      .newbie-body {
        .purchase-card {
          padding: 12px;
        }

        .taobao-code-box {
          padding: 10px;

          .code-text {
            font-size: 9px;
          }
        }

        .tips-box {
          padding: 10px;
        }
      }
    }
  }
}
</style>
