<template>
  <el-dialog
      v-model="show" :title="title" width="800px" append-to-body close-icon="CircleClose" center
      :close-on-click-modal="false" class="pcloginpop" @close="cancel"
      destroy-on-close
  >
    <!--    wdsf 个人/舞伴/国际赛运动员-->
    <div class="pd10"></div>
    <el-form ref="dialogRef" :model="form" :label-width="language==0?120:180" inline>
      <el-form-item :label="language==0?'WDSF卡号':'WDSF MIN'" v-if="form.id&&form.id!='0'">
        {{ form.wdsfMin }}
      </el-form-item>
      <el-form-item :label="language==0?'WDSF卡号':'WDSF MIN'" required v-else>
        <el-input type="text" 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>

        <Vcode :successText="successVcode" :failText="failVcode" :slider-text="sliderText" :show="showVcode"
               :z-index="2999" @success="codeSuccess()"></Vcode>
      </el-form-item>
      <div class="h30"></div>
      <div class="leftboderTT">{{ language == 0 ? '个人信息' : 'Personal information' }}
        <span v-if="language==0">(登录时需要验证，保护账户信息)</span>
        <span v-else>(Obtain automatically according to the WDSF number)</span>
      </div>
      <div class="h20"></div>
      <el-form-item :label="language==0?'名':'Name'">
        <el-input v-model="form.ming" disabled/>
      </el-form-item>
      <el-form-item :label="language==0?'姓氏':'Surname'">
        <el-input v-model="form.xing" disabled/>
      </el-form-item>
      <el-form-item :label="language==0?'代表':'Representing'">
        <el-input v-model="form.representing" disabled/>
      </el-form-item>
      <el-form-item :label="language==1?'Age group':'年龄组'">
        <el-input v-model="form.ageGroup" disabled/>
      </el-form-item>
      <el-form-item :label="language==0?'舞种':'Division'">
        <el-input v-model="form.division" disabled/>
      </el-form-item>
      <el-form-item :label="language==0?'状态':'Status'">
        <el-input v-model="form.wdsfStatus" disabled/>
      </el-form-item>
      <div class="h30"></div>
      <div class="leftboderTT">
        {{ language == 0 ? '补充信息' : 'ADDITIONAL INFORMATION' }}
      </div>
      <div class="h20"></div>
      <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?'有效证件':'Valid Passport'" required>
        <image-upload ref="uploadPassportRef" v-model="form.passportUrl" :limit="1" :is-show-tip="false"
                      :action="'/common/getPersonInfoFromCert/3'"
                      paramName="pic"
                      :button-text="language==0?'上传':'Upload'"
                      @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?'性别':'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"
            style="width: 100%;" :disabled-date="disabledBirth"
            type="date" format="YYYY-MM-DD" 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 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 Vcode from "vue3-puzzle-vcode"
import {checkWdsf, checkWdsfAthletes} from "@/apiPc/match";
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 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'
  },
  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, labels, uType, isMe, isCodeTrue, card, cptId,
  failVcode, successVcode, sliderText,uploadPassportRef
} = toRefs(data)

let editgay = false
let groupId = '0'
const open = (params) => {
  console.log(params)
  show.value = true
  title.value = params.title
  isMe.value = params.isMe || false
  cptId.value = params.cptId
  groupId = params.groupId
  form.value.id = params.id
  if (language.value == 0) {
    form.value.countryId = 240
  }
  if (language.value == 1) {
    failVcode.value = 'Error!'
    successVcode.value = 'Success!'
    sliderText.value = 'Drag the slider to complete the puzzle'
  }
  if (isMe.value) {
    //个人
    getMyInfo()
  } else {
    if (params.id == 0) {
      //新增
      editgay = false
    } else {// 编辑舞伴
      editgay = true
      if (params.form) {
        form.value = params.form
      } else {
        getFormById(params.id)
      }
    }
  }
}
defineExpose({open})

function getMyInfo() {
  match.getMyPersonInfo().then(res => {
    form.value = res.data
  })
}

function getFormById(id) {
  match.getPersonInfoById(id).then(res => {
    form.value = res.data
  })
}

