<script setup lang="ts">
import { ref } from 'vue'
const message = useMessage()
const userStore = useUserStore()
const userInfo = userStore.userInfo
const rules = ref({
    name: [
        { 
          required: true,
          validator( value: string) {
            if (!value) {
              return new Error('请填写姓名')
            }
            else if (!/^(?:[\u4e00-\u9fa5·]{2,16})$/.test(value)) {
              return new Error('输入正确的姓名')
            }
            return true
          },
          trigger:'blur'
        },
  ],
  idCard: [
    { 
        required: true,
          validator( value: string) {
            if (!value) {
              return new Error('请填身份证号')
            }
            else if (!/(^\d{8}(0\d|10|11|12)([0-2]\d|30|31)\d{3}$)|(^\d{6}(18|19|20)\d{2}(0\d|10|11|12)([0-2]\d|30|31)\d{3}(\d|X|x)$)/.test(value)) {
              return new Error('输入正确的身份证号')
            }
            return true
          },
          trigger:'blur'
    },
  ],
})

const ruleForm = ref({
    name: '',
    idCard:'',
    userId: userInfo.userId
})
const formRef = ref(null)
const saveInfo = async(e: MouseEvent) => {
    e.preventDefault()
    formRef.value?.validate(async(errors) => {
        if (!errors) {
            // try{
            //     const res = await request.post('/system/user/updateIdCard',ruleForm.value)
            //     if(res.code === 200){
            //         const data = await userStore.getUserInfo()
            //         message.success('认证成功')
            //         ruleForm.value.name = ''
            //         ruleForm.value.idCard = ''
            //         onCloseModel()
            //     }
            // }catch(err) {
            //     console.log('err',err)
            // }
            const res = await request.post('/system/user/updateIdCard',ruleForm.value)
            const data = await userStore.getUserInfo()
            isVisible.value = false
        }
        else {
        }
    })
}

const isVisible = ref(false)
function onCloseModel() {
  isVisible.value = false
   ruleForm.value.name = ''
    ruleForm.value.idCard = ''
}
defineExpose({
  isVisible,
})
// 生命周期钩子
onMounted(() => {
  // initFormData()
})
</script>

<template>
  <NModal
    v-model:show="isVisible"
    :on-after-leave="onCloseModel"
    preset="card"
    style="width: 400px"
    :mask-closable="false"
  >
    <n-form ref="formRef" :model="ruleForm" :rules="rules">
      <n-form-item path="name" label="姓名">
        <n-input placeholder="请输入姓名" v-model:value="ruleForm.name" @keydown.enter.prevent />
      </n-form-item>
      <n-form-item path="idCard" label="身份证号">
        <n-input placeholder="请输入身份证号" v-model:value="ruleForm.idCard" @keydown.enter.prevent />
      </n-form-item>
    </n-form>
    <div class="flex justify-center items-center ">
      <button class="w-1/2 flex justify-center mx-1 bg-[#213df5] py-3 rounded-lg align-middle color-[#fff] border-0 cursor-pointer" @click="saveInfo">
        实名认证
    </button>
    </div>
  </NModal>
</template>

<style scoped>
.form {
  /* cursor: pointer; */
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.form-item {
  margin-bottom: 10px;
}

.form-item label {
  display: block;
  margin-bottom: 5px;
}

.form-item input {
  width: 200px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

.form-item button {
  padding: 5px 10px;
  background-color: #007bff;
  color: #fff;
  border: none;
}
</style>
