<template>
  <div class="wealth-level-page">
    <!-- 顶部导航栏 -->
    <div class="header">
      <div class="back-btn" @click="goBack">
        <i class="icon-back">‹</i>
      </div>
      <div class="title-section">
        <h1 class="main-title">财富等级</h1>
        <span class="sub-title">主播等级</span>
      </div>
      <div class="help-btn" @click="showHelp">
        <i class="icon-help">?</i>
      </div>
    </div>

    <!-- 等级进度环形图 -->
    <div class="level-progress-section">
      <div class="progress-ring-container">
        <!-- 等级标签 -->
        <div class="level-labels">
          <div
            class="level-label"
            v-for="(level, index) in levels"
            :key="index"
            :class="{ active: currentLevelIndex >= index }"
          >
            <span class="level-name">{{ level.name }}</span>
            <div
              class="level-dot"
              :class="{ active: currentLevelIndex >= index }"
            ></div>
          </div>
        </div>

        <!-- 中心头像和信息 -->
        <div class="center-info">
          <div class="avatar">
            <img :src="userAvatar" alt="用户头像" />
          </div>
          <div class="experience-info">
            <div class="current-exp">
              <span class="exp-number">{{ currentExp }}</span>
              <span class="exp-label">当前经验</span>
            </div>
            <div class="next-level-exp">
              <span class="exp-number">{{ nextLevelExp }}</span>
              <span class="exp-label">距离下一个等级</span>
            </div>
          </div>
        </div>

        <!-- 进度弧线 -->
        <svg class="progress-ring" viewBox="0 0 200 200">
          <circle
            class="progress-ring-bg"
            cx="100"
            cy="100"
            r="85"
            fill="none"
            stroke="#2a2a2a"
            stroke-width="4"
          />
          <circle
            class="progress-ring-progress"
            cx="100"
            cy="100"
            r="85"
            fill="none"
            stroke="#00ff88"
            stroke-width="4"
            stroke-linecap="round"
            :stroke-dasharray="circumference"
            :stroke-dashoffset="progressOffset"
            transform="rotate(-90 100 100)"
          />
        </svg>
      </div>
    </div>

    <!-- 当前等级卡片 -->
    <div class="current-level-card">
      <div class="level-badge">
        <img :src="currentLevel.badge" alt="等级徽章" />
      </div>
      <div class="level-info">
        <h2 class="level-title">{{ currentLevel.name }}</h2>
        <p class="level-description">{{ currentLevel.description }}</p>
        <div class="level-progress-bar">
          <div class="progress-track">
            <div
              class="progress-fill"
              :style="{ width: levelProgress + '%' }"
            ></div>
          </div>
          <div class="progress-labels">
            <span>Lv.{{ currentLevel.level }}</span>
            <span>Lv.{{ currentLevel.level + 1 }}</span>
          </div>
        </div>
        <p class="next-level-requirement">{{ nextLevelRequirement }}</p>
      </div>
    </div>

    <!-- 每日奖励 -->
    <div class="daily-rewards-section">
      <h3 class="section-title">每日奖励</h3>
      <div class="reward-item">
        <div class="reward-icon">
          <img src="/icons/coin.png" alt="金币" />
        </div>
        <div class="reward-info">
          <p class="reward-title">段位达到富豪8</p>
          <p class="reward-desc">可每日领取金币</p>
        </div>
        <button
          class="claim-btn"
          @click="claimDailyReward"
          :disabled="dailyRewardClaimed"
        >
          {{ dailyRewardClaimed ? "已领取" : "立即领取" }}
        </button>
      </div>
    </div>

    <!-- 等级需求及福利 -->
    <div class="level-benefits-section">
      <h3 class="section-title">等级需求及福利</h3>
      <div class="benefits-grid">
        <div
          class="benefit-item"
          v-for="(benefit, index) in levelBenefits"
          :key="index"
        >
          <div class="benefit-icon">
            <img :src="benefit.icon" alt="福利图标" />
          </div>
          <p class="benefit-value">{{ benefit.value }}</p>
          <p class="benefit-desc">{{ benefit.description }}</p>
        </div>
      </div>
    </div>

    <!-- 财富特权 -->
    <div class="wealth-privileges-section">
      <h3 class="section-title">财富特权</h3>
      <div class="privileges-grid">
        <div
          class="privilege-item"
          v-for="(privilege, index) in wealthPrivileges"
          :key="index"
        >
          <div class="privilege-icon">
            <img :src="privilege.icon" alt="特权图标" />
          </div>
          <p class="privilege-name">{{ privilege.name }}</p>
          <p class="privilege-level">{{ privilege.level }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "WealthLevelPage",
  data() {
    return {
      // 用户信息
      userAvatar: "",
      currentExp: 1608,
      nextLevelExp: 1608,
      currentLevelIndex: 1,
      dailyRewardClaimed: false,

      // 等级配置
      levels: [
        { name: "新人", value: 0 },
        { name: "富豪", value: 1000 },
        { name: "星爵", value: 5000 },
        { name: "星侯", value: 15000 },
        { name: "星王", value: 50000 },
      ],

      // 当前等级信息
      currentLevel: {
        name: "星爵",
        level: 1,
        description: "进30天保段已成功",
        badge: "",
        requirement: 10000,
      },

      // 等级福利
      levelBenefits: [
        {
          icon: "",
          value: "100万",
          description: "所需经验值",
        },
        {
          icon: "",
          value: "100万",
          description: "保段经验值",
        },
        {
          icon: "",
          value: "100万",
          description: "每日可领",
        },
        {
          icon: "",
          value: "吉普",
          description: "专属座驾",
        },
      ],

      // 财富特权
      wealthPrivileges: Array(12)
        .fill()
        .map((_, index) => ({
          name: "吉普",
          level: "富豪6解锁",
          icon: "",
        })),
    };
  },

  computed: {
    // 计算圆形进度条
    circumference() {
      return 2 * Math.PI * 85;
    },

    progressOffset() {
      const progress = this.levelProgress / 100;
      return this.circumference - progress * this.circumference;
    },

    // 计算当前等级进度
    levelProgress() {
      const currentLevelExp = this.levels[this.currentLevelIndex].value;
      const nextLevelExp =
        this.levels[this.currentLevelIndex + 1]?.value ||
        currentLevelExp + 10000;
      const progress =
        ((this.currentExp - currentLevelExp) /
          (nextLevelExp - currentLevelExp)) *
        100;
      return Math.min(Math.max(progress, 0), 100);
    },

    // 下一等级需求
    nextLevelRequirement() {
      const nextLevel = this.levels[this.currentLevelIndex + 1];
      if (nextLevel) {
        const remaining = nextLevel.value - this.currentExp;
        return `距离下一个段位还差${remaining.toLocaleString()}经验`;
      }
      return "已达到最高等级";
    },
  },

  methods: {
    // 返回上一页
    goBack() {
      this.$router.go(-1);
    },

    // 显示帮助
    showHelp() {
      this.$toast("帮助信息");
    },

    // 领取每日奖励
    claimDailyReward() {
      if (this.dailyRewardClaimed) return;

      this.dailyRewardClaimed = true;
      this.$toast("领取成功！");

      // 这里可以调用API
      this.apiClaimDailyReward();
    },

    // API调用示例
    async apiClaimDailyReward() {
      try {
        // const response = await this.$api.claimDailyReward()
        console.log("API: 领取每日奖励");
      } catch (error) {
        console.error("领取失败:", error);
        this.dailyRewardClaimed = false;
      }
    },

    // 获取用户等级数据
    async fetchUserLevelData() {
      try {
        // const response = await this.$api.getUserLevel()
        // this.currentExp = response.currentExp
        // this.currentLevelIndex = response.levelIndex
        console.log("API: 获取用户等级数据");
      } catch (error) {
        console.error("获取数据失败:", error);
      }
    },
  },

  mounted() {
    this.fetchUserLevelData();
  },
};
</script>

