<template>
  <view class="verify-container">
    <!-- 顶部提示 -->
    <view class="verify-tip">
      身份证号码仅用于验证您的身份信息，以确保面试的真实性和安全性
    </view>
    
    <!-- 表单 -->
    <view class="form-container">
      <!-- 姓名 -->
      <view class="form-item">
        <text class="form-label">姓名<text class="required">*</text></text>
        <input type="text" v-model="formData.name" placeholder="沈伟伟" class="form-input" />
      </view>
      
      <!-- 身份证号 -->
      <view class="form-item">
        <text class="form-label">身份证号<text class="required">*</text></text>
        <input type="text" v-model="formData.idCard" placeholder="请输入有效身份证号" class="form-input" maxlength="18" />
      </view>
      
      <!-- 协议同意 -->
      <view class="agreement">
        <checkbox :checked="isAgreed" @tap="toggleAgreement" color="#6c5ce7" />
        <text class="agreement-text">
          我已阅读并同意
          <text class="agreement-link">《身份验证服务协议》</text>
          <text class="agreement-link">《隐私保护政策》</text>
          <text class="agreement-link">《网络安全协议》</text>
        </text>
      </view>
    </view>
    
    <!-- 提交按钮 -->
    <button class="submit-btn" :disabled="!canSubmit" @click="submitForm">提交</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        name: '',
        idCard: ''
      },
      isAgreed: false
    }
  },
  computed: {
    canSubmit() {
      return this.formData.name.trim() && 
             this.formData.idCard.trim() && 
             this.isAgreed;
    }
  },
  methods: {
    toggleAgreement() {
      this.isAgreed = !this.isAgreed;
    },
    submitForm() {
      if (!this.canSubmit) {
        let message = '';
        if (!this.formData.name.trim()) {
          message = '请输入姓名';
        } else if (!this.formData.idCard.trim()) {
          message = '请输入身份证号';
        } else if (!this.isAgreed) {
          message = '请阅读并同意相关协议';
        }
        
        uni.showToast({
          title: message,
          icon: 'none'
        });
        return;
      }
      
      // 验证身份证号格式
      const idCardReg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
      if (!idCardReg.test(this.formData.idCard)) {
        uni.showToast({
          title: '请输入正确的身份证号',
          icon: 'none'
        });
        return;
      }
      
      // 提交表单
      uni.showLoading({
        title: '验证中...'
      });
      
      setTimeout(() => {
        uni.hideLoading();
        uni.navigateTo({
          url: '/pages/face-photo/face-photo',
          fail: (err) => {
            console.error('页面跳转失败:', err);
            uni.showToast({
              title: '页面跳转失败',
              icon: 'none'
            });
          }
        });
      }, 1500);
    }
  }
}
</script>

<style>
.verify-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f5f7fa;
  padding: 30rpx;
}

.verify-tip {
  font-size: 26rpx;
  color: #666;
  line-height: 1.5;
  margin-bottom: 40rpx;
}

.form-container {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 40rpx;
}

.form-item {
  margin-bottom: 30rpx;
}

.form-label {
  display: block;
  font-size: 28rpx;
  color: #333;
  margin-bottom: 15rpx;
}

.required {
  color: #e74c3c;
  margin-left: 5rpx;
}

.form-input {
  width: 100%;
  height: 80rpx;
  border-bottom: 1px solid #eee;
  font-size: 28rpx;
  box-sizing: border-box;
}

.agreement {
  display: flex;
  align-items: flex-start;
  margin-top: 20rpx;
}

.agreement-text {
  font-size: 24rpx;
  color: #666;
  line-height: 1.5;
  margin-left: 10rpx;
}

.agreement-link {
  color: #6c5ce7;
}

.submit-btn {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  background-color: #6c5ce7;
  color: #fff;
  border-radius: 45rpx;
  font-size: 32rpx;
  margin-top: 60rpx;
}

.submit-btn[disabled] {
  background-color: #b2b2b2;
  color: #fff;
}
</style> 