<template>
  <el-dialog
    v-model="show" width="900" :title="title" append-to-body
    align-center
  >
    <el-form
      ref="infoRef" label-width="120px" :model="form" :rules="rules" label-suffix="："
      style="width: 600px;margin: 0 auto"
    >
     
      <el-form-item label="证件类型" prop="idcType">
        <el-radio-group v-model="form.idcType" :disabled="isModify" @change="getPersonInfo">
          <el-radio label="0">身份证</el-radio>
          <!--          <el-radio label="1">护照</el-radio>-->
        </el-radio-group> 
      </el-form-item>
      <el-form-item label="证件号码" prop="idcCode">
        <el-input v-model="form.idcCode" placeholder="请输入证件号" :disabled="isModify" @blur="getPersonInfo" />
      </el-form-item>
      <el-form-item style="width: 100%;" label="姓名" prop="name">
        <el-input v-model="form.name" placeholder="请输入姓名" :disabled="form.perCode||isModify" />
      </el-form-item>
      <el-form-item style="width: 100%;" label="性别" prop="sex">
        <el-radio-group v-model="form.sex" :disabled="form.perCode||isModify">
          <el-radio label="0">男</el-radio>
          <el-radio label="1">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="个人会员号" prop="perCode">
        <el-input v-model="form.perCode" disabled />
      </el-form-item>
      <el-form-item label="会员有效期" prop="perValidityDate">
        <el-input v-model="form.perValidityDate" disabled />
      </el-form-item>
      <el-form-item label="所属省份" prop="provinceId">
        <el-select v-model="form.provinceId" style="width: 100%" :disabled="form.perCode&&provinceId">
          <el-option v-for="item in provinceList" :key="item.value" :label="item.text" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item v-if="perType!='3'" :label="`${subTitle}类型`" prop="personInfoObj.type">
        <el-select v-model="form.personInfoObj.type" :placeholder="`请选择${subTitle}类型`" style="width: 100%">
          <el-option v-for="t in typeArr" :key="t.value" :label="t.label" :value="t.value" />
        </el-select>
      </el-form-item>
      <el-form-item v-if="perType=='3'" label="考官类型" prop="examinerType">
        <el-select v-model="form.examinerType" placeholder="请选择" style="width: 100%;" @change="getPersonInfo">
          <el-option label="晋级考官" value="1" />
          <el-option label="晋段考官" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item v-if="form.examinerType=='2'" :label="`考官等级`" prop="personInfoObj.type">
        <el-select v-model="form.personInfoObj.type" :placeholder="`请选择${subTitle}类型`" style="width: 100%">
          <el-option v-for="t in typeArr" :key="t.value" :label="t.label" :value="t.value" />
        </el-select>
      </el-form-item>
      <el-form-item :label="`${subTitle}证号`" prop="personInfoObj.card">
        <el-input v-model="form.personInfoObj.card" :placeholder="`请输入${subTitle}证号`" />
      </el-form-item>
      <el-form-item :label="perType=='3'?'发证日期':'通过日期'" prop="personInfoObj.passTime">
        <el-date-picker
          v-model="form.personInfoObj.passTime"
          clearable
          type="date"
          value-format="YYYY-MM-DD"
          :placeholder="`请选择${perType=='3'?'发证':'通过'}日期`"
          :editable="false"
          style="width: 100%;"
        />
      </el-form-item>
      <el-form-item v-if="perType!='3'" label="增加日期" prop="personInfoObj.addTime">
        <el-date-picker
          v-model="form.personInfoObj.addTime"
          clearable
          type="date"
          value-format="YYYY-MM-DD"
          placeholder="请选择增加日期"
          :editable="false"
          style="width: 100%;"
        />
      </el-form-item>
      <el-form-item label="有效日期" prop="personInfoObj.validTime">
        <el-date-picker
          v-model="form.personInfoObj.validTime"
          clearable
          type="date"
          value-format="YYYY-MM-DD"
          placeholder="请选择有效日期"
          :editable="false"
          style="width: 100%;"
        />
      </el-form-item>
      <el-form-item v-if="perType=='3'" label="联系电话" prop="phone">
        <el-input v-model="form.phone" style="width: 100%;" placeholder="请输入联系电话" />
      </el-form-item>
      <el-form-item v-if="form.examinerType=='2'" label="所属单位" prop="personInfoObj.unit">
        <el-cascader
          v-model="form.personInfoObj.unit"
          :options="deptTree"
          style="width: 100%"
          :show-all-levels="false"
          :props="{value:'id', emitPath: false, checkStrictly:true}"
        />
      </el-form-item>
      <el-form-item :label="`${subTitle}级别`" prop="personInfoObj.rank">
        <el-select v-model="form.personInfoObj.rank" :placeholder="`请选择${subTitle}级别`" style="width: 100%;">
          <el-option v-for="item in jList" :key="item" :label="`${szToHz(item)}级`" :value="item" />
        </el-select>
      </el-form-item>
      <el-form-item v-if="form.examinerType=='2'" :label="`${subTitle}段位`" prop="personInfoObj.duan">
        <el-select v-model="form.personInfoObj.duan" :placeholder="`请选择${subTitle}段位`" style="width: 100%;">
          <el-option v-for="item in dList" :key="item" :label="`${szToHz(item)}段`" :value="item" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer text-center">
        <el-button :disabled="!canSubmit" type="primary" @click="submitForm">保 存</el-button>
        <el-button @click="show=false">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { onMounted, reactive, ref, toRefs, watch } from 'vue'
