<template>
  <div>
    <el-form ref="infoRef" label-width="120px" :model="form" :rules="rules">
      <el-form-item label="证件类型" prop="idcType">
        <el-select v-model.trim="form.idcType" placeholder="请选择" style="width: 100%;" @change="changeIdcType">
          <el-option v-for="item in cardList" :key="item" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="证件照" prop="card">
        <ImageUpload3
          v-model.trim="form.card" class="card" :crop-width="440" :crop-height="260"
          :limit="1"
        />
        <div style="text-align: center;font-size: 13px">请上传大小不超过 <span class="red">10MB</span> 格式为 <span class="red">png/jpg/jpeg</span>的<span>{{ idcFilter(form.idcType) }}</span> </div>
      </el-form-item>
      
      <el-form-item style="width: 100%;" label="姓名" prop="name">
        <el-input v-model.trim="form.name" :disabled="name||flag" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="证件号码" prop="idcCode">
        <el-input v-model.trim="form.idcCode" :disabled="idcCode||flag" placeholder="请输入" style="width: 100%;" />
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-select v-model="form.sex" :disabled="sex||flag" placeholder="请选择" style="width: 100%;">
          <el-option label="男" value="0" />
          <el-option label="女" value="1" />
        </el-select>
      </el-form-item>
      <el-form-item label="出生日期" prop="birth">
        <el-date-picker
          v-model="form.birth"
          :disabled="birth||flag"
          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.trim="form.phone" placeholder="请输入联系电话" />
      </el-form-item>

      <el-form-item label="地址" prop="cityId">
        <el-cascader
          v-model.trim="form.cityId"
          :options="district"
          :props="defaultProps"
          style="width: 100%"
        />
      </el-form-item>
      <el-form-item label="详细地址" prop="address">
        <el-input v-model.trim="form.address" placeholder="请输入" />
      </el-form-item>
      <el-row>
        <el-col :span="8">
          <el-form-item label="头像" prop="photo" class="photo">
            <!--            <ImageUpload2 v-model="form.photo" :crop-height="317" :crop-width="255" :fixed-box="true" :limit="1" />-->
            <image-upload-avatar v-model="form.photo" v-model:round="form.photo2" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="&nbsp;" prop="check">
        <div>
          <div>
            <el-checkbox v-model="form.check" label="我已阅读" name="type" />
            <el-button link type="primary" style="position: relative;top: -3px;" @click="RegistrationFN">《注册须知》</el-button>
            <el-button link type="primary" style="position: relative;top: -3px;margin-left: 0" @click="openFN">《入会须知》</el-button>
          </div>
        </div>
      </el-form-item>
    </el-form>
    <el-button class="saveBtn" type="primary" :loading="buttonLoading" @click="AffirmFN">注册</el-button>

    <!-- 报名须知 -->
    <InstructionsForMembership ref="InstructionsForMembershipRef" />
    <Registration ref="RegistrationRef" />

    <!-- 信息确认 -->
    <el-dialog
      v-model="showAffirm"
      title="信息确认"
      width="600"
      center
      style="border-radius: 20px; padding: 20px;"
    >
      <div>
        <el-form ref="infoRef2" :model="form" :rules="rules" label-width="100">
          <el-form-item style="width: 100%;" label="姓名" prop="name"><el-input v-model.trim="form.name" disabled placeholder="" />
          </el-form-item>
          <el-form-item label="会员编号" prop="perCode">
            <el-input v-model.trim="form.perCode" disabled placeholder="" style="width: 100%;" />
          </el-form-item>
          <el-form-item label="证件类型" prop="idcType">
            <el-select v-model.trim="form.idcType" disabled placeholder="请选择" style="width: 100%;">
              <el-option v-for="item in cardList" :key="item" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="证件号码" prop="idcCode">
            <el-input v-model.trim="form.idcCode" disabled placeholder="" style="width: 100%;" />
          </el-form-item>
          <el-form-item label="性别" prop="">
            <el-input :value="form.sex==0?'男':'女'" disabled placeholder="" style="width: 100%;" />
          </el-form-item>
          <el-form-item label="出生日期" prop="">
            <el-input :value="parseTime(form.birth, '{y}-{m}-{d}')" disabled placeholder="" style="width: 100%;" />
          </el-form-item>

          <!--          <el-form-item label="当前级位" prop="levelJi">-->
          <!--            <el-input v-model="form.levelJi" disabled placeholder="" style="width: 100%;" />-->
          <!--          </el-form-item>-->
          <!--          <el-form-item label="当前段位" prop="levelDuan">-->
          <!--            <el-input v-model="form.levelDuan" disabled placeholder="" style="width: 100%;" />-->
          <!--          </el-form-item>-->
          <el-form-item label="会员有效期" prop="validityDate">
            <el-input :value=" parseTime(form.validityDate, '{y}-{m}-{d}')" disabled placeholder="" style="width: 100%;" />
          </el-form-item>
        </el-form>

      </div>
      <div style="text-align: center;">
        <el-button @click="showAffirm=false"> 取消</el-button>
        <el-button type="primary" :loading="buttonLoading" @click="submitForm"> 确认</el-button>
      </div>
    </el-dialog>
  
  </div>
  
