<template>
  <div>
    <el-row justify="center">
      <el-col :span="12" class="form-box">
        <el-form ref="infoRef" label-width="120px" :model="form" :rules="rules">
          <h1 style="text-align: center;">{{ text+' '+title }}</h1>
          <br>
          <el-form-item label="考官类型" prop="examinerType">
            <el-select v-model="form.examinerType" placeholder="请选择" style="width: 100%;">
              <el-option label="晋级考官" value="1" />
              <el-option label="晋段考官" value="2" />
            </el-select>
          </el-form-item>
          <el-form-item label="姓名" prop="name">
            <el-input v-model="form.name" style="width: 100%;" placeholder="请输入姓名" />
          </el-form-item>
          <el-form-item label="证件号码" prop="idcCode">
            <el-input v-model="form.idcCode" placeholder="请输入证件号码" style="width: 100%;" />
          </el-form-item>
          <!-- 晋级考官 -->
          <div v-if="form.examinerType=='1'">
            <el-form-item label="考官段位" prop="examinerDan">
              <el-select v-model="form.personRoleInfo1.examinerDan" placeholder="请选择考官段位" style="width: 100%;">
                <el-option v-for="item in dList" :key="item" :label="item" :value="item" />
              </el-select>
            </el-form-item>
            <el-form-item label="考官证号码" prop="personRoleInfo1.examinerCard">
              <el-input v-model="form.personRoleInfo1.examinerCard" placeholder="请输入考官证号码" style="width: 100%;" />
            </el-form-item>
            <el-form-item label="发证日期" prop="personRoleInfo1.examinerCertificateTime">
              <el-date-picker
                v-model="form.personRoleInfo1.examinerCertificateTime"
                clearable
                type="date"
                value-format="YYYY-MM-DD"
                placeholder="请选择发证日期"
                style="width: 100%;"
              />
            </el-form-item>
            <el-form-item label="有效日期" prop="personRoleInfo1.examinerValidTime">
              <el-date-picker
                v-model="form.personRoleInfo1.examinerValidTime"
                clearable
                type="date"
                value-format="YYYY-MM-DD"
                placeholder="请选择日期"
                style="width: 100%;"
              />
            </el-form-item>
            <el-form-item label="联系电话" prop="phone">
              <el-input v-model="form.phone" style="width: 100%;" placeholder="请输入联系电话" />
            </el-form-item>
          </div>

          <!-- 晋段考官 -->
          <div v-if="form.examinerType=='2'">
            <el-form-item label="所属区域" prop="personRoleInfo1.examinerArea">
              <el-cascader
                ref="cascaderA"
                v-model="form.personRoleInfo1.examinerArea"
                placeholder="请选择"
                :options="options"
                :props="defaultProps"
                filterable
                style="width: 100%"
                @change="changeAddress"
              />
            </el-form-item>
            <el-form-item label="考官级别" prop="personRoleInfo1.examinerRank">
              <el-select v-model="form.personRoleInfo1.examinerRank" placeholder="请选择考官级别" style="width: 100%;">
                <el-option v-for="item in jList" :key="item" :label="item" :value="item" />
              </el-select>
            </el-form-item>
            <el-form-item label="考官证号" prop="personRoleInfo1.examinerCard">
              <el-input v-model="form.personRoleInfo1.examinerCard" placeholder="请输入考官证号码" style="width: 100%;" />
            </el-form-item>
            <el-form-item label="发证日期" prop="personRoleInfo1.examinerCertificateTime">
              <el-date-picker
                v-model="form.personRoleInfo1.examinerCertificateTime"
                clearable
                type="date"
                value-format="YYYY-MM-DD"
                placeholder="请选择发证日期"
                style="width: 100%;"
              />
            </el-form-item>
            <el-form-item label="有效日期" prop="personRoleInfo1.examinerValidTime">
              <el-date-picker
                v-model="form.personRoleInfo1.examinerValidTime"
                clearable
                type="date"
                value-format="YYYY-MM-DD"
                placeholder="请选择有效日期"
                style="width: 100%;"
              />
            </el-form-item>
            <el-form-item label="联系电话" prop="phone">
              <el-input v-model="form.phone" style="width: 100%;" placeholder="请输入联系电话" />
            </el-form-item>
            <el-form-item label="所属单位" prop="personRoleInfo1.examinerUnit">
              <el-cascader
                v-model="form.personRoleInfo1.examinerUnit"
                :options="list"
                :props="props2"
                clearable
                style="width: 100%"
                @change="changCase"
              />
            </el-form-item>
            <el-form-item label="考官段位" prop="personRoleInfo1.examinerDan">
              <el-select v-model="form.personRoleInfo1.examinerDan" placeholder="请选择考官段位" style="width: 100%;">
                <el-option v-for="item in dList" :key="item" :label="item" :value="item" />
              </el-select>
            </el-form-item>
          </div>
          <br>
          <el-row justify="center">
            <el-button type="primary" :loading="buttonLoading" @click="submitForm">保存</el-button>
          </el-row>
        </el-form>
      </el-col>
    </el-row>

    <!-- 会员已在其他完成注册，是否进行调入吗？ -->
    <el-dialog
      v-model="dialogFold"
      :title=" title +'已在其他完成注册，是否进行调入吗？'"
      width="30%"
      :before-close="handleClose"
      style="border-radius: 20px; padding: 20px;"
    >
      <div style="text-align: center;">
        <el-button type="primary" @click="goApple"> 确定 </el-button>
      </div>
    </el-dialog>
    <!-- 申请调入 -->
    <!--    <el-dialog-->
    <!--      v-model="dialogApple"-->
    <!--      :title=" title+'调动'"-->
    <!--      width="30%"-->
    <!--      center-->
    <!--      :before-close="handleClose"-->
    <!--      style="border-radius: 20px; padding: 20px;"-->
    <!--    >-->
    <!--      <div>-->
    <!--        <el-form ref="formsRef" :model="forms" :rules="rules">-->
    <!--          <el-form-item :label="forms.name" prop="address">-->
    <!--            <span>( {{ forms.idcType==0?'身份证':'护照' }}：{{ forms.idcCode }})</span> -->
    <!--          </el-form-item>-->
    <!--          <el-form-item label="当前所在团体：" prop="address">-->
    <!--            <el-input v-model="forms.ancestorNameList" readonly />-->
    <!--          </el-form-item>-->
    <!--        </el-form>-->

    <!--      </div>-->
    <!--      <div style="text-align: center;">-->
    <!--        <el-button type="primary" @click="auditFN"> 提交申请 </el-button>-->
    <!--      </div>-->
    <!--    </el-dialog>-->
    <!-- 上传证件照 -->
    <el-dialog
      v-if="dialogID"
      v-model="dialogID"
      title="请核对姓名及身份证号码是否正确"
      width="30%"
      :before-close="handleClose"
      center
      style="border-radius: 20px; padding: 20px;"
      @close="close"
    >
      <ImageUpload2 v-model="form.imageUrl" :limit="1" class="idCode" />
      <div style="text-align: center;">请上传身份证的反面</div>
      <br>
      <el-row justify="center">
        <el-button type="" @click="close"> 重新输入</el-button>
        <el-button type="primary" @click="auditCode"> 检测</el-button>
      </el-row>
    </el-dialog>
  </div>
  
