<!-- src/views/RealNameAuth.vue -->
<template>
  <div class="real-name-auth-page">
    <div class="header">
      <h1>实名认证</h1>
      <p>请选择您的认证类型</p>
    </div>

    <div class="auth-container">
      <!-- 个人认证 -->
      <a-card class="auth-card" :bordered="true">
        <template #title>
          <div class="card-title">
            <UserOutlined class="title-icon" />
            <span>个人认证</span>
          </div>
        </template>

        <div class="auth-content" @click="openPersonalAuthModal">
          <div class="option-list">
            <div class="option-item">
              <CheckCircleOutlined class="option-icon" />
              <div class="option-info">
                <div class="option-title">个人身份证认证</div>
                <div class="option-desc">快速认证，保障账号安全</div>
              </div>
            </div>
          </div>
        </div>
      </a-card>

      <!-- 企业认证 -->
      <a-card class="auth-card" :bordered="true">
        <template #title>
          <div class="card-title">
            <BankOutlined class="title-icon" />
            <span>企业认证</span>
          </div>
        </template>
        <template #extra>
          <span class="extra-text">支持对公打款认证、证件认证</span>
        </template>

        <div class="auth-content">
          <div class="option-list">
            <div class="option-item" @click="goEnterRealAuth">
              <CheckCircleOutlined class="option-icon" />
              <div class="option-info">
                <div class="option-title">企业证件认证</div>
                <div class="option-desc">营业执照等企业资质认证</div>
              </div>
            </div>
            <div class="option-item disabled">
              <ClockCircleOutlined class="option-icon" />
              <div class="option-info">
                <div class="option-title">银行对公账户认证</div>
                <div class="option-desc">即将上线，敬请期待</div>
              </div>
            </div>
          </div>
        </div>
      </a-card>
    </div>

    <!-- 个人实名认证弹窗 -->
    <a-modal
      v-model:open="personalAuthModalVisible"
      title="实名认证"
      width="500px"
      :footer="null"
      @cancel="closePersonalAuthModal"
    >
      <div style="padding: 24px;">
        <!-- 提示信息 -->
        <div
          style="margin-bottom: 24px; padding: 12px; background: #fff7e6; border: 1px solid #fda4af; color: #f59e0b; border-radius: 4px; font-size: 14px; line-height: 1.5;"
        >
          <span style="color: #f59e0b; margin-right: 8px;">⚠️</span>
          您的实名认证信息将会加密保存，不会泄露给第三方
        </div>

        <!-- 姓名输入 -->
        <div style="margin-bottom: 24px; display: flex; align-items: center; gap: 8px;">
          <span style="color: red;">*</span>
          <label style="font-size: 14px; color: #333;">真实姓名：</label>
          <a-input v-model:value="personalForm.realName" placeholder="请输入您的姓名" style="flex: 1;" />
        </div>

        <!-- 身份证号输入 -->
        <div style="margin-bottom: 24px; display: flex; align-items: center; gap: 8px;">
          <span style="color: red;">*</span>
          <label style="font-size: 14px; color: #333;">身份证号：</label>
          <a-input v-model:value="personalForm.idCard" placeholder="请输入您的身份证号" style="flex: 1;" />
        </div>

        <!-- 按钮区 -->
        <div style="text-align: right; padding: 16px 0;">
          <a-button @click="closePersonalAuthModal">取消</a-button>
          <a-button type="primary" @click="submitPersonalAuth" style="margin-left: 8px;">确定</a-button>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { message } from 'ant-design-vue';
import {
  UserOutlined,
  BankOutlined,
  CheckCircleOutlined,
  ClockCircleOutlined
} from '@ant-design/icons-vue';
import router from '../../../../router';

// 控制个人认证弹窗
const personalAuthModalVisible = ref(false);

// 表单数据
const personalForm = reactive({
  realName: '',
  idCard: '',
});

// 打开个人认证弹窗
const openPersonalAuthModal = () => {
  personalAuthModalVisible.value = true;
};

// 跳转到企业认证页面
const goEnterRealAuth = () => {
  // TODO: 跳转到企业认证页面
  router.push('/layout/admin/enterRealAuth')  
};

// 关闭弹窗并重置表单
const closePersonalAuthModal = () => {
  personalAuthModalVisible.value = false;
  personalForm.realName = '';
  personalForm.idCard = '';
};

// 提交认证
const submitPersonalAuth = () => {
  if (!personalForm.realName.trim()) {
    message.error('请输入真实姓名');
    return;
  }
  if (!personalForm.idCard.trim()) {
    message.error('请输入身份证号');
    return;
  }
  const idCardRegex = /^\d{17}[\dXx]$/;
  if (!idCardRegex.test(personalForm.idCard)) {
    message.error('请输入有效的18位身份证号码');
    return;
  }

  message.success('实名认证提交成功！');
  closePersonalAuthModal();
};
</script>

<style scoped>
.real-name-auth-page {
  padding: 24px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.header {
  text-align: left;
  margin-bottom: 40px;
}

.header h1 {
  font-size: 28px;
  color: #1f2937;
  margin-bottom: 8px;
  font-weight: 600;
}

.header p {
  color: #6b7280;
  font-size: 16px;
  margin: 0;
}

.auth-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.auth-card {
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
  border: 1px solid #e5e7eb;
}

.auth-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.card-title {
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
}

.title-icon {
  margin-right: 8px;
  font-size: 20px;
  color: #1890ff;
}

.extra-text {
  color: #6b7280;
  font-size: 14px;
}

.auth-content {
  padding: 8px 0;
  cursor: pointer;
}

.option-list {
  margin-bottom: 24px;
}

.option-item {
  display: flex;
  align-items: flex-start;
  padding: 16px;
  background: #f8fafc;
  border-radius: 8px;
  margin-bottom: 12px;
  border: 1px solid #e2e8f0;
}

.option-item:last-child {
  margin-bottom: 0;
}

.option-item.disabled {
  background: #f9fafb;
  border-color: #f3f4f6;
}

.option-icon {
  margin-right: 12px;
  font-size: 20px;
  margin-top: 2px;
  flex-shrink: 0;
}

.option-item:not(.disabled) .option-icon {
  color: #10b981;
}

.option-item.disabled .option-icon {
  color: #9ca3af;
}

.option-info {
  flex: 1;
}

.option-title {
  font-weight: 500;
  color: #374151;
  margin-bottom: 4px;
}

.option-item.disabled .option-title {
  color: #9ca3af;
}

.option-desc {
  font-size: 13px;
  color: #6b7280;
}

.option-item.disabled .option-desc {
  color: #9ca3af;
}

@media (max-width: 768px) {
  .real-name-auth-page {
    padding: 16px;
  }

  .header h1 {
    font-size: 24px;
  }

  .auth-container {
    gap: 16px;
  }

  .option-item {
    padding: 12px;
  }
}
</style>