<template>
  <el-dialog
      v-model="show" :title="title" width="1100px" append-to-body close-icon="CircleClose" center
      :close-on-click-modal="false" class="pcloginpop"
      destroy-on-close
  >
<!--    国际赛事随行人员-->
    <el-form ref="dialogRef" :model="form" :rules="language==0?rules:rules_cn" label-width="140px"
    >
      <el-row :gutter="30" class="mt30">
        <el-col :lg="12" class="touxiang">

          <el-form-item :label="language==0?'WDSF会员号':'WDSF MIN'" v-if="form.wdsfMin">
            {{ form.wdsfMin }}
          </el-form-item>
          <el-form-item :label="language==0?'WDSF会员号':'WDSF MIN'" v-else>
            <el-input type="number" v-model="card" @change="resetCode" >
              <template #append>
                <el-button type="primary" plain style="width: 110px" @click="checkCard">
                  <el-icon v-if="isCodeTrue" size="16" color="#67C23A">
                    <CircleCheckFilled/>
                  </el-icon>
                  <span v-else>{{ language == 0 ? '校验卡号' : 'Check Code' }}</span>
                </el-button>
              </template>
            </el-input>
            <a class="text-primary text-sm mt10" href="https://www.worlddancesport.org/Athlete/List" target="_blank">
              <el-icon><Link /></el-icon>
              {{language==0?'去WDSF官网查询我的会员号':'Search my WSDF MIN on the WDSF official website'}}
            </a>
          </el-form-item>
          <el-form-item :label="language==0?'姓氏':'Surname'" prop="xing" :required="!editDis">
            <el-input v-model="form.xing" :disabled="editDis"/>
          </el-form-item>
          <el-form-item :label="language==0?'名':'Name'" prop="ming" required>
            <el-input v-model="form.ming" :disabled="editDis"/>
          </el-form-item>
          <el-form-item :label="language==0?'性别':'Gender'" prop="sex">
            <el-radio-group v-model="form.sex">
              <el-radio value="0">{{ language == 0 ? '女' : 'female' }}</el-radio>
              <el-radio value="1">{{ language == 0 ? '男' : 'male' }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="form.wdsfMin" :label="language==0?'代表':'Representing'" required>
            <el-input v-model="form.representing" disabled/>
          </el-form-item>
          <el-form-item v-else :label="language==0?'所属国家/地区':'Nationality'" prop="countryId" required>
            <el-select filterable v-model="form.countryId" style="width: 100%;" @change="changeCountry">
              <el-option v-for="item in countryList" :key="item.id" :label="language==0?item.name:item.enName"
                         :value="item.id"/>
            </el-select>
          </el-form-item>
          <el-form-item :label="language==0?'主要会员角色':'Roles'" prop="labelArr">
            <el-select v-model="form.labelArr" multiple>
              <el-option v-for="l in labels" :key="l.value" :value="l.value" :label="language==0?l.label:l.enlabel"/>
            </el-select>
          </el-form-item>
          <el-form-item :label="language==0?'有效证件':'Valid Passport'" required>
            <file-upload v-model="form.passportUrl" :limit="1" :is-show-tip="false"
                         :button-text="language==0?'上传':'Upload'"/>
            <div class="tip">
              <span v-if="language==0">请上传有效身份证件扫描件，用于核实身份信息、申请签证邀请函及购买保险等</span>
              <span v-else>Please upload a scanned copy of your valid passport for verification of identity information,
                application of visa invitation letter and purchasing insurance etc.</span>
            </div>
          </el-form-item>


        </el-col>
        <el-col :lg="12" class="touxiang">
          <el-form-item prop="picUrl" :label="language==0?'个人照片':'Photo'">
            <ImageUpload2
                v-model="form.picUrl" :crop-height="280" :crop-width="200" class="threeFour" :limit="1"
                :is-show-tip="false"
            />
          </el-form-item>

          <el-form-item :label="language==0?'证件类型':'ID Type'" prop="idcType"
                        :required="!form.wdsfMin&&form.labelArr.indexOf('0')>-1">
            <el-select v-model="form.idcType" style="width: 100%;" :disabled="editgay&&form.idcType!=''">
              <el-option
                  v-for="item in certificates"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="language==0?'证件号码':'ID NO'" prop="idcCode"
                        :required="!form.wdsfMin&&form.labelArr.indexOf('0')>-1">
            <el-input v-model="form.idcCode" :disabled="editgay&&form.idcCode!=''" @blur="giveBirthDay"/>
          </el-form-item>
          <el-form-item :label="language==0?'出生日期':'Birth'" prop="birth"
                        :required="!form.wdsfMin&&form.labelArr.indexOf('0')>-1">
            <el-date-picker
                v-model="form.birth" :disabled="form.idcType=='0'"
                style="width: 100%;"
                type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
            />
          </el-form-item>

          <el-form-item :label="language==0?'手机号码':'Phone'" prop="phone">
            <el-input v-model="form.phone" type="number"/>
          </el-form-item>

          <el-form-item :label="language==0?'详细地址':'Address'" prop="address">
            <el-cascader v-if="form.countryId == 240"
                         v-model="form.regionId"
                         style="width: 100%;margin-bottom: 15px"
                         :options="regionsList"
                         :props="{ label:'text' }"
            />
            <el-input v-model="form.address" type="textarea" :rows="4"/>

          </el-form-item>

          <!--          <el-form-item :label="language==0?'邮箱':'Email'" prop="email" required>-->
          <!--            <el-input v-model="form.email"/>-->
          <!--          </el-form-item>-->


        </el-col>
      </el-row>
    </el-form>

    <template #footer>
      <div class="dialog-footer text-center">
        <el-button type="primary" class="btn-lineG w200px" round @click="submitForm">
          {{language == 0 ? '确定' : 'Save'}}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import {reactive, ref, toRefs, watch} from 'vue'
import {getCurrentInstance, nextTick, onMounted} from '@vue/runtime-core'
import * as match from '@/apiPc/match'
import {ElMessage} from 'element-plus'
import _ from 'lodash'
import {useStorage} from "@vueuse/core/index";
import {checkWdsf, getCaptchaSms} from "@/apiPc/match";

const language = useStorage('language', 0)
const certificates = ref([
  {
    value: '0',
    disabled: language.value == 0 ? false : true,
    label: language.value == 0 ? '居民身份证' : 'Resident ID card'
  },
  {
    value: '1',
    label: language.value == 0 ? '护照' : 'Passport'
  },
  {
    value: '2',
    label: language.value == 0 ? '其他' : 'Other'
  }
])
const {proxy} = getCurrentInstance()
const emit = defineEmits(['submitForm'])
const data = reactive({
  form: {
    // countryId: 240,
    sex: '0'
  },
  rules: {
    // xing: [{required: true, message: '必填', trigger: 'blur'}],
    ming: [{required: true, message: '必填', trigger: 'blur'}],
    // countryId: [{required: true, message: '必填', trigger: 'change'}],
    // idcType: [{required: true, message: '必填', trigger: 'change'}],
    // idcCode: [{required: true, message: '必填', trigger: 'blur'}],
    // phone: [{required: true, message: '必填', trigger: 'blur'}],
    // regionId: [{ required: true, message: '必填', trigger: 'change' }],
    // birth: [{required: true, message: '必填', trigger: 'change'}],
    // address: [{ required: true, message: '必填', trigger: 'blur' }],
    // picUrl: [{required: true, message: '必填', trigger: 'blur'}],
    sex: [{required: true, message: '必填', trigger: 'change'}],
    labelArr: [{required: true, message: '必填', trigger: 'change'}]
  },
  rules_cn: {
    // xing: [{required: true, message: 'required', trigger: 'blur'}],
    ming: [{required: true, message: 'required', trigger: 'blur'}],
    countryId: [{required: true, message: 'required', trigger: 'change'}],
    // idcType: [{required: true, message: 'required', trigger: 'change'}],
    // idcCode: [{required: true, message: 'required', trigger: 'blur'}],
    // phone: [{required: true, message: 'required', trigger: 'blur'}],
    // regionId: [{ required: true, message: 'required', trigger: 'change' }],
    // birth: [{required: true, message: 'required', trigger: 'change'}],
    // address: [{ required: true, message: 'required', trigger: 'blur' }],
    // picUrl: [{required: true, message: 'required', trigger: 'blur'}],
    sex: [{required: true, message: 'required', trigger: 'change'}],
    labelArr: [{required: true, message: 'required', trigger: 'change'}]
  },
  show: false,
  countryList: [],
  regionsList: [],
  labels: [
    {value: '0', label: '运动员', enlabel: 'Athletes'},
    {value: '1', label: '教练', enlabel: 'Coach'},
    {value: '2', label: '领队', enlabel: 'Leader'},
    {value: '4', label: '队医', enlabel: 'Nurse'},
    {value: '5', label: '翻译', enlabel: 'Translator'},
    {value: '6', label: '官员', enlabel: 'Official'},
    {value: '3', label: '其他', enlabel: 'Other'}
  ],
  title: '添加选手信息',
  groupId: '0',
  showRequire: false,
  isMe: false,
  isCodeTrue: false
})
const {
  showRequire,
  form,
  rules,
  rules_cn,
  show,
  countryList,
  regionsList,
  title,
  groupId,
  labels,
  uType,
  isMe,isCodeTrue
} = toRefs(data)
const card = ref('')
onMounted(() => {
  getCountryList()
  getRegionsList()

})
const editgay = ref(false)
const editDis = ref(false)
const isShow = ref(false)
const cptId = ref('0')
const open = (params) => {
  console.log(params.label)
  show.value = true
  title.value = params.title
  cptId.value = params.cptId
  groupId.value = params.groupId || '0'
  if (params.label) {
    form.value.labelArr = [params.label]
  } else {
    form.value.labelArr = []
  }
  if (params.id != 0) { // 编辑
    editgay.value = true
    match.getPersonInfoById(params.id).then(res => {
      form.value = res.data
      form.value.id = params.id
      if(form.value.wdsfMin){
        editDis.value = true
      }
      if(form.value.idcType=='3'){
        form.value.idcType = ''
        form.value.idcCode = ''
      }
      if (form.value.label) {
        // {0:0,1:1,2:3}
        form.value.labelArr = form.value.label.split(',')
      }
    })
  } else {
    editgay.value = false
  }

}
defineExpose({open})
watch(show, (value) => {
  if (!value) {
    form.value = {
      sex: '0'
    }
    card.value = ''
    editDis.value = false
    if (language.value == 0) {
      form.value.countryId = 240
    }
  }
  nextTick(() => {
    // proxy.$refs['dialogRef'].clearValidate()
  })
})
function resetCode() {
  isCodeTrue.value = false
}
function getCountryList() {
  match.countryList().then(res => {
    countryList.value = res.data
  })
}
function checkCard() {
  if (!card.value) {
    if (language.value == 0) {
      ElMessage.warning('请填写WDSF会员号')
    } else {
      ElMessage.warning('Please fill in your WDSF MIN')
    }
    return
  }
  // isShow.value = true
  checkWdsf({card: card.value}).then(res => {
    if (res.data.wdsfFlag == '0') {
      if (language.value == 0) {
        ElMessage.warning('WDSF会员号错误')
      } else {
        ElMessage.warning('WDSF MIN is Error')
      }
      return
    }
    if (res.data.personFlag == '1') {
      if (language.value == 0) {
        ElMessage.warning('该会员号已被使用')
      } else {
        ElMessage.warning('This WDSF MIN has been used')
      }
      return
    }
    if(res.data.min){
      editDis.value = true
      form.value.wdsfMin = res.data.min
      form.value.xing = res.data.surname
      form.value.ming = res.data.name
      form.value.representing = res.data.representing
      form.value.ageGroup = res.data.ageGroup
      form.value.division = res.data.division
      form.value.wdsfStatus = res.data.status
      if (!form.value.sex) {
        form.value.sex = '0'
      }
    }
  })
}
function getRegionsList() {
  match.regionsList().then(res => {
    regionsList.value = res.data
  })
}

function checkCode() {
  if (form.value.idcType == '0' && form.value.idcCode) {
    giveBirthDay()
    var obj = {
      idcType: form.value.idcType,
      idcCode: form.value.idcCode
    }
    match.checkPerson(obj).then(res => {
      if (res.data.idcCode != null) {
        form.value = res.data
        if (form.value.label != null) {
          form.value.labelArr = form.value.label.split(',')
        }
        form.value.groupId = groupId.value
      }
    })
  }
}

function changeCountry() {
  if( form.value.countryId == 240 ){
    form.value.idcType = '0'
  }
}
function giveBirthDay() {
  // 判断身份证正确性/赋值生日
  if (form.value.idcType == '0') {
    if (!(/(^\d{15}$)|(^\d{17}([0-9]|X)$)/.test(form.value.idcCode))) {
      ElMessage.warning('请输入正确的身份证号码')
    } else {
      let tmpStr = ''
      if (form.value.idcCode.length == 15) {
        tmpStr = form.value.idcCode.substring(6, 12)
        tmpStr = '19' + tmpStr
        tmpStr = tmpStr.substring(0, 4) + '-' + tmpStr.substring(4, 6) + '-' + tmpStr.substring(6)
      } else {
        tmpStr = form.value.idcCode.substring(6, 14)
        tmpStr = tmpStr.substring(0, 4) + '-' + tmpStr.substring(4, 6) + '-' + tmpStr.substring(6)
      }
      form.value.birth = tmpStr

      const res = /^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$/
      if (form.value.idcCode && res.test(form.value.idcCode)) {
        const genderCode = form.value.idcCode.charAt(16)
        if (parseInt(genderCode) % 2 == 0) {
          form.value.sex = '0'
        } else {
          form.value.sex = '1'
        }
      }
    }
  }
}
function submitForm() {
  proxy.$refs['dialogRef'].validate((valid) => {
    if (valid) {
      // 验证身份证号
      // if (form.value.idcType == '0' && !(/(^\d{15}$)|(^\d{17}([0-9]|X)$)/.test(form.value.idcCode))) {
      //   ElMessage.warning('请输入正确的身份证号码')
      //   return
      // }
      // 验证手机号
      // if (form.value.phone) {
      //   var pattern = /^1[3456789]\d{9}$/
      //   if (!pattern.test(form.value.phone)) {
      //     ElMessage.warning(language.value == 0 ? '请输入正确的手机号' : 'Please enter the correct mobile phone number')
      //     return
      //   }
      // }
      if(!editDis.value){
        if(!form.value.xing){
          ElMessage.warning(language.value == 0 ? '请填写姓' :'Please fill in surname')
          return
        }
      }
      if(!form.value.passportUrl){
        ElMessage.warning(language.value == 0 ? '请上传护照文件' :'Please upload  your passport file')
        return
      }
      if (typeof (form.value.regionId) === 'object') {
        form.value.regionId = _.last(form.value.regionId)
      }
      if(Array.isArray(form.value.passportUrl)){
        form.value.passportUrl = form.value.passportUrl[0].url
      }
      form.value.label = form.value.labelArr.toString()

      if (groupId.value != 0) {
        // 团队
        form.value.groupId = groupId.value
        match.savePersonForMyGroup(form.value).then(res => {
          ElMessage.success(language.value == 0 ? '保存成功' : 'Save successful')
          show.value = false
          emit('submitForm')
        })
      } else {
        if (editgay.value) {
          // id不是0
          match.editPersonInfo(form.value).then(res => {
            ElMessage.success(language.value == 0 ? '保存成功' : 'Save successful')
            show.value = false
            emit('submitForm')
          })
        } else {
          if (isMe.value) {
            match.saveMyBaseInfo(form.value).then(res => {
              ElMessage.success(language.value == 0 ? '保存成功' : 'Save successful')
              show.value = false
              emit('submitForm')
            })
          } else {
            form.value.cptId = cptId.value
            match.savePersonForMyPerson(form.value).then(res => {
              ElMessage.success(language.value == 0 ? '保存成功' : 'Save successful')
              show.value = false
              emit('submitForm')
            })
          }
        }
      }
    }
  })
}

function cancel() {
  show.value = false
}
</script>

<style lang="scss">
.threeFour {
  width: 100%;

  .el-upload--picture-card {
    width: 120px;
    height: 160px;
  }

  .el-upload-list--picture-card .el-upload-list__item {
    width: 120px;
    height: 160px;
  }
}

.tip {
  font-size: 13px;
  color: #999;
  margin: 10px 0;

  i {
    color: red;
    margin: 0 4px 0 0;
  }
}

.shenfen {
  .el-upload--picture-card {
    width: 320px;
    height: 200px;
  }

  .el-upload-list--picture-card .el-upload-list__item {
    width: 320px;
    height: 200px;
  }
}

.touxiang {
  :deep(.el-upload--picture-card ) {
    width: 140px;
    height: 200px;
  }
}

.touxiang {
  :deep(.el-upload-list__item ) {
    width: 140px;
    height: 200px;
  }

}

.el-form--inline .el-form-item {
  width: 100%
}


.boxDialog {
  .el-dialog__header {
    background: linear-gradient(#ed2c22, #fe6d45);
    margin-right: 0;
    height: 52px;

    span {
      color: #fff;
    }
  }
}
.el-input-group__append button.el-button, .el-input-group__append button.el-button:hover {
  color: var(--el-color-primary);
  background: #efefff;
  border: var(--el-color-primary) solid 1px;
  border-radius: 0;
}
</style>