import { addPersonToMyDept, extractInfoFromChinaIdCard, getInfo } from '@/api/person/info'
import { getCurrentInstance, nextTick } from '@vue/runtime-core'
import { szToHz } from '@/utils/ruoyi'
import { regionsList } from '@/api/system/userInfo'
import { editPersonInfo } from '@/api/storehouse/addStorehouse'
import _ from 'lodash'
import { validIdCard, validPhone } from '@/utils/validate'
import { deptTreeSelect } from '@/api/system/user'

const { proxy } = getCurrentInstance()
const emit = defineEmits(['submit'])

const props = defineProps({
  perType: {
    type: String,
    required: true
  }
})

const data = reactive({
  form: {
    perId: undefined,
    perType: undefined,
    examinerType: undefined,
    sex: '0',
    idcType: '0',
    personInfoObj: {}
  },
  rules: {
    name: { required: true, message: '请输入姓名', trigger: 'blur' },
    sex: { required: true, message: '请选择性别', trigger: 'change' },
    idcType: { required: true, message: '请选择证件类型', trigger: 'change' },
    idcCode: { validator: (rule, value, callback) => {
      if (form.value.idcType == '0') {
        if (validIdCard(value)) {
          callback()
        } else {
          callback('请输入正确证件号')
        }
      } else {
        callback()
      }
    }, required: true, trigger: 'blur' },
    phone: { validator: (rule, value, callback) => {
      if (validPhone(value)) {
        callback()
      } else {
        callback('请输入正确手机号')
      }
    }, required: true, trigger: 'blur' },
    provinceId: { required: true, message: '请选择所属省份', trigger: 'change' },
    examinerType: { required: true, message: '请选择考官类型', trigger: 'change' },
    'personInfoObj.type': { required: true, message: () => `请选择${subTitle}类型`, trigger: 'change' },
    'personInfoObj.card': { required: true, message: () => `请输入${subTitle}证号`, trigger: 'blur' },
    'personInfoObj.passTime': { required: true, message: () => `请选择${props.perType == '3' ? '发证' : '通过'}日期`, trigger: 'change' },
    'personInfoObj.addTime': { required: true, message: '请选择增加日期', trigger: 'change' },
    'personInfoObj.validTime': { required: true, message: '请选择有效日期', trigger: 'change' },
    'personInfoObj.unit': { required: true, message: '请选择所属单位', trigger: 'change' },
    'personInfoObj.rank': { required: true, message: () => `请选择${subTitle}级别`, trigger: 'change' },
    'personInfoObj.duan': { required: true, message: () => `请选择${subTitle}段位`, trigger: 'change' }
  }
})
const { form, rules } = toRefs(data)

