<template>
  <div class="vip-page">
    <!-- 导航栏 -->
    <div class="nav-bar">
      <div class="nav-left" @click="$router.back()">
        <!-- 返回图标 SVG -->
        <van-icon size="20" name="arrow-left"></van-icon>
      </div>
      <div class="nav-title">VIP中心</div>
      <div class="nav-right"></div>
    </div>

    <!-- 核心卡片区域 -->
    <div class="vip-card-container">
      <div class="vip-card">
        <h2 class="current-level-title">白银会员</h2>

        <!-- 徽章图标 (模拟图中的徽章) -->
        <div class="badge-icon">
          <img src="@/assets/icon/bitcoin/baiyihuiyuan.svg" alt="">
        </div>

        <!-- 进度条 -->
        <div class="progress-section">
          <div class="progress-bg">
            <!-- 红色进度，假设进度为 10% -->
            <div class="progress-fill" style="width: 30%"></div>
          </div>
          <div class="progress-labels">
            <span>125630</span>
            <span>1564800</span>
          </div>
        </div>

        <div class="status-text">
          <div class="status-main">当前等级</div>
          <div class="status-sub">尊享专属会员解锁独家权益</div>
        </div>
      </div>
    </div>

    <!-- 列表区域 -->
    <div class="rate-list-container">
      <!-- 交互入口：点击这里跳转图2 -->
      <div class="list-header" @click="goToRules">
        <span class="header-title">等级费率</span>
        <van-icon size="18" color="#999999" name="question-o" class="my-icon"/>
      </div>

      <!-- 列表内容 -->
      <div class="rate-item" v-for="(item, index) in rateList" :key="index">
        <span class="item-name">{{ item.name }}</span>
        <span class="item-value">{{ item.value }}</span>
      </div>
    </div>

  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

const rateList = ref([
  { name: '普通用户', value: '0.0360% / 0.0600%' },
  { name: '青铜会员', value: '0.0320% / 0.0570%' },
  { name: '白银会员', value: '0.0280% / 0.0530%' },
  { name: '黄金会员', value: '0.0360% / 0.0600%' },
  { name: '铂金会员', value: '0.0320% / 0.0570%' },
  { name: '钻石会员', value: '0.0280% / 0.0530%' },
  { name: '星耀会员', value: '0.0360% / 0.0600%' },
  { name: '王者会员', value: '0.0320% / 0.0570%' },
  { name: '星光会员', value: '0.0280% / 0.0530%' },
]);

// 跳转到规则页
const goToRules = () => {
  router.push('/vip/rules');
};
</script>

<style scoped>
.vip-page {
  min-height: 100vh;
  background: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", Arial, sans-serif;
}

/* 导航栏 */
.nav-bar {
  display: flex; justify-content: space-between; align-items: center;
  height: 44px; padding: 0 16px; position: sticky; top: 0; background: #fff; z-index: 10;
}

.my-icon{margin-top: 0px;}
.nav-title { font-size: 18px; font-weight: 500; color: #000; }
.nav-left, .nav-right { width: 40px; }

/* 卡片区域 */
.vip-card-container {
  padding: 20px;
}
.vip-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  border: 1px solid #f0f0f0;
  padding: 20px 20px 0px;
  text-align: center;
}
.current-level-title {
  font-size: 18px; font-weight: 600; color: #333; margin-bottom: 2px;
}
.badge-icon {
  margin-bottom: 20px;
}

/* 进度条样式 */
.progress-section { margin-bottom: 20px; }
.progress-bg {
  height: 8px;
  background: #F0F2F5;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}
.progress-fill {
  height: 100%;
  background: #DE3545; /* 红色进度 */
  border-radius: 4px;
}
.progress-labels {
  display: flex; justify-content: space-between;
  font-size: 12px; color: #666;
}

.status-main { font-size: 14px; font-weight: 600; color: #333; margin-bottom: 4px; }
.status-sub { font-size: 12px; color: #999; padding-bottom: 20px;}

/* 费率列表 */
.rate-list-container {
  padding: 0 20px 40px;
}
/*.my-icon{margin-top:10px}*/
.list-header {
  display: flex; align-items: center;
  margin-bottom: 5px;
  cursor: pointer; /* 增加点击手势 */
  line-height: 1;
}
.header-title { font-size: 18px; font-weight: 600; color: #333; margin-right: 6px; }
.help-icon { display: block; } /* 问号图标 */

.rate-item {
  display: flex; justify-content: space-between;
  padding: 4px 0;
  font-size: 14px;
  color: #333;
}
/* 偶数行或特定行颜色微调，根据设计图看都是纯白背景 */
.item-name { color: #333; }
.item-value { color: #333; }
</style>