</template>

<script setup name="addStorehouse">
import { ref, toRefs, reactive, onMounted, watch } from 'vue'
import { getInfo, addPersonToMyDept, extractInfoFromChinaIdCard, checkId, countryList } from '@/api/person/info'
import { commitTransfer } from '@/api/member/mobilize.js'
import { listCertified } from '@/api/system/userInfo.js'
import { regionsList } from '@/api/system/userInfo.js'
import { useRoute, useRouter } from 'vue-router'
import { getCurrentInstance } from '@vue/runtime-core'
import { editPersonInfo } from '@/api/storehouse/addStorehouse'
import { parseTime } from '@/utils/ruoyi.js'
import { deptTreeSelect } from '@/api/system/user'

const dList = ref(['一段', '二段', '三段', '四段', '五段', '六段', '七段', '八段', '九段'])
const jList = ref(['一级', '二级', '三级', '四级', '五级', '六级', '七级', '八级', '九级', '十级'])
const router = useRouter()
const route = useRoute()
const buttonLoading = ref(false)
const { proxy } = getCurrentInstance()
const district = ref()
const options = ref([])
const list = ref([])

const defaultProps = {
  children: 'children',
  label: 'text',
  checkStrictly: true
}
const props2 = {
  checkStrictly: true,
  children: 'children',
  value: 'id',
  emitPath: false
}
const dialogFold = ref(false)
const dialogApple = ref(false)
const dialogID = ref(false)
const perId = ref()
const list1 = ref([])
const list2 = ref([])
const timer = ref()
const levelList = ref([])
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 data = reactive({
  rules: {
    name: { required: true, message: '请输入姓名', trigger: 'blur' },
    sex: { required: true, message: '请选择性别', trigger: 'blur' },
    read: { required: true, message: '请选择', trigger: 'blur' },
    idcType: { required: true, message: '请选择证件类型', trigger: 'blur' },
    idcCode: [
      { required: true, message: '请输入证件号', trigger: 'blur' },
      { validator: validateCode, trigger: 'blur' }
    ],
    
    birth: [
      {
        required: true,
        message: '请选择报名日期',
        trigger: 'change'
      }
    ],
    phone: [
      { required: true, message: '请输入联系电话', trigger: 'blur' },
      { pattern: /^1[3456789]\d{9}$/, message: '手机号码格式不正确', trigger: 'blur' }
    ],
    parentId: { required: true, message: '请选调入协会', trigger: 'blur' },
    certDate: { required: true, message: '请选择证书有效期', trigger: 'blur' },
    certCode: { required: true, message: '请输入证书编号', trigger: 'blur' },
    certName: { required: true, message: '请输入证书名称', trigger: 'blur' },
    certUrl1: { required: true, message: '请上传证书', trigger: 'blur' },
    'personRoleInfo1.examinerArea': { required: true, message: '请输入所属区域', trigger: 'blur' },
    'personRoleInfo1.examinerUnit': { required: true, message: '请输入所属单位', trigger: 'blur' },
    'personRoleInfo1.examinerCard': { required: true, message: '请输入考官证号码', trigger: 'blur' },
    examinerType: { required: true, message: '请选择考试官类型', trigger: 'blur' },
    'personRoleInfo1.examinerDan': { required: true, message: '请选择考试官段位', trigger: 'blur' },
    'personRoleInfo1.examinerRank': { required: true, message: '请选择考试官级位', trigger: 'blur' },
    'personRoleInfo1.examinerValidTime': { required: true, message: '请选择有效日期', trigger: 'blur' },
    'personRoleInfo1.examinerCertificateTime': { required: true, message: '请选择', trigger: 'blur' },
    'personRoleInfo1.umpireDan': { required: true, message: '请选择裁判级别', trigger: 'blur' }
  },
  form: {
    perType: '3', // （1：个人会员；2：教练；3：考官；4：裁判；5：临时会员；）
    idcType: 0, 
    personRoleInfo1: {},
    examinerType: '1',
    personRoleInfo: {}
  },
  forms: {}
})
const { rules, form, forms } = toRefs(data)
const title = ref('考 官')
const text = ref('添 加')
onMounted(() => {
  if (route.query.perId) {
    initData()
    text.value = '编 辑'
  }
  regionsListFN()
  deptTreeSelectFN()
})

