<template>
  <div class="security-page">
    <!-- 导航栏 -->
    <div class="nav-bar">
      <div class="nav-left" @click="$router.back()">
        <van-icon size="20" name="arrow-left"></van-icon>
<!--        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">-->
<!--          <path d="M15 18L9 12L15 6" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>-->
<!--        </svg>-->
      </div>
      <div class="nav-title">安全设置</div>
      <div class="nav-right"></div>
    </div>

    <div class="content">
      <!-- 1. 安全验证头部 -->
      <h2 class="section-title">安全验证</h2>

      <div class="security-dashboard">
        <!-- 圆环进度条 -->
        <div class="circle-chart">
          <svg viewBox="0 0 36 36" class="circular-chart">
            <path class="circle-bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" />
            <path class="circle" stroke-dasharray="30, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" />
          </svg>
        </div>
        <div class="dashboard-info">
          <div class="security-level">账户安全等级较低</div>
          <div class="security-tip">为了您的账户安全，建议至少开启2项安全验证</div>
        </div>
      </div>

      <!-- 2. 四宫格卡片 -->
      <div class="auth-grid">
        <!-- 卡片 1: 通行密钥 -->
        <div class="auth-card" @click="handleCardClick('passkey')">
          <div class="card-header">
            <div class="icon-box red-icon">
               <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"><path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"/></svg>
            </div>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M9 18L15 12L9 6" stroke="#999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
          </div>
          <div class="card-title">通行密钥</div>
          <div class="card-status unbind">未启用</div>
        </div>

        <!-- 卡片 2: Google验证 -->
        <div class="auth-card" @click="handleCardClick('google')">
          <div class="card-header">
            <div class="icon-box google-icon">
              <!-- 简单的 G 图标 -->
              <span style="font-weight:bold; font-size:14px;">G+</span>
            </div>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M9 18L15 12L9 6" stroke="#999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
          </div>
          <div class="card-title">Google验证</div>
          <div class="card-status unbind">未启用</div>
        </div>

        <!-- 卡片 3: 手机验证 -->
        <div class="auth-card" @click="handleCardClick('phone')">
          <div class="card-header">
            <div class="icon-box blue-icon">
               <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></svg>
            </div>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M9 18L15 12L9 6" stroke="#999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
          </div>
          <div class="card-title">手机验证</div>
          <div class="card-status bind">190****1520</div>
        </div>

        <!-- 卡片 4: 邮箱验证 -->
        <div class="auth-card" @click="handleCardClick('email')">
          <div class="card-header">
            <div class="icon-box purple-icon">
               <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
            </div>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M9 18L15 12L9 6" stroke="#999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
          </div>
          <div class="card-title">邮箱验证</div>
          <div class="card-status bind">36*****90@qq.com</div>
        </div>
      </div>

      <!-- 3. 列表区域 -->
      <div class="setting-list">
        <!-- 支付密码 -->
        <div class="list-item" @click="handleSetting('payment')">
          <span class="item-label">支付密码</span>
          <div class="item-right">
             <span class="item-value" @click="router.push({name: 'SetPassword'})">设置</span>
             <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M9 18L15 12L9 6" stroke="#999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
          </div>
        </div>

        <h2 class="section-title mt-20">高级安全设置</h2>

        <!-- 隐藏钱包地址 (开关) -->
        <div class="list-item">
          <span class="item-label">隐藏钱包地址</span>
          <div class="switch-box">
            <input type="checkbox" id="hideWallet" v-model="settings.hideWallet" />
            <label for="hideWallet"></label>
          </div>
        </div>

        <!-- 注销登录 -->
        <div class="list-item" @click="handleSetting('logout')">
          <span class="item-label">注销登录</span>
          <div class="item-right">
             <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M9 18L15 12L9 6" stroke="#999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
          </div>
        </div>

        <!-- 保持登录 (开关) -->
        <div class="list-item">
          <span class="item-label">保持登录</span>
          <div class="switch-box">
             <input type="checkbox" id="keepLogin" v-model="settings.keepLogin" />
             <label for="keepLogin"></label>
          </div>
        </div>

        <!-- APP锁定 -->
        <div class="list-item" @click="handleSetting('appLock')">
          <span class="item-label">APP锁定</span>
          <div class="item-right">
             <span class="item-value">{{ lockTime }}</span>
             <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M9 18L15 12L9 6" stroke="#999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
          </div>
        </div>

      </div>

    </div>
     <!-- 引入弹窗组件 -->
    <!-- currentValue: 传入当前值，保证弹窗打开时回显正确 -->
    <!-- @confirm: 接收子组件选中的新值 -->
    <LockTimeModal
      v-model:visible="showModal"
      :currentValue="lockTime"
      @confirm="updateLockTime"
    />
  </div>
