<template>
  <div class="page-container">
    <header class="nav-bar sticky-header">
      <div class="left" @click="$router.back()">
        <div>
          <VanIcon size="19" name="arrow-left"/>
        </div>
      </div>
      <div class="title">认证中心</div>
      <div class="right"></div>
    </header>

    <div class="main-header">
      <h1 class="page-title fs18">身份认证</h1>
      <p class="subtitle">在平台上进行购买和交易前请先进行身份认证</p>
    </div>

    <div class="tabs">
      <div
        class="tab-item"
        :class="{ active: currentTab === 'basic' }"
        @click="currentTab = 'basic'"
      >
        基础认证
        <div class="active-line" v-if="currentTab === 'basic'"></div>
      </div>

      <div
        class="tab-item"
        :class="{ active: currentTab === 'advanced' }"
        @click="currentTab = 'advanced'"
      >
        高级认证
        <div class="active-line" v-if="currentTab === 'advanced'"></div>
      </div>
    </div>

    <div class="scroll-content">
      <div class="auth-card">
        <div class="card-title">认证要求</div>

        <div
          class="card-row"
          v-for="(item, index) in currentRequirements"
          :key="index"
        >
          <span class="label">{{ item.label }}</span>
          <span class="tag" :class="item.status === 'done' ? 'gray' : 'red'">
            {{ item.status === 'done' ? '已认证' : '尚未认证' }}
          </span>
        </div>

        <button class="btn-verify" @click="handleVerifyClick">立即认证</button>
      </div>

      <div class="features-section">
        <div class="section-title">功能与限制</div>
        <div v-for="(item, index) in permissions" :key="index" class="feature-item">
          <div class="f-label" :class="{ 'red-text': item.isHighlight }">{{ item.label }}</div>
          <div class="f-value" :class="{ 'light': item.desc }">{{ item.value || item.desc }}</div>
        </div>
      </div>

      <div class="footer-action">
        <button class="btn-footer" @click="showModal = true">查看当前拥有的权限</button>
      </div>
    </div>

    <div class="overlay" v-if="showModal" @click="showModal = false"></div>

    <div class="bottom-sheet" :class="{ 'is-open': showModal }">
      <div class="sheet-handle"></div>
      <div class="sheet-title">您当前拥有的权限</div>

      <div class="sheet-content">
        <div v-for="(item, index) in permissions" :key="index" class="feature-item">
          <div class="f-label" :class="{ 'red-text': item.isHighlight }">{{ item.label }}</div>
          <div class="f-value" :class="{ 'light': item.desc }">{{ item.value || item.desc }}</div>
        </div>
      </div>
    </div>
    <div class="vantpo">
      <VanPopup
      v-model:show="showPopup"
      position="bottom"
      round
      :style="{ height: '70%', padding: '20px' }"
    >
      <div class="handle-bar"></div>

      <div class="auth-list">
        <div class="auth-card disabled">
          <span class="label">家庭地址</span>
          <span class="status-btn gray">已认证</span>
        </div>

        <div class="auth-card active" @click="goToAddress('work')">
          <span class="label">工作地址</span>
          <span class="status-btn red">立即认证</span>
        </div>

        <div class="auth-card" @click="goToRelative">
          <span class="label">亲属联系方式</span>
          <span class="status-btn red">立即认证</span>
        </div>
      </div>
    </VanPopup>
    </div>
  </div>

</template>

<script setup>
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';
import {Icon as VanIcon, Popup as VanPopup } from "vant";

const router = useRouter();
const handleVerifyClick = () => {
  // 跳转到刚刚写好的新页面
      if (currentTab.value === 'basic') {
        router.push({name: 'BasicVerify'}); // 确保路由里配了这个 name
        // 或者 router.push('/basic-verify');
      }else{
        showPopup.value = true
      }
}
//高级认证
const showPopup = ref(false);

// 跳转到地址认证，传递类型
const goToAddress = (type) => {
  showPopup.value = false;
  router.push({
    path: '/auth/address',
    query: { type: type } // 传参：work 或 home
  });
};

// 跳转到亲属认证
const goToRelative = () => {
  showPopup.value = false;
  router.push('/auth/relative');
};

// --- 状态管理 ---
const currentTab = ref('basic'); // 当前选中的 Tab: 'basic' 或 'advanced'
const showModal = ref(false);    // 控制弹框显示

// --- 数据源：认证要求 ---
const requirementsData = {
  // 基础认证数据 (图1)
  basic: [
    { label: '个人信息', status: 'done' }, // done: 已认证
    { label: '政府发行身份证', status: 'undone' } // undone: 尚未认证
  ],
  // 高级认证数据 (图2)
  advanced: [
    { label: '家庭地址', status: 'done' },
    { label: '工作地址', status: 'undone' },
    { label: '亲属联系方式', status: 'undone' }
  ]
};

// 计算属性：根据当前 Tab 返回对应的数据
const currentRequirements = computed(() => {
  return requirementsData[currentTab.value];
});

// --- 数据源：权限列表 (页面和弹框共用) ---
const permissions = [
  { label: '每日充值', value: '无限额', isHighlight: false },
  { label: '8M USDT 每日', desc: '数字货币提现限额', isHighlight: true }, // Highlight 变红
  { label: 'C2C交易限额', value: '无限额', isHighlight: false },
  { label: '其他功能', value: '无限额', isHighlight: false },
];
</script>