</template>

<script setup>
import { ref, toRefs, reactive, onMounted, watch } from 'vue'
import { addPersonToMyDept, countryList, carUrl, extractInfoFromChinaIdCard } from '@/api/person/info'
import InstructionsForMembership from '@/views/system/user/profile/components/InstructionsForMembership'
import { regionsList } from '@/api/system/userInfo.js'
import { getCurrentInstance } from '@vue/runtime-core'
import ImageUpload3 from '@/components/ImageUpload/index3.vue'
import Registration from '/@/views/system/user/profile/components/Registration.vue'
import { idcFilter } from '@/utils/ruoyi'
import ImageUploadAvatar from '/@/components/ImageUpload/avatar.vue'
import aes2 from '@/utils/aes2'

const emit = defineEmits(['addAudit'])

const buttonLoading = ref(false)
const { proxy } = getCurrentInstance()
const district = ref()
const showAffirm = ref(false)
const perId = ref()
const timer = ref()
const timerIn = ref()
const levelList = ref([])
const birth = ref(null)
const name = ref(null)
const idcCode = ref(null)
const sex = ref(null)
const flag = ref(true)

const cardList = ref([
  { label: '身份证', value: '0' },
  { label: '来往大陆(内地)通行证 ', value: '1' },
  // { label: '往来港澳台通行证识别', value: '2' },
  { label: '护照', value: '3' },
  { label: '户口本', value: '4' },
  { label: '香港身份证', value: '5' }
])

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 defaultProps = {
  children: 'children',
  label: 'text',
  emitPath: false,
  checkStrictly: true
}

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' },
    cardType: { required: true, message: '请选择证件类型', trigger: 'blur' },
    card: { required: true, message: '请上传证件照', trigger: 'blur' },
    idcCode: [
      { required: true, message: '请输入证件号', trigger: 'blur' },
      { validator: validateCode, trigger: 'blur' }
    ],
    // phone: [
    //   // { required: true, message: '请输入手机号', trigger: 'blur' },
    //   {
    //     required: false,
    //     pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
    //     message: '请输入正确的手机号码',
    //     trigger: 'blur'
    //   }
    // ],
    // cityId: { required: false, message: '请选择地区', trigger: 'change' },
    // address: { required: false, message: '请输入详细地址', trigger: 'change' },
    birth: [
      {
        required: true,
        message: '请选择报名日期',
        trigger: 'change'
      }
    ],
    photo: { required: true, message: '请上头像', trigger: 'blur' },
    check: [
      { required: true, message: '请勾选我已阅读', trigger: 'blur' },
      { validator: checkFN, trigger: 'blur' }
    ],
    parentId: { required: true, message: '请选调入协会', trigger: 'blur' }
  },
  form: {
    perType: '1', // （1：个人会员；2：教练；3：考官；4：裁判；5：临时会员；）
    cityId: '', // 城市id
    idcType: '0'
  }
})
const { rules, form } = toRefs(data)
onMounted(() => {
  form.value.perType = 1
})

