<template>
  <div class="invite-page">
    <!-- 导航栏 -->
    <div class="nav-bar">
      <div class="nav-left" @click="$router.back()">
        <van-icon size="20" name="arrow-left"></van-icon>
      </div>
      <div class="nav-title">邀请中心</div>
      <div class="nav-right"></div>
    </div>

    <!-- 顶部礼物图标 -->
    <div class="gift-section">
      <div class="gift-circle">
        <img src="@/assets/icon/user/gift.png" alt="" />
      </div>
      <h2 class="invite-title">邀请好友赚取更多福利</h2>
    </div>

    <!-- 邀请码区域 -->
    <div class="code-section">
      <div class="code-label">邀请码</div>
      <div class="code-box">
        <span class="code-text">{{ inviteData.code }}</span>
        <!-- 点击复制图标 -->
        <img
          src="@/assets/icon/user/copy.png"
          @click="copyCode"
          class="copy-icon"
          alt="" />
      </div>

      <button class="share-btn" @click="handleShare">分享邀请</button>
    </div>

    <!-- 数据统计 -->
    <div class="stats-row">
      <div class="stats-item">
        <div class="stats-label">累计返佣</div>
        <div class="stats-num">{{ inviteData.reward }} USDT</div>
      </div>
      <div class="stats-item">
        <div class="stats-label">邀请人数</div>
        <div class="stats-num">{{ inviteData.inv_cnt }}</div>
      </div>
    </div>

    <!-- 规则说明 -->
    <div class="rules-section">
      <h3>温馨提示</h3>
      <p>成功邀请1-4名好友即可获得好友存款5%的佣金。</p>
      <p>成功邀请5-10名好友即可获得好友存款10%的佣金。</p>
      <p>成功邀请11-20名好友即可获得好友存款20%的佣金。</p>
      <p>成功邀请超过30名好友即可获得好友存款45%的佣金。</p>
    </div>
  </div>
</template>

<script setup>
  import { ref, onMounted } from "vue";
  import { useRouter } from "vue-router";
  // 引入 Vant 的 Toast
  import { showToast } from "vant";
  // 如果项目中没有全局引入样式，可能需要取消下面这行的注释
  // import 'vant/es/toast/style';
  import { getInviteInfo } from "@/api/user";

  const router = useRouter();

  const inviteData = ref({});

  const getInviteInfoData = async () => {
    const data = await getInviteInfo();
    if (data) {
      inviteData.value = data;
    }
  };

  // --- 核心：兼容性极强的复制功能 ---
  const copyCode = async () => {
    const text = inviteCode.value;

    // 1. 优先尝试标准 API (需要 HTTPS)
    if (navigator.clipboard && navigator.clipboard.writeText) {
      try {
        await navigator.clipboard.writeText(text);
        showToast({ type: "success", message: "复制成功" });
        return;
      } catch (err) {
        console.warn("标准API复制失败，尝试降级方案", err);
      }
    }

    // 2. 降级方案 (兼容所有浏览器/Webview)
    try {
      const input = document.createElement("input");
      input.setAttribute("readonly", "readonly"); // 防止 iOS 拉起键盘
      input.setAttribute("value", text);
      input.style.position = "fixed";
      input.style.left = "-9999px";
      document.body.appendChild(input);

      input.select();
      input.setSelectionRange(0, 9999); // 兼容 iOS

      if (document.execCommand("copy")) {
        showToast({ type: "success", message: "复制成功" });
      } else {
        showToast({ type: "fail", message: "复制失败" });
      }

      document.body.removeChild(input);
    } catch (e) {
      showToast({ type: "fail", message: "浏览器不支持自动复制" });
    }
  };

  // 点击分享，跳转到新的海报页面
  const handleShare = () => {
    router.push({ name: "InvitePoster", params: { code: inviteData.value.code } });
  };

  onMounted(() => {
    getInviteInfoData();
  });
</script>

<style scoped lang="less">
  /* ========== 基础页面样式 ========== */
  .invite-page {
    min-height: 100vh;
    background: #fff;
  }
  .nav-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 44px;
    padding: 0 16px;
  }
  .nav-title {
    font-size: 18px;
    font-weight: 500;
  }
  .nav-left,
  .nav-right {
    width: 30px;
    display: flex;
    align-items: center;
  }

  .gift-section {
    text-align: center;
    padding: 30px 0 20px;
  }
  .gift-circle {
    width: 200px;
    height: 200px;
    background: #fff0f0; /* 浅粉色圆底 */
    border-radius: 50%;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;

    img {
      width: 100px;
      height: 116px;
    }
  }
  .invite-title {
    height: 32px;
    line-height: 32px;
    font-size: 22px;
    font-weight: 600;
    color: #333;
  }

  .code-section {
    padding: 0 20px;
  }
  .code-label {
    font-size: 16px;
    font-weight: 400;
    color: #333;
    margin-bottom: 10px;
  }
  .code-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    border: 1px dashed #eee; /* 虚线边框 */
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  }
  .code-text {
    font-size: 16px;
    font-weight: 700;
    color: #333;
  }
  .share-btn {
    width: 100%;
    height: 40px;
    background: #de3545; /* 红色按钮 */
    color: #fff;
    border: none;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
  }
  /* 点击反馈 */
  .share-btn:active {
    opacity: 0.9;
  }
  .copy-icon {
    width: 24px;
    height: 24px;
    cursor: pointer;
  }
  .copy-icon:active {
    opacity: 0.6;
  }

  .stats-row {
    display: flex;
    margin: 28px 0 15px 20px;
  }
  .stats-item {
    flex: 1;
    text-align: center;
  }
  .stats-label {
    color: #666;
    font-size: 12px;
    margin-bottom: 6px;
  }
  .stats-num {
    font-size: 18px;
    font-weight: 600;
    color: #333;
  }

  .rules-section {
    margin-top: 30px;
    padding: 0 20px;
    color: #999;
    font-size: 12px;
    line-height: 1.8;
  }
  .rules-section h3 {
    color: #333;
    font-size: 14px;
  }
</style>
