<template>
  <el-dialog
    v-model="show" :close-on-click-modal="false" :title="title" append-to-body center
    class="pcloginpop"
    close-icon="CircleClose" destroy-on-close width="800px"
    @close="cancel"
  >
    <!--    wdsf 个人/舞伴/国际赛运动员-->
    <div class="pd10" />
    <el-form ref="dialogRef" :label-width="language==0?120:180" :model="form" inline>
      <div class="leftboderTT">
        {{ language == 0 ? '完善信息' : 'ADDITIONAL INFORMATION' }}
      </div>
      <div class="h20" />
      <el-form-item :label="language==0?'个人照片':'photo'" prop="picUrl">
        <ImageUpload2
          v-model="form.picUrl"
          :crop-height="280"
          :crop-width="200"
          :is-show-tip="false"
          :limit="1"
          class="threeFour"
        />
      </el-form-item>
      
      <el-form-item :label="language==0?'有效证件':'Valid Passport'" required>
        <image-upload
          ref="uploadPassportRef"
          v-model="form.passportUrl"
          :action="'/common/getPersonInfoFromCert/6'"
          :button-text="language==0?'上传':'Upload'"
          :is-show-tip="false"
          :limit="1"
          param-name="pic"
          @response="ocrSuccess"
        />
        <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-form-item :label="language==0?'姓名':'Name'" required>
        <el-input v-model="form.certName" />
      </el-form-item>
      
      <el-form-item :label="language==0?'性别':'Gender'" required>
        <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 :label="language==0?'出生日期':'Date of Birth'" required>
        <el-date-picker
          v-model="form.birth"
          :disabled-date="disabledBirth" format="YYYY-MM-DD"
          style="width: 100%;" type="date" value-format="YYYY-MM-DD"
        />
      </el-form-item>
      
      <el-form-item :label="language==0?'证件号':'Passport number'" required>
        <el-input v-model="form.passportNumber" />
      </el-form-item>
    
    </el-form>
    <template #footer>
      <div class="dialog-footer text-center">
        <el-button class="btn-lineG w200px" round type="primary" @click="submitForm">
          {{ language == 0 ? '确定' : 'Save' }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { reactive, ref, toRefs, watch } from 'vue'
import { getCurrentInstance, nextTick } from '@vue/runtime-core'
import * as match from '@/apiPc/match'
import { ElMessage } from 'element-plus'
import { useStorage } from '@vueuse/core/index'
import ImageUpload from '@/components/ImageUpload/index.vue'
import ImageUpload2 from '@/components/ImageUpload/index2.vue'

const language = useStorage('language', 0)
const { proxy } = getCurrentInstance()
const emit = defineEmits(['submitForm'])
const data = reactive({
  form: {},
  card: '',
  show: false,
  showVcode: false,
  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: '添加选手信息',
  isMe: false,
  isCodeTrue: false,
  cptId: '',
  failVcode: '验证失败，请重试',
  successVcode: '验证通过！',
  sliderText: '拖动滑块完成拼图'
})
const {
  form, show, showVcode, title, isCodeTrue, card, cptId, uploadPassportRef
} = toRefs(data)

const groupId = ref('0')

const open = (params) => {
  show.value = true
  console.log(params)
  title.value = params.title
  cptId.value = params.cptId
  groupId.value = params.groupId
  form.value.id = params.id
  getFormById(params.id)
}


function getFormById(id) {
  match.getPersonInfoById(id).then(res => {
    form.value = res.data
    form.value.certName = res.data.realName
    form.value.passportNumber = res.data.idcCode
    // form.value.passportUrl =
  })
}

watch(show, (value) => {
  if (!value) {
    card.value = ''
    isCodeTrue.value = false
    form.value = {
      // sex: '0'
    }
  }
  nextTick(() => {
    proxy.$refs['dialogRef'].clearValidate()
  })
})
const ocrSuccess = (res) => {
  if (res.code == 200) {
    form.value.passportUrl = res.data.url
    form.value.passportNumber = res.data.code
    form.value.birth = res.data.birth?.slice(0, 10)
    form.value.sex = res.data.sex
    form.value.certName = res.data.name
  } else if (res.code == 500) {
    ElMessage.warning(res.msg)
    form.value.passportUrl = ''
  }
  
  if (res.data.msg) {
    return proxy.$modal.msgWarning(res.data.msg
    )
  }
}

function submitForm() {
  if (!form.value.passportNumber) {
    ElMessage.warning(language.value == 0 ? '请输入你的证件号' : 'Please fill in your passport number')
    return
  }
  if (!form.value.birth) {
    ElMessage.warning(language.value == 0 ? '请输入你的出生日期' : 'Please fill in your birthday')
    return
  }
  
  if (!form.value.sex) {
    ElMessage.warning(language.value == 0 ? '请选择性别' : 'Please select your gender')
    return
  }
  if (!form.value.certName) {
    ElMessage.warning(language.value == 0 ? '请输入姓名' : 'Please enter your name')
    return
  }
  if (!form.value.passportUrl || form.value.passportUrl == '' || form.value.passportUrl.length == 0) {
    ElMessage.warning(language.value == 0 ? '请上传有效证件' : 'Please upload valid identification documents')
    return
  }
  
  form.value.cptId = cptId.value
  if (Array.isArray(form.value.passportUrl)) {
    form.value.passportUrl = form.value.passportUrl[0].url
  }
  form.value.ocrFlag = '1'
  match.editOcr(form.value).then(res => {
    ElMessage.success(language.value == 0 ? '保存成功' : 'Successfully')
    show.value = false
    emit('submitForm')
  })
}

function cancel() {
  show.value = false
  showVcode.value = false
}

function disabledBirth(time) {
  return time.getTime() > new Date().getTime()
}

defineExpose({ open })

</script>

<style lang="scss">
.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;
}

.leftboderTT {
  color: var(--el-color-primary);
  font-size: 16px;
  font-weight: 600;
  
  span {
    color: #929AA0;
    font-size: 14px;
  }
}

.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;
  line-height: 1.6;
  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>