<template>
  <div>
    <el-dialog
      v-model="showDialog"
      title="添加"
      width="600"
    >
      <el-form
        v-if="showDialog"
        ref="formData" :model="form" label-width="120px"
        :rules="rules" style="padding-right: 80px"
      >
        <el-form-item label="姓名" prop="name">
          <el-input v-model.trim="form.name" style="width: 100%" />
        </el-form-item>
        <el-form-item label="证件类型" prop="idcType">
          <el-select
            v-model.trim="form.idcType"
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option v-for=" v in idcTypeList " :key="v.value" :label="v.label" :value="v.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="证件号" prop="idcCode">
          <el-input v-model.trim="form.idcCode" style="width: 100%" />
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio-group v-model="form.sex">
            <el-radio label="0">男</el-radio>
            <el-radio label="1">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="生日" prop="birth">
          <el-date-picker
            v-model.trim="form.birth"
            style="width: 100%;" type="date"
            value-format="YYYY-MM-DD"
            placeholder="请选择生日"
          />
        </el-form-item>
        <el-form-item label="段位" prop="level">
          <el-select
            v-model.trim="form.level"
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option v-for=" v in duanList " :key="v.value" :label="v.label" :value="v.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="通过日期" prop="passDate">
          <el-date-picker
            v-model.trim="form.passDate"
            style="width: 100%;" type="date"
            value-format="YYYY-MM-DD HH:mm:ss"
            placeholder="请选择通过日期"
          />
        </el-form-item>
        <br>
        <br>
      </el-form>
      <div style="text-align: center">
        <el-button @click="showDialog = false">取 消</el-button>
        <el-button :loading="Loading" type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { duanInput } from '@/api/exam/addDuan'
import { extractInfoFromChinaIdCard } from '@/api/person/info'

import { getCurrentInstance } from '@vue/runtime-core'
import { idcTypeList } from '@/utils/ruoyi'
const Loading = ref(false)
const { proxy } = getCurrentInstance()
const emit = defineEmits(['success'])

const showDialog = ref(false)
const form = ref({})
const rules = ref({
  name: [{ required: true, trigger: 'blur', message: '请输入' }],
  idcCode: [{ required: true, trigger: 'blur', message: '请输入' }, { validator: validateCode, trigger: 'blur' }
  ],
  idcType: [{ required: true, trigger: 'blur', message: '请选择' }],
  sex: [{ required: true, trigger: 'blur', message: '请选择' }],
  birth: [{ required: true, trigger: 'blur', message: '请选择' }],
  tong: [{ required: true, trigger: 'blur', message: '请选择' }],
  level: [{ required: true, trigger: 'blur', message: '请选择' }],
  passDate: [{ required: true, trigger: 'blur', message: '请选择' }]
})
const duanList = ref([
  { label: '一段', value: '1' },
  { label: '二段', value: '2' },
  { label: '三段', value: '3' },
  { label: '四段', value: '4' },
  { label: '五段', value: '5' },
  { label: '六段', value: '6' },
  { label: '七段', value: '7' },
  { label: '八段', value: '8' },
  { label: '九段', value: '9' }
])
const pattern = /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/
const rangeId = ref(undefined)
const timerIn = ref(null)
function open(row) {
  console.log(row)
  form.value = {}
  if (row) rangeId.value = row
  showDialog.value = true
  Loading.value = false
}

watch(() => [form.value.idcCode, form.value.idcType], (v) => {
  if (v[1] == 0 && pattern.test(v[0])) {
    clearTimeout(timerIn.value)
    timerIn.value = setTimeout(() => {
      getIdCode()
    }, 1000)
  }
})

// 身份信息读取
async function getIdCode() {
  try {
    if (form.value.idcType == 0) form.value.idcCode = form.value.idcCode.toUpperCase()
    const res = await extractInfoFromChinaIdCard({
      idcCode: form.value.idcCode,
      idcType: form.value.idcType
    })
    form.value.name = res.data.name
    form.value.sex = res.data.sex
    form.value.birth = res.data.birth
    form.value.level = res.data.levelDuan == 0 ? null : res.data.levelDuan
    clearTimeout(timerIn.value)
  } catch (e) {
  } finally {
    clearTimeout(timerIn.value)
  }
}


async function submit() {
  if (form.value.idcType == 0) form.value.idcCode = form.value.idcCode.toUpperCase()
  await proxy.$refs['formData'].validate()
  Loading.value = true
  try {
    const res = await duanInput({
      name: form.value.name,
      idcCode: form.value.idcCode,
      sex: form.value.sex,
      level: form.value.level,
      passDate: form.value.passDate,
      birth: form.value.birth,
      idcType: form.value.idcType,
      rangeId: rangeId.value
    })
    rangeId.value = res.data
    proxy.$modal.msgSuccess('操作成功！')
    // showDialog.value = false
    form.value = {}
    emit('success', rangeId.value)
  } catch (e) {
    console.log(e)
  } finally {
    Loading.value = false
  }
}

function validateCode(rule, value, callback) {
  if (form.value.idcType == 0) {
    if (pattern.test(value)) {
      return callback()
    }
    callback(new Error('请输入正确证件号'))
  } else {
    return callback()
  }
}

defineExpose({
  open
})
</script>

<style lang="scss" scoped>

</style>