<template>
  <div>
    <el-form ref="infoRef" label-width="120px" :model="form" :rules="rules">
      <el-form-item style="width: 100%;" label="姓名" prop="name">
        <el-input v-model="form.name" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="证件类型" prop="idcType">
        <el-select v-model="form.idcType" disabled placeholder="请选择" style="width: 100%;">
          <el-option label="身份证" value="0" />
          <!-- <el-option label="护照" value="1" /> -->
        </el-select>
      </el-form-item>
      <el-form-item label="证件号码" prop="idcCode">
        <el-input v-model="form.idcCode" placeholder="请输入" style="width: 100%;" />
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-select v-model="form.sex" 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"
          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" placeholder="请输入联系电话" />
      </el-form-item>

      <el-form-item label="地址" prop="cityId">
        <el-cascader
          v-model="form.cityId"
          :value="departCheck"
          :options="district"
          :props="defaultProps"
          style="width: 100%"
          @change="handleChange"
          @expand-change="addressFN"
        />
      </el-form-item>
      <el-form-item label="详细地址" prop="address">
        <el-input v-model="form.address" placeholder="请输入" />
      </el-form-item>
      <el-row>
        <el-col :span="8">
          <el-form-item label="头像" prop="photo">
            <ImageUpload2 v-model="form.photo" crop-height="280" crop-width="200" :limit="1" />
          </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" @change="change" />
            <el-button link type="primary" style="position: relative;top: -3px;" @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" />
    <!-- 会员已完成注册 -->
    <!--    <el-dialog-->
    <!--      v-model="dialogSuccess"-->
    <!--      title="会员已完成注册！可去会员列表中查看！"-->
    <!--      width="600"-->
    <!--      :before-close="handleClose"-->
    <!--      style="border-radius: 20px; padding: 20px;"-->
    <!--    >-->
    <!--      <div style="text-align: center;">-->
    <!--        <el-button type="primary" @click="goMemberList"> 去查看</el-button>-->
    <!--      </div>-->
    <!--    </el-dialog>-->
    <!-- 会员已在其他完成注册，是否进行调入吗？ -->
    <!--    <el-dialog-->
    <!--      v-model="dialogFold"-->
    <!--      title="会员已在其他完成注册，是否进行调入吗？"-->
    <!--      width="600"-->
    <!--      :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="会员调动"-->
    <!--      width="600"-->
    <!--      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="600"
      :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> -->
    <!-- 信息确认 -->
    <el-dialog
      v-model="showAffirm"
      title="信息确认"
      width="600"
      center
      :before-close="handleClose"
      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="form.name" disabled placeholder="请输入" readonly />
          </el-form-item>
          <el-form-item label="证件类型" prop="idcType">
            <el-select v-model="form.idcType" disabled placeholder="请选择" style="width: 100%;">
              <el-option label="身份证" value="0" readonly />
            </el-select>
          </el-form-item>
          <el-form-item label="证件号码" prop="idcCode">
            <el-input v-model="form.idcCode" disabled placeholder="请输入" style="width: 100%;" readonly />
          </el-form-item>
        </el-form>

      </div>
      <div style="text-align: center;">
        <el-button type="" @click="showAffirm=false"> 取消</el-button>
        <el-button type="primary" @click="submitForm"> 确认</el-button>
      </div>
    </el-dialog>
    <!-- 证件信息读取
    <el-dialog
      v-if="showCard"
      v-model="showCard"
      title="证件读取"
      width="600"
      center
      :before-close="handleClose"
      style="border-radius: 20px; padding: 20px;"
    >
      <div>
        <el-form ref="infoRef" :model="form" :rules="rules" label-width="100">
          <el-form-item label="证件类型" prop="cardType">
            <el-select v-model="form.cardType" placeholder="请选择" style="width: 100%;">
              <el-option v-for="item in cardType" :key="item" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="证件照" prop="card">
            <ImageUpload2
              v-model="form.card" class="card" :crop-width="440" :crop-height="260"
              :limit="1"
            />
            <div style="text-align: center;">请上传大小不超过 <span class="red">10MB</span> 格式为 <span class="red">png/jpg/jpeg</span> 的文件</div>
          </el-form-item>
        </el-form>

      </div>
      <br>
      <div style="text-align: center;">
        <el-button type="" @click="showCard=false"> 取消</el-button>
        <el-button type="primary" @click="submitCard"> 确认</el-button>
      </div>
    </el-dialog> -->
  </div>
  