// 监听图片上传
watch(() => [form.value.idcType, form.value.card], (newV, oldV) => {
  if (newV[0] && newV?.[1]?.length > 0) {
    clearTimeout(timer.value)
    timer.value = setTimeout(() => {
      cardExtract()
    }, 500)
  }
})

// 证件照
watch(() => form.value.card, (newValue, oldValue) => {
  if (newValue?.length == 0) {
    changeIdcType()
  }
})

// 证件照中x转X
watch(() => form.value.idcCode, (newValue, oldValue) => {
  if (newValue) {
    form.value.idcCode = form.value.idcCode?.toUpperCase()
  }
})

// 获取老数据
watch(() => [form.value.idcType, form.value.idcCode], (newForm, oldForm) => {
  if ((newForm[0] == 0 || newForm[0] == 4)) {
    if (pattern.test(form.value.idcCode) && form.value.idcCode?.length == 18) {
      clearTimeout(timerIn.value)
      timerIn.value = setTimeout(() => {
        getIdCode()
      }, 500)
    }
  } else {
    if (form.value.idcType && form.value.idcCode?.length > 0 && form.value?.idcCode.length <= 12) {
      clearTimeout(timerIn.value)
      timerIn.value = setTimeout(() => {
        getIdCode()
      }, 800)
    }
  }
})

// 身份信息读取
async function getIdCode() {
  try {
    buttonLoading.value = true
    const res = await extractInfoFromChinaIdCard({
      idcType: form.value.idcType,
      idcCode: form.value.idcCode,
      perType: form.value.perType
    })
    if (res.code == 200) {
      perId.value = res.data.perId
      // if (res.data.sex && res.data.perCode)sex.value = form.value.sex = res.data.sex
      // if (res.data.birth && res.data.perCode) birth.value = form.value.birth = res.data.birth
      if (res.data.name && res.data.perCode && form.value.idcType == 3)name.value = form.value.name = res.data.name
      form.value.phone = res.data.phone
      form.value.cityId = res.data.cityId * 1
      form.value.address = res.data.address
      form.value.photo = res.data.photo
      form.value.perId = res.data.perId
      // form.value.levelDuan = res.data.levelDuan
      // form.value.levelJi = res.data.levelJi
      if (form.value.idcType == 3) {
        form.value.validityDate = null
      } else {
        form.value.validityDate = res.data.validityDate
      }
      form.value.perCode = res.data.perCode
    }
    clearTimeout(timerIn.value)
  } catch (e) {
    console.log(e)
  } finally {
    clearTimeout(timerIn.value)
    buttonLoading.value = false
  }
}

// 证件类型切换
function changeIdcType() {
  form.value.sex = null
  form.value.birth = null
  form.value.phone = null
  form.value.cityId = null
  form.value.address = null
  form.value.photo = null
  form.value.photo2 = null
  form.value.validityDate = null
  form.value.perCode = null
  form.value.card = null
  form.value.name = null
  form.value.idcCode = null
  form.value.check = false
  birth.value = null
  sex.value = null
  name.value = null
  idcCode.value = null
  flag.value = true
}

