<template>
  <div class="app-container lr-bg">
    <div class="memberBox">
      <el-card style="min-height: 900px">
        <h2 style="text-align: center">添加段位</h2>
        <br>
        <el-form
          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="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 HH:mm:ss"
              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
            size="large" style="width: 200px" :loading="buttonLoading" type="primary" :disabled="btn"
            @click="submit()"
          >提交</el-button>
        </div>
      </el-card>

    </div>

  </div>

</template>

<script setup>
import { getCurrentInstance } from '@vue/runtime-core'
import { ref, reactive, toRefs, watch } from 'vue'
import { extractInfoFromChinaIdCard } from '@/api/person/info'
import { insertDuanInfo } from '@/api/exam/addDuan'
import dayjs from 'dayjs'
const { proxy } = getCurrentInstance()
const buttonLoading = ref(false)
const data = reactive({
  form: {
    foreignPractitionersFlag: '1',
    coachList: [
      {}
    ],
    fpList: [
      {}
    ]
  },
  rules: {
    name: [{ required: true, trigger: 'blur', message: '请输入' }],
    idcCode: [{ 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: '请选择' }]
  },
  duanList: [
    { 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 { form, rules, duanList } = toRefs(data)
const btn = ref(false)
const timerIn = ref(null)


watch(() => form.value.idcCode, (v) => {
  if (form.value.idcCode) {
    clearTimeout(timerIn.value)
    timerIn.value = setTimeout(() => {
      getIdCode()
    }, 1000)
  }
})

// 身份信息读取
async function getIdCode() {
  try {
    buttonLoading.value = true
    const res = await extractInfoFromChinaIdCard({
      idcCode: form.value.idcCode
    })
    form.value.name = res.data.name
    form.value.sex = res.data.sex
    // form.value.birth = res.data.birth ? dayjs(res.data.birth).format('YYYY-MM-DD ') : null
    form.value.birth = res.data.birth
    form.value.level = form.value.levelDuan == 0 ? null : form.value.levelDuan
    clearTimeout(timerIn.value)
  } catch (e) {
  } finally {
    clearTimeout(timerIn.value)
    buttonLoading.value = false
  }
}

async function submit() {
  await proxy.$refs['formData'].validate()
  await insertDuanInfo({
    name: form.value.name,
    idcCode: form.value.idcCode,
    sex: form.value.sex,
    level: form.value.level,
    passDate: form.value.passDate,
    birth: form.value.birth
  })
  proxy.$modal.msgSuccess('操作成功！')
  proxy.$refs['formData'].resetFields()
}

</script>

<style scoped lang="scss">
.memberBox{
  width: 900px;
  min-height: 900px;
  padding: 20px;
  margin: 0 auto;
}

.form-label{
  border: 1px solid rgba(114, 114, 112, 0.3);
  border-radius: 10px;
  padding:20px  40px 20px 10px;
  margin-bottom: 30px;
  width: 85%;
  position: relative;
  .el-form-item{
    margin-bottom: 15px;
  }
  .coach-icon{
    position: absolute;
    top: -32px;
    font-weight: 500;
    left: 25px;
    z-index: 9;
  }
  .coach-del{
    position: absolute;
    padding: 8px;
    top: -13px;
    right: -17px;
  }
}

:deep(.el-upload--picture-card){width: 220px;height: 130px;}
:deep(.el-upload-list__item){width: 220px;height: 130px;}
:deep( .FileUpload .el-upload-list__item){width: auto;height: 32px; .el-upload-list{margin:0 0 10px 0}}
:deep( .FileUpload ){.el-upload-list{margin:0 0 10px 0}}
:deep(.el-upload-list--picture-card .el-upload-list__item){width: 220px;height: 130px;}
:deep(.component-upload-image){
  display: flex;
  .el-upload__tip{width:200px;margin-left: 20px;}
}

</style>