const show = ref(false)
const title = ref('')
const provinceList = ref([])
const canSubmit = ref(true)
const isModify = ref(false)
const deptTree = ref([])
const dList = [1, 2, 3, 4, 5, 6, 7, 8, 9]
const jList = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
const provinceId = ref()
let subTitle, typeArr
onMounted(() => {
  regionsList().then(res => {
    provinceList.value = res.data
  })

  form.value.perType = props.perType
  switch (props.perType) {
    case '2':
      subTitle = '教练'
      typeArr = [{ label: '初级', value: 1 }, { label: '中级', value: 2 }, { label: '高级', value: 3 }]
      break
    case '3':
      subTitle = '考官'
      form.value.examinerType = '1'
      typeArr = [{ label: '初级', value: 1 }, { label: '中级', value: 2 }, { label: '高级', value: 3 }]
      deptTreeSelectFN()
      break
    case '4':
      subTitle = '裁判'
      typeArr = [{ label: '三级', value: 1 }, { label: '二级', value: 2 }, { label: '一级', value: 3 }, { label: '国家级', value: 4 }]
      break
  }
})

watch(show, (val) => {
  if (!val) {
    form.value = {
      perId: undefined,
      perType: props.perType,
      examinerType: undefined,
      sex: '0',
      idcType: '0',
      personInfoObj: {}
    }

    if (props.perType == '3') {
      form.value.examinerType = '1'
    }

    isModify.value = false
  }
  nextTick(() => {
    proxy.$refs['infoRef'].clearValidate()
  })
})

function getPersonInfo() {
  if (form.value.idcCode) {
    extractInfoFromChinaIdCard({
      perId: form.value.perId,
      perType: form.value.perType,
      examinerType: form.value.examinerType,
      idcType: form.value.idcType,
      idcCode: form.value.idcCode
    }).then((res) => {
      if (res.data.hasFlag) {
        proxy.$modal.msgError('该成员已存在！')
        canSubmit.value = false
      } else {
        form.value.perCode = res.data.perCode
        form.value.perValidityDate = res.data.validityDate
        form.value.provinceId = res.data.provinceId
        provinceId.value = res.data.provinceId
        form.value.name = res.data.name
        form.value.sex = res.data.sex
        canSubmit.value = true
        console.log(res.data)
      }
    })
  }
}

function submitForm() {
  proxy.$refs['infoRef'].validate(async valid => {
    if (valid) {
      form.value.personRoleInfo = JSON.stringify(form.value.personInfoObj)

      if (form.value.perId != null) {
        editPersonInfo(form.value).then(res => {
          proxy.$modal.msgSuccess('操作成功！')
          emit('submit')
          show.value = false
        })
      } else {
        addPersonToMyDept(form.value).then((res) => {
          if (res.data == 0) {
            proxy.$modal.msgError('该成员，实名认证未通过，注册失败！')
          } else if (res.data < 0) {
            proxy.$modal.msgError('该成员已存在！')
          } else {
            proxy.$modal.msgSuccess('操作成功！')
            emit('submit')
            show.value = false
          }
        })
      }
    }
  })
}

// 所属单位
async function deptTreeSelectFN() {
  const res = await deptTreeSelect({ selfDeptId: '-1', fromTree: 1 })
  deptTree.value = res.data
}

async function open(perId) {
  if (perId) {
    title.value = '编辑' + subTitle
    isModify.value = true
    const res = await getInfo(perId)
    form.value = res.data
    if (form.value.personRoleInfo) {
      form.value.personInfoObj = JSON.parse(form.value.personRoleInfo)
      if (_.isArray(form.value.personInfoObj.type)) {
        form.value.personInfoObj.type = _.max(form.value.personInfoObj.type)
      }
      if (_.isArray(form.value.personInfoObj.rank)) {
        form.value.personInfoObj.rank = _.min(form.value.personInfoObj.rank)
      }
      if (_.isArray(form.value.personInfoObj.duan)) {
        form.value.personInfoObj.duan = _.min(form.value.personInfoObj.duan)
      }
    }

    extractInfoFromChinaIdCard({
      perId: perId,
      perType: form.value.perType,
      examinerType: form.value.examinerType,
      idcType: form.value.idcType,
      idcCode: form.value.idcCode
    }).then((res) => {
      form.value.perValidityDate = res.data.validityDate
    })
  } else {
    title.value = '添加' + subTitle
    console.log(form.value)
  }
  show.value = true
}

defineExpose({
  open
})
</script>

<style scoped lang="scss">
</style>