// 图片提取
async function cardExtract() {
  try {
    buttonLoading.value = true
    const formData = new FormData()
    formData.append('pic', form.value.card[0].file)
    const res = await carUrl(formData, form.value.idcType)
    if (res.code == 200) {
      sex.value = form.value.sex = res.data.sex
      birth.value = form.value.birth = res.data.birth
      idcCode.value = form.value.idcCode = res.data.code
      form.value.idcType != 3 ? name.value = form.value.name = res.data.name : form.value.name = res.data.name
      flag.value = false
    }
    clearTimeout(timer.value)
  } catch (e) {
    console.log(e)
  } finally {
    clearTimeout(timer.value)
    buttonLoading.value = false
  }
}

// 入会须知
function openFN(row) {
  proxy.$refs['InstructionsForMembershipRef'].open(form.value.name)
}
function RegistrationFN() {
  proxy.$refs['RegistrationRef'].open()
}


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

// 自定义验证
function checkFN(rule, value, callback) {
  if (!form.value.check) {
    if (pattern.test(value)) {
      return callback()
    }
    callback(new Error('请勾选我已阅读'))
  } else {
    return callback()
  }
}

function validateCode(rule, value, callback) {
  // switch (form.value.idcType) {
  //   case '0':
  //     if (pattern.test(value)) {
  //       return callback()
  //     } else {
  //       callback(new Error('请输入正确证件号'))
  //     }
  //     break
  //   case '1':
  //     if (form.value.idcCode.length > 0 &&  form.value.idcCode.length <= 12) {
  //       return callback()
  //     } else {
  //       callback(new Error('请输入正确证件号'))
  //     }
  //     break
  //   case '3':
  //     if (form.value.idcCode.length > 0 && form.value.idcCode.length <= 12) {
  //       return callback()
  //     } else {
  //       callback(new Error('请输入正确证件号'))
  //     }
  //     break
  //   case '5':
  //     if (pattern.test(value)) {
  //       return callback()
  //     } else {
  //       callback(new Error('请输入正确证件号'))
  //     }
  //     break
  // }

  const fuObj = new Map([
    [/^[0,4]$/, () => {
      if (pattern.test(value)) {
        return callback()
      } else {
        return callback(new Error('请输入正确证件号'))
      }
    }],
    [/^[1,3,2,5]$/, () => {
      if (value.length > 0 && value.length <= 12) {
        return callback()
      } else {
        return callback(new Error('请输入12位内的证件号'))
      }
    }]
  ])
  fuObj.forEach((value, key, map) => {
    if (key.test(form.value.idcType)) {
      return value()
    }
  })


  // const validate = (value) => {
  //   if (value.length > 0 && value.length <= 12) {
  //     return callback()
  //   } else {
  //     return callback(new Error('请输入12位内的证件号'))
  //   }
  // }
  // const validateIdCard = (value) => {
  //   if (pattern.test(value)) {
  //     return callback()
  //   } else {
  //     return callback(new Error('请输入正确证件号'))
  //   }
  // }

  // return item.regular.test(form.value.idcType)
  // console.log(v)
  // if (v) return v.fn(value, callback)
  // console.log(v)

  // switch (form.value.idcType) {
  //   case '0':
  //     validateIdCard(value)
  //     break
  //   case '1':
  //     validate(value)
  //     break
  //   case '3':
  //     validate(value)
  //     break
  //   case '5':
  //     validateIdCard(value)
  //     break
  // }
}

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