<style scoped>
.wealth-level-page {
  min-height: 100vh;
  background: linear-gradient(180deg, #1a1a1a 0%, #2d2d2d 50%, #f5f5f5 50%);
  color: #fff;
  padding-bottom: 20px;
}

/* 顶部导航 */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 44px 20px 20px;
  position: relative;
}

.back-btn,
.help-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
}

.back-btn:hover,
.help-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.icon-back {
  font-size: 18px;
  font-weight: bold;
}

.icon-help {
  font-size: 14px;
  font-weight: bold;
}

.title-section {
  text-align: center;
}

.main-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 4px 0;
}

.sub-title {
  font-size: 12px;
  color: #999;
}

/* 等级进度环形图 */
.level-progress-section {
  padding: 20px;
  display: flex;
  justify-content: center;
}

.progress-ring-container {
  position: relative;
  width: 280px;
  height: 280px;
}

.level-labels {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.level-label {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 12px;
}

.level-label:nth-child(1) {
  top: 10px;
  left: 20px;
} /* 新人 */
.level-label:nth-child(2) {
  top: 40px;
  right: 10px;
} /* 富豪 */
.level-label:nth-child(3) {
  bottom: 40px;
  right: 10px;
} /* 星爵 */
.level-label:nth-child(4) {
  bottom: 10px;
  left: 20px;
} /* 星侯 */
.level-label:nth-child(5) {
  top: 50%;
  right: 0;
  transform: translateY(-50%);
} /* 星王 */

.level-name {
  margin-bottom: 4px;
  color: #999;
}

.level-label.active .level-name {
  color: #00ff88;
}

.level-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #333;
  border: 2px solid #555;
}