watch(show, (value) => {
  if (!value) {
    card.value = ''
    isCodeTrue.value = false
    form.value = {
      // sex: '0'
    }
  }
  nextTick(() => {
    proxy.$refs['dialogRef'].clearValidate()
  })
})
const ocrSuccess = (res) => {
  // form.value.passportUrl = res.data.url
  console.log(form.value.passportUrl)
  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
  } else if(res.code==500){
    ElMessage.warning(res.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.picUrl) {
  //   ElMessage.warning('Please upload your photo')
  //   return
  // }
  if (!form.value.sex) {
    ElMessage.warning(language.value == 0 ? '请选择性别' : 'Please select your gender')
    return
  }
  if (!form.value.passportUrl || form.value.passportUrl == '' || form.value.passportUrl.length == 0) {
    ElMessage.warning(language.value == 0 ? '请上传证件' : 'Please upload  passport file')
    return
  }
  if (editgay) {
    // id不是0
    form.value.cptId = cptId.value
    if (Array.isArray(form.value.passportUrl)) {
      form.value.passportUrl = form.value.passportUrl[0].url
    }
    match.editPersonInfo(form.value).then(res => {
      ElMessage.success(language.value == 0 ? '保存成功' : 'Successfully')
      show.value = false
      emit('submitForm')
    })
  } else {
    if (Array.isArray(form.value.passportUrl)) {
      form.value.passportUrl = form.value.passportUrl[0].url
    }
    if (isMe.value) {
      match.saveMyBaseInfo(form.value).then(res => {
        ElMessage.success('保存成功')
        show.value = false
        emit('submitForm')
      })
    } else {
      delete form.value.status
      delete form.value.id
      form.value.label = '0'
      form.value.cptId = cptId.value
      form.value.wdsfMin = form.value.min
      form.value.idcCode = form.value.passportNumber
      form.value.idcType = '1'
      if (Array.isArray(form.value.passportUrl)) {
        form.value.passportUrl = form.value.passportUrl[0].url
      }
      if (groupId == '0' || !groupId) {
        addPersonal()
      } else {
        if (groupId) {
          addGroupMember()
        }
      }
    }
  }
}

function addPersonal() {
  match.savePersonForMyPerson2(form.value).then(res => {
    ElMessage.success('保存成功')
    show.value = false
    emit('submitForm', res.data)
  })
}

function addGroupMember() {
  form.value.groupId = groupId
  match.savePersonForMyGroup(form.value).then(res => {
    ElMessage.success(language.value == 0 ? '保存成功' : 'Save successful')
    show.value = false
    emit('submitForm')
  })

}

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

function resetCode() {
  isCodeTrue.value = false
}

function checkCard() {
  if (isCodeTrue.value) {
    return
  }
  if (!card.value) {
    if (language.value == 0) {
      ElMessage.warning('请填写WDSF卡号')
    } else {
      ElMessage.warning('Please fill in your WDSF code')
    }
    return
  }
  showVcode.value = true
}

function codeSuccess(msg) {
  console.log('验证通过' + msg);
  showVcode.value = false
  isCodeTrue.value = true
  checkWdsfAthletes({card: card.value, groupId: groupId}).then(res => {
    if (res.data.wdsfFlag == -1) {
      ElMessage.warning(language.value == 0 ? '您添加的运动员代表国家/地区，与团体账号注册的国家/地区不符，无法添加' : 'The athlete \'s representing, does not match the group account‘s country/region and cannot be added.')
      isCodeTrue.value = false
      return
    }

    form.value = res.data
    form.value.xing = form.value.surname
    form.value.ming = form.value.name
    form.value.wdsfStatus = res.data.status
    if (form.value.sex) {
      form.value.sex = res.data.sex
    }
    if (form.value.wdsfFlag == '0') {
      isCodeTrue.value = false
      if (language.value == 0) {
        ElMessage.warning('WDSF卡号错误')
      } else {
        ElMessage.warning('WDSF MIN is Error')
      }
    }
  })
}

function disabledBirth(time) {
  return time.getTime() > new Date().getTime()
}
</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>