watch(() => [form.value.name, form.value.idcType, form.value.idcCode], (newForm, oldForm) => {
  if (newForm[1] == 0 && pattern.test(form.value.idcCode)) {
    clearTimeout(timer.value)
    timer.value = setTimeout(() => {
      getIdCode()
    }, 500)
  }
})

// 所属区域
async function regionsListFN(params) {
  const res1 = await regionsList()
  options.value = res1.data
}
// 所属单位
async function deptTreeSelectFN() {
  const res1 = await deptTreeSelect({ selfDeptId: '-1', fromTree: 1 })
  list.value = res1.data
}

function changeAddress(e) {
  console.log(form.value.personRoleInfo1)
}

// 个人信息
async function getUserInfo() {
  const res = await getInfo(perId.value)
  forms.value = res.data
  if (forms.areaAssName)forms.ancestorNameList = forms.value.ancestorNameList.join(',').replaceAll(',', '/')
  console.log(res)
}

// 编辑回显数据
async function initData() {
  const res = await getInfo(route.query.perId)
  form.value = res.data
  form.value.personRoleInfo1 = JSON.parse(form.value.personRoleInfo)
}

getLevel()
async function getLevel(params) {
  const res = await countryList()
  levelList.value = res.data
}

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

// 赛事地区下拉
getRegionsList()
async function getRegionsList() {
  const res = await regionsList()
  district.value = res.data
}