</template>

<script setup>
import { ref, toRefs, reactive, onMounted, watch } from 'vue'
import { getInfo, addPersonToMyDept, updateInfo, extractInfoFromChinaIdCard, checkId, countryList } from '@/api/person/info'
import InstructionsForMembership from '@/views/system/user/profile/components/InstructionsForMembership'
import { addTransferToRange } from '@/api/member/mobilize.js'
import { regionsList } from '@/api/system/userInfo.js'
import { useRouter } from 'vue-router'
import { getCurrentInstance } from '@vue/runtime-core'
const router = useRouter()
const buttonLoading = ref(false)
const { proxy } = getCurrentInstance()
const district = ref()
const departCheck = ref([110000, 120000])
const dialogSuccess = ref(false)
const dialogFold = ref(false)
const dialogApple = ref(false)
const showAffirm = ref(false)
const dialogID = ref(false)
const perId = ref()
const timer = ref()
// const showCard = ref(false)
const levelList = ref([])
// const cardType = ref([
//   { label: '身份证', value: '0' },
//   { label: '港澳台通行证 ', value: '1' },
//   { label: '中国护照', value: '2' },
//   { label: '外国护照', value: '3' }
// ])


// const codeFlag = ref(false) 
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
}

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'
  },
  forms: { }
})
const { rules, form, forms } = toRefs(data)
onMounted(() => {
  form.value.perType = 1
})

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

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

function change(e) {
  console.log(e)
}
// // 个人信息
// 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)
// }

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

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

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
}

// 身份信息读取
async function getIdCode() {
  const res = await extractInfoFromChinaIdCard(form.value)
  if (res.code === 200) {
    perId.value = res.data.perId
    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
    form.value.name = res.data.name
    form.value.perId = res.data.perId
    console.log(res.code)
    
    clearTimeout(timer.value)
  }
}

/** 提交按钮 */
function submitForm() {
  proxy.$refs['infoRef2'].validate(async valid => {
    if (valid) {
      buttonLoading.value = false
      let res = null
      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) {                 
          showAffirm.value = false
          form.value = { perType: 1, idcType: '0', check: false }
          return proxy.$modal.msgError('该会员已存在其他道馆，如需添加，请发起会员调动')
        }
        proxy.$modal.msgSuccess('操作成功，您可以去列表中查看！')
        form.value = { perType: 1, idcType: '0', check: false }
        showAffirm.value = false
        proxy.$refs['infoRef'].resetFields()
      } else {
        proxy.$modal.msgError('您已注册该会员，请不要重复注册！')
      }
      buttonLoading.value = false
      console.log(res)
    } else {
      proxy.$modal.msgError('请完善信息')
    }
  })
}

function goMemberList() {
  router.push('/member/list')
  dialogSuccess.value = false
}

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

// 调入提交审核
async function auditFN() {
  const res = await addTransferToRange({ personIdArray: perId.value })
  if (res.code == 200) {
    proxy.$modal.msgSuccess('操作成功！')
    // router.push('/member/mobillize')
    dialogApple.value = false
    dialogFold.value = false
    showAffirm.value = false
    form.value = { perType: 1, idcType: '0' }
  }
}

// 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) {
//     proxy.$modal.msgSuccess('身份校验通过')
//     close()
//   } else {
//     return proxy.$modal.msgError('身份校验失败，请核对信息')
//   }
// }

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

// // 证件读取
// function submitCard() {
//   proxy.$refs['infoRef'].validate(async valid => {
//     if (valid) {
//       // showAffirm.value = true

//     } else {
//       proxy.$modal.msgError('请完善信息')
//     }
//   })
// }

</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;
}
.idCode{
  :deep(.el-upload--picture-card){
    width: 380px;
    height: 240px;
    // margin: 0 auto;
    justify-content: center;
  }
  :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: 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/card1.png);
    background-size: 100%;
  }
  .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>