</template>

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

const router = useRouter();

import { ref } from 'vue';
import LockTimeModal from '@/views/user/LockTimeModal.vue';
//锁定APP
const showModal = ref(false);

// 核心状态：当前锁定的时间，默认 "5分钟"
const lockTime = ref('5分钟');

// 处理子组件传回来的值
const updateLockTime = (newValue) => {
  lockTime.value = newValue;
  console.log('用户选择了:', newValue);
  // 这里可以调用 API 保存设置
};

// 页面状态
const settings = reactive({
  hideWallet: true,
  keepLogin: true
});

const handleCardClick = (type) => {
  console.log('点击卡片:', type);
  // router.push('/security/' + type);
};

const handleSetting = (type) => {
  console.log('点击设置:', type);
  if (type === 'logout') {
    router.push({name: 'DeleteAccount'});
  }else if(type === 'appLock') {
    showModal.value = true
  }
};
</script>

<style scoped>
.security-page {
  min-height: 100vh;
  background: #fff;
  padding-bottom: 40px;
}
.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;
}
.nav-title { font-size: 18px; font-weight: 600; color: #333; }
.nav-left, .nav-right { width: 40px; display: flex; align-items: center; }

.content { padding: 0 20px; }

/* 标题样式 */
.section-title {
  font-size: 16px; font-weight: 600; color: #333; margin: 10px 0 15px;
}
.mt-20 { margin-top: 30px; }

/* 仪表盘区域 */
.security-dashboard {
  display: flex; align-items: center; margin-bottom: 25px;
}
.circle-chart {
  width: 50px; height: 50px; margin-right: 12px;
}
.circular-chart {
  display: block; margin: 0 auto; max-width: 100%; max-height: 100%;
}
.circle-bg {
  fill: none; stroke: #eee; stroke-width: 3.8;
}
.circle {
  fill: none; stroke-width: 2.8; stroke-linecap: round;
  stroke: #4A90E2; /* 蓝色进度 */
  animation: progress 1s ease-out forwards;
}
@keyframes progress {
  0% { stroke-dasharray: 0 100; }
}

.dashboard-info { flex: 1; }
.security-level { font-size: 16px; font-weight: 600; color: #333; margin-bottom: 4px; }
.security-tip { font-size: 12px; color: #999; line-height: 1.4; }

/* 四宫格卡片 */
.auth-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 30px;
}

.auth-card {
  background: #fff;
  border: 1px solid #f5f5f5;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
  border-radius: 12px;
  padding: 16px;
  display: flex; flex-direction: column;
}

.card-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 12px;
}
.icon-box {
  width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
}
/* 不同卡片的图标颜色 */
.red-icon { background: #ECA8A8; }   /* 浅红背景 */
.google-icon { background: #eee; color: #DB4437; } /* Google灰底红字 */
.blue-icon { background: #A8C8EC; }  /* 浅蓝背景 */
.purple-icon { background: #D4A8EC; } /* 浅紫背景 */

.card-title { font-size: 15px; font-weight: 600; color: #333; margin-bottom: 6px; }
.card-status { font-size: 12px; }
.card-status.unbind { color: #999; }
.card-status.bind { color: #999; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 列表样式 */
.list-item {
  display: flex; justify-content: space-between; align-items: center;
  height: 50px;
  /* border-bottom: 1px solid #f9f9f9;  原图好像没有分割线，或者很淡，这里省略 */
  margin-bottom: 10px;
}
.item-label { font-size: 15px; color: #333; font-weight: 500; }
.item-right { display: flex; align-items: center; }
.item-value { font-size: 14px; color: #999; margin-right: 4px; }

/* 开关组件 Switch */
.switch-box {
  position: relative; width: 50px; height: 30px;
}
.switch-box input { display: none; }
.switch-box label {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background-color: #ccc;
  border-radius: 34px; cursor: pointer; transition: 0.4s;
}
.switch-box label:before {
  position: absolute; content: ""; height: 26px; width: 26px;
  left: 2px; bottom: 2px;
  background-color: white; border-radius: 50%; transition: 0.4s;
}
.switch-box input:checked + label {
  background-color: #E02F44; /* 选中时的红色 */
}
.switch-box input:checked + label:before {
  transform: translateX(20px);
}
</style>