<style lang="less" scoped>
/* --- 布局容器 (基于 375px) --- */
.page-container {
  width: 100%;
  max-width: 375px;
  min-height: 100vh;
  margin: 0 auto;
  background-color: #fff;
  padding: 0 16px 40px 16px; /* 底部留白给按钮 */
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  /*overflow-x: hidden;*/
  position: relative;
  /*overflow:auto;*/
}

/* 给包裹层设置固定定位 */
.sticky-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: #fff; /* 统一背景色 */
  /* 稍微加点 padding 保持美观 */
  padding-bottom: 5px;
}
/* --- 导航栏 --- */
.nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 44px;
  margin-bottom: 10px;
}
.title { font-size: 18px; font-weight: 600; }
.back-arrow { font-size: 20px; cursor: pointer; color: #333; }

/* --- 大标题 --- */
.main-header { margin-bottom: 20px; }
.page-title { font-size: 18px; font-weight: 700; margin: 0 0 8px 0; color: #111; }
.subtitle { font-size: 13px; color: #999; line-height: 1.4; }

/* --- Tabs 切换样式 (关键) --- */
.tabs {
  display: flex;
  margin-bottom: 20px;
  border-bottom: 1px solid transparent; /* 预留位置 */
  /* 关键：使用 baseline 让大小不同的文字底部对齐，不然会上下乱跳 */
  align-items: flex-end;
  gap: 20px;
  height: 28px;
}
.tab-item {
  position: relative;
  cursor: pointer;
  color: #C2C2C2; /* 默认灰色 (未选中) */
  padding-bottom: 6px;
  line-height: 1;

  /* 1. 默认状态 (未选中)：字号较小，颜色较淡 */
  font-size: 16px;
  font-weight: 500;
  /* 2. 加上过渡动画，让忽大忽小的过程很丝滑 */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.tab-item.active {
  /* 3. 选中状态：字号变大，颜色变黑，加粗 */
  font-size: 20px;
  font-weight: 700;
  color: #111;
}
.active-line {
  position: absolute;
  /* 因为上面的 line-height: 1 和 flex-end 稳住了底部 */
  /* 这里的 bottom 定位就会非常稳定 */
  bottom: -4px; /* 可以稍微调一下距离 */
  left: 50%;
  transform: translateX(-50%);
  width: 20px; /* 稍微改回 20px 显得精致点，或者按你喜好保持 24 */
  height: 3px;
  background-color: #111;
  border-radius: 2px;
}

/* --- 认证卡片 --- */
.auth-card {
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.02);
  margin-bottom: 30px;
}
.card-title { font-size: 14px; color: #333; margin-bottom: 16px; font-weight: 500; }
.card-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.label { font-size: 15px; color: #666; }

/* Tag 样式 */
.tag {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
}
.tag.gray { background-color: #A6A6A6; color: #fff; }
.tag.red { background-color: #EA3F54; color: #fff; }

.btn-verify {
  width: 100%;
  height: 44px;
  background-color: #EA3F54; /* 红色按钮 */
  color: white;
  border: none;
  border-radius: 22px;
  font-size: 15px;
  font-weight: 500;
  margin-top: 5px;
}

/* --- 功能列表 (通用样式) --- */
.section-title { font-size: 15px; color: #333; margin-bottom: 20px; font-weight: 500; }
.feature-item { margin-bottom: 20px; }
.f-label { font-size: 15px; color: #333; margin-bottom: 4px; font-weight: 500; }
.f-label.red-text { color: #EA3F54; }
.f-value { font-size: 14px; color: #999; }
.f-value.light { color: #999; }

/* --- 底部按钮 --- */
.footer-action { margin-top: 30px; text-align: center; }
.btn-footer {
  width: 100%;
  height: 46px;
  background-color: #EA3F54;
  color: white;
  border: none;
  border-radius: 23px;
  font-size: 15px;
  font-weight: 500;
}

/* ================= 弹框 CSS 动画 ================= */
.overlay {
  position: fixed; top: 0; left: 0;
  width: 100vw; height: 100vh;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 998;
  animation: fade 0.3s;
}

.bottom-sheet {
  position: fixed; bottom: 0; left: 50%;
  width: 100%; max-width: 375px;
  transform: translateX(-50%) translateY(100%); /* 默认隐藏 */
  background-color: #fff;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  padding: 10px 20px 40px 20px;
  box-sizing: border-box;
  z-index: 999;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); /* 丝滑缓动 */
}

.bottom-sheet.is-open {
  transform: translateX(-50%) translateY(0);
}

.sheet-handle {
  width: 36px; height: 4px;
  background-color: #E0E0E0;
  border-radius: 2px;
  margin: 0 auto 20px auto;
}
.sheet-title { font-size: 18px; font-weight: 600; color: #111; margin-bottom: 30px; }

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.vantpo{
.handle-bar { width: 40px; height: 4px; background: #ddd;
    border-radius: 2px; margin: 0 auto 20px; }

.auth-list { display: flex; flex-direction: column; gap: 15px; }

/* 卡片基础样式 */
.auth-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border: 1px solid #ebedf0;
  border-radius: 12px;
  font-size: 16px;
  font-weight: bold;
}

/* 红色高亮状态 (对应图1中间那个) */
.auth-card.active {
  border-color: #ee0a24;
  color: #ee0a24;
}

/* 已认证/禁用状态 */
.auth-card.disabled {
  background-color: #f7f8fa;
  color: #333;
}

/* 按钮样式模拟 */
.status-btn {
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: normal;
  color: white;
}
.status-btn.gray { background-color: #969799; }
.status-btn.red { background-color: #ee0a24; }
}
</style>