.level-dot.active {
  background: #00ff88;
  border-color: #00ff88;
}

.center-info {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 3;
}

.avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 16px;
  border: 3px solid #00ff88;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.experience-info {
  display: flex;
  justify-content: space-between;
  width: 200px;
  margin-top: 16px;
}

.current-exp,
.next-level-exp {
  text-align: center;
}

.exp-number {
  display: block;
  font-size: 18px;
  font-weight: bold;
  color: #00ff88;
}

.exp-label {
  font-size: 10px;
  color: #999;
  margin-top: 2px;
}

.progress-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.progress-ring-progress {
  transition: stroke-dashoffset 0.5s ease;
}

/* 当前等级卡片 */
.current-level-card {
  margin: 20px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  align-items: center;
  backdrop-filter: blur(10px);
}

.level-badge {
  width: 60px;
  height: 60px;
  margin-right: 16px;
  flex-shrink: 0;
}

.level-badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.level-info {
  flex: 1;
}

.level-title {
  font-size: 20px;
  font-weight: bold;
  margin: 0 0 4px 0;
  color: #00ff88;
}

.level-description {
  font-size: 12px;
  color: #ccc;
  margin: 0 0 12px 0;
}

.level-progress-bar {
  margin: 8px 0;
}

.progress-track {
  height: 4px;
  background: #333;
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 4px;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #00ff88, #00ccff);
  border-radius: 2px;
  transition: width 0.5s ease;
}

.progress-labels {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: #999;
}

.next-level-requirement {
  font-size: 11px;
  color: #999;
  margin: 8px 0 0 0;
}

/* 每日奖励和福利区域 */
.daily-rewards-section,
.level-benefits-section,
.wealth-privileges-section {
  background: #fff;
  color: #333;
  padding: 20px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 16px 0;
  color: #333;
}

.reward-item {
  display: flex;
  align-items: center;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 12px;
}

.reward-icon {
  width: 40px;
  height: 40px;
  margin-right: 12px;
}

.reward-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.reward-info {
  flex: 1;
}

.reward-title {
  font-size: 14px;
  font-weight: 500;
  margin: 0 0 2px 0;
}

.reward-desc {
  font-size: 12px;
  color: #666;
  margin: 0;
}

.claim-btn {
  background: #00ff88;
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 8px 16px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.2s;
}

.claim-btn:hover:not(:disabled) {
  background: #00e67a;
}

.claim-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
}

/* 福利网格 */
.benefits-grid,
.privileges-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.benefit-item,
.privilege-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
}

.benefit-icon,
.privilege-icon {
  width: 32px;
  height: 32px;
  margin-bottom: 8px;
}

.benefit-icon img,
.privilege-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.benefit-value,
.privilege-name {
  font-size: 12px;
  font-weight: 500;
  margin: 0 0 2px 0;
  color: #333;
}

.benefit-desc,
.privilege-level {
  font-size: 10px;
  color: #666;
  margin: 0;
}

/* 响应式设计 */
@media (max-width: 375px) {
  .progress-ring-container {
    width: 240px;
    height: 240px;
  }

  .experience-info {
    width: 160px;
  }

  .benefits-grid,
  .privileges-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
</style>