/** 提交按钮 */
function submitForm() {
  proxy.$refs['infoRef2'].validate(valid => {
    if (valid) {
      buttonLoading.value = true
      let forms = {}
      forms = JSON.parse(JSON.stringify(form.value))
      forms.sourceFlag = '1'
      forms.card = null
      switch (form.value.idcType) {
        case '0':
          forms.idcType = '0'
          submmitApi(forms)
          break
        case '1':
          forms.idcType = '1'
          submmitApi(forms)
          break
        case '3':
          forms.idcType = '3'
          forms.validityDate = null
          submmitApi(forms)
          break
        case '4':
          forms.idcType = '0'
          forms.signT = aes2.AESEncrypt(forms.idcType + new Date().valueOf())
          submmitApi(forms)
          break
        case '5':
          forms.idcType = '5'
          submmitApi(forms)
          break
        default:
          return proxy.$modal.msgError('证件类型错误！')
      }
      // if (forms.idcType == 4) {
      //   forms.idcType == 0
      // }
      // if (forms.idcType == 3) {
      //   forms.validityDate = null
      // }

      // try {
      //   const res = await addPersonToMyDept(forms)
      //   if (res.code === 200) {
      //     if (res.data == 0) {
      //       proxy.$modal.msgError('该成员实名认证未通过，注册失败！')
      //       return
      //     }
      //     if (res.data * 1 < 0) {
      //       showAffirm.value = false
      //       changeIdcType()
      //       return proxy.$modal.msgError('该会员已存在其他道馆，如需添加，请发起会员调动')
      //     }
      //     proxy.$modal.msgSuccess('操作成功，您可以去列表中查看！')
      //     changeIdcType()
      //     showAffirm.value = false
      //   } else {
      //     proxy.$modal.msgError('您已注册该会员，请不要重复注册！')
      //   }
      //   buttonLoading.value = false
      // } catch (e) {
      //   console.log(e)
      //   buttonLoading.value = false
      // } finally {
      //   buttonLoading.value = false
      // }
    } else {
      proxy.$modal.msgError('请完善信息')
      buttonLoading.value = false
    }
  })
}

async function submmitApi(forms) {
  try {
    buttonLoading.value = true
    const time = new Date().valueOf() + ''
    forms.t = time + Math.floor(Math.random() * 10)
    forms.signT = aes2.AESEncrypt(forms.idcType + time)
    const res = await addPersonToMyDept(forms)
    if (res.code === 200) {
      if (res.data == 0) {
        await proxy.$modal.confirm('该成员，实名认证未通过，是否进行人工审核？')
        showAffirm.value = false
        forms.keyInWay = 1
        emit('addAudit', forms)
        return

        // proxy.$modal.msgError('该成员实名认证未通过，注册失败！')
        // return
      }
      if (res.data * 1 < 0) {
        showAffirm.value = false
        changeIdcType()
        return proxy.$modal.msgError('该会员已存在其他道馆，如需添加，请发起会员调动')
      }
      proxy.$modal.msgSuccess('操作成功，您可以去列表中查看！')
      changeIdcType()
      showAffirm.value = false
    } else {
      proxy.$modal.msgError('您已注册该会员，请不要重复注册！')
    }
    buttonLoading.value = false
  } catch (e) {
    console.log(e)
    buttonLoading.value = false
  } finally {
    buttonLoading.value = false
  }
}

// 添加人员第一步
function AffirmFN() {
  console.log(proxy.$refs['infoRef'])
  proxy.$refs['infoRef'].validate(valid => {
    if (valid) {
      showAffirm.value = true
    } else {
      proxy.$modal.msgError('请完善信息')
    }
  })
}

function formRest() {
  changeIdcType()
}

defineExpose({ formRest })
</script>

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

.w50 {
  width: 50%;
}

.ml20 {
  margin-left: 20px;
}

.reactive{
  position: relative;
}
.son{
margin-left: 20px;
}


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

//:deep(.el-upload--picture-card){width: 100px;height: 140px;}
//:deep(.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;
  }
}

:deep(.card){
  .el-upload__tip{
    display: none;
  }
    .el-upload--picture-card{
    background-image: url(@/assets/images/card3.png) !important;
    background-size: 100% !important;
  }
  .el-upload-list--picture-card{
    width: 360px;
    height: 225px;
    .el-upload--picture-card{
      width: 100%;
      height: 100%;
    }
  }
  .el-upload-list__item{
    width: 360px;
    height: 225px;
    // border-radius: 10px;
    // border: 1px dashed #4e4c4c;
  }
  
}
.red{
    color: rgb(245, 108, 108);
  }


</style>