<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="150px" inline>
      <el-row :gutter="30" class="mt30">
        <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 v-if="language!=0" label="WDSF code" prop="wdsfMin">
            <span v-if="form.wdsfMin">{{form.wdsfMin}}</span>
            <el-input v-else v-model="form.wdsfMin" type="number"/>
          </el-form-item>
          <el-form-item :label="language==0?'姓名':'Name'" prop="realName"  required>
            <el-input v-model="form.realName" :disabled="editgay&&form.idcType=='0'"/>
          </el-form-item>
          <el-form-item :label="language==0?'证件类型':'ID type'" prop="idcType" required>
            <el-select v-model="form.idcType" style="width: 100%;" :disabled="editgay&&form.idcType=='0'">
              <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>
            <el-input v-model="form.idcCode" @blur="giveBirthDay" :disabled="editgay&&form.idcType=='0'"/>
          </el-form-item>
          <el-form-item :label="language==0?'有效证件':'Valid Passport'" :required="form.idcType!='0'">
            <image-upload v-model="form.passportUrl" :limit="1" :is-show-tip="false" />
            <span class="tip">*请上传有效证件扫描件</span>
          </el-form-item>
          <el-form-item :label="language==0?'性别':'Gender'" prop="sex">
            <el-radio-group v-model="form.sex" :disabled="form.idcType=='0'">
              <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-col>
        <el-col :lg="12">
          <el-form-item :label="language==0?'出生日期':'Date of Birth'" prop="birth" required>
            <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?'主要会员角色':'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?'手机号码':'Phone'" prop="phone" required>
            <el-input v-model="form.phone" type="text"/>
            <span class="tip">*若未成年人没有手机号，请填写家长号码</span>
          </el-form-item>


          <el-form-item :label="language==0?'所属国家/地区':'Country'" prop="countryId" required>
            <el-select filterable v-model="form.countryId" style="width: 100%;" @change="changeCountryId">
              <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?'详细地址':'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 v-if="language=='0'" :label="language==0?'WDSF会员号':'WDSF code'" prop="wdsfMin">
            <span v-if="form.wdsfMin">{{form.wdsfMin}}</span>
            <el-input v-else v-model="form.wdsfMin" type="number"/>
          </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";
const language= useStorage('language',0)
const certificates = ref([
  {
    value: '0',
    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: {
    realName: [{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:{
    realName: [{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: 'Sportsman'},
    {value: '1', label: '教练', enlabel: 'Coach'},
    {value: '2', label: '领队', enlabel: 'Head Of Team'},
    {value: '4', label: '管理', enlabel: 'Team doctor'},
    {value: '5', label: '翻译', enlabel: 'Interpreter'},
    {value: '6', label: '官员', enlabel: 'Official'},
    {value: '3', label: '其他', enlabel: 'Other'}
  ],
  title: '添加选手信息',
  groupId: '0',
  showRequire: false,
  isMe:false
})
const {showRequire, form, rules,rules_cn, show, countryList, regionsList, title, groupId, labels,uType,isMe} = toRefs(data)
onMounted(() => {
  getCountryList()
  getRegionsList()

})
const editgay = ref(false)
const open = (params) => {
  show.value = true
  title.value = params.title
  groupId.value = params.groupId || '0'
  isMe.value = params.isMe
  if(params.label){
    form.value.labelArr= [params.label]
  } else {
    form.value.labelArr = []
  }
  if(language.value == 0){
    form.value.countryId = 240
    form.value.idcType = '0'
  }
  if(isMe.value){
    //个人
    match.getMyPersonInfo().then(res => {
      form.value = res.data
      form.value.id = res.data.id
      if (form.value.label) {
        // {0:0,1:1,2:3}
        form.value.labelArr = form.value.label.split(',')
      } else {
        form.value.labelArr = ['0']
      }
    })
  } else {
    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.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'
    }
    if(language.value == 0){
      form.value.countryId = 240
    }
  }
  nextTick(() => {
    // proxy.$refs['dialogRef'].clearValidate()
  })
})

function getCountryList() {
  match.countryList().then(res => {
    countryList.value = res.data
  })
}

function changeCountryId() {
  if (form.value.countryId != 240) {
    form.value.nation = '其他'
  }
}

function getRegionsList() {
  match.regionsList().then(res => {
    regionsList.value = res.data
  })
}

function checkCode() {
  if (form.value.idcType=='0' && form.value.idcCode) {
    var obj = {
      idcCode: form.value.idcCode,
      name: form.value.realName
    }
    match.checkIdcCode(obj).then(res => {
      if (res.data) {
        // form.value.birth = res.data.birth
        // form.value.sex = res.data.sex
      }
    })
  }
}

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.picUrl&&form.value.labelArr.indexOf('0')>-1){
      //   ElMessage.warning(language.value == 0 ? '请上传个人照片' :'Please upload  your photo')
      //   return
      // }
      // 验证身份证号
      if (form.value.idcType == 0 && !(/(^\d{15}$)|(^\d{17}([0-9]|X)$)/.test(form.value.idcCode))) {
        ElMessage.warning('请输入正确的身份证号码')
        return
      }
      // 验证手机号
      if (form.value.idcType == 0&&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(form.value.idcType != 0&&!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)
      }
      form.value.label = form.value.labelArr.toString()
      if(Array.isArray(form.value.passportUrl)){
        form.value.passportUrl = form.value.passportUrl[0].url
      }
      if (groupId.value != 0) {
        // 团队
        form.value.groupId = groupId.value
        if (form.value.idcType=='0' && form.value.idcCode) {
          var obj = {
            idcCode: form.value.idcCode,
            name: form.value.realName
          }
          match.checkIdcCode(obj).then(res => {
            if (res.data) {
              saveGroupMember()
            }
          })
        } else {
          saveGroupMember()
        }
      } 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 {
            match.savePersonForMyPerson(form.value).then(res => {
              ElMessage.success(language.value == 0 ?'保存成功':'Save successful')
              show.value = false
              emit('submitForm')
            })
          }
        }
      }
    }
  })
}
function saveGroupMember() {
  match.savePersonForMyGroup(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;
    }
  }
}

</style>