getXieList()
async function getXieList() {
  const res = await listCertified()
  list1.value = res.data
  list2.value = res.data
} 

// 身份信息读取
async function getIdCode() {
  const res = await extractInfoFromChinaIdCard({
    name: form.value.name,
    idcType: form.value.idcType,
    idcCode: form.value.idcCode
  })
  if (res.code === 200) {
    form.value.sex = res.data.sex
    form.value.birth = res.data.birth
    form.value.phone = res.data.phone
    form.value.cityId = res.data.cityId
    form.value.address = res.data.address
    form.value.photo = res.data.photo
    clearTimeout(timer.value)
  }
}

/** 提交按钮 */
function submitForm() {
  proxy.$refs['infoRef'].validate(async valid => {
    if (valid) {
      buttonLoading.value = false
      form.value.personRoleInfo = JSON.stringify(form.value.personRoleInfo1) 
      form.value.certUrl = JSON.stringify(form.value.certUrl1) 
      form.value.validityDate = parseTime(form.value.personRoleInfo1.examinerValidTime, '{y}-{m}-{d} {h}:{i}:{s}') 
      let res = null
      console.log(form.value)
      
      if (form.value.perId != null) {
        form.value.idcKey = undefined
        res = await editPersonInfo(form.value)
      } else {
        res = await addPersonToMyDept(form.value)
      }
      if (res.code === 200) {
        if (res.data == 0) {
          proxy.$modal.msgError('该成员，实名认证未通过，注册失败！')
          dialogID.value = true
          return
        }
        if (res.data * 1 < 0) {                 
          dialogFold.value = true
          perId.value = res.data.slice(1)
          getUserInfo()
          return 
        }
        proxy.$modal.msgSuccess('操作成功！')
        // proxy.$tab.closeReOpenPage({ path: '/member/informality' })
        router.go(-1)
        // return proxy.$modal.msgSuccess('操作成功')
      } else {
        proxy.$modal.msgError('添加失败')
      }
      buttonLoading.value = false
      console.log(res)
    } else {
      proxy.$modal.msgError('请完善信息')
    }
  })
}

// 调入
function goApple() {
  dialogApple.value = true
  dialogFold.value = false
  // 请求该用户信息
}

// 调入提交审核
async function auditFN() {
  const res = await commitTransfer({ perId: perId.value })
  if (res.code == 200) {
    proxy.$modal.msgSuccess('操作成功！')
    router.push('/member/mobillize')
  }
}

async function auditCode() {
  if (!form.value.imageUrl) {
    return proxy.$modal.msgError('请上证件照！')
  }
  const res = await checkId({
    name: form.value.name,
    idcCode: form.value.idcCode,
    imageUrl: form.value.imageUrl
  })
  if (res.code == 200 && res.data) {
    // codeFlag.value = true
    proxy.$modal.msgSuccess('身份校验通过')
    close()
  } else {
    return proxy.$modal.msgError('身份校验失败，请核对信息')
  }
}

function close() {
  form.value.imageUrl = undefined
  dialogID.value = false
}

</script>

<style scoped lang="scss">
.box{
  padding: 50px;
}
.tdFlex {
  display: flex;
}

.w50 {
  width: 50%;
}

.ml20 {
  margin-left: 20px;
}

.idCode{
  :deep(.el-upload--picture-card){
    width: 380px;
    height: 240px;
    margin: 0 auto;
  }
  :deep(.fileItem ){
    width: 380px;
    height: 240px;
    margin: 0 auto;

  }
  :deep(.el-upload__tip){
    display: none;
  }
  :deep(.el-upload-list--picture-card){
    // text-align: center;
    display: flex;
    justify-content: center;
  }
}

.form-box{
  max-width: 1000px;
  padding: 100px;
  padding-top: 50px;
  border-radius: 20px;
  background-color: #fff;
}

:deep(.el-upload--picture-card){width: 100px;height: 140px;}
:deep(.component-upload-image .el-upload-list__item){width: 100px;height: 140px;}
:deep(.el-upload-list--picture-card .el-upload-list__item){width: 220px;height: 130px;}
:deep(.component-upload-image){
  display: flex;
  justify-content: center;
  .el-upload__tip{width:200px;margin-left: 20px;}
}
:deep(.fileItem  .hover-actions ){
  span{
    margin: 40px 0;
  }
}
</style>