<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
  >
    <el-form ref="dialogRef" :model="form" :label-width="language==0?120:180" inline>
      <el-form-item :label="language==0?'WDSF卡号':'WDSF ID'" v-if="form.id">
        {{ form.wdsfMin }}
      </el-form-item>
      <el-form-item :label="language==0?'WDSF卡号':'WDSF ID'" 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>
        <Vcode :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="Representing">
        <el-input v-model="form.representing" disabled/>
      </el-form-item>
      <el-form-item label="Age group">
        <el-input v-model="form.ageGroup" disabled/>
      </el-form-item>
      <el-form-item label="Division">
        <el-input v-model="form.division" disabled/>
      </el-form-item>
      <el-form-item label="Status">
        <el-input v-model="form.wdsfStatus" disabled/>
      </el-form-item>
      <div class="h30"></div>
      <div class="leftboderTT">
        {{ language == 0 ? '补充信息' : 'Supplementary Information' }}
      </div>
      <div class="h20"></div>
      <el-form-item :label="language==0?'性别':'Sex'" required>
        <el-radio-group v-model="form.sex">
          <el-radio label="0">{{ language == 0 ? '女' : 'female' }}</el-radio>
          <el-radio label="1">{{ language == 0 ? '男' : 'male' }}</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item :label="language==0?'出生日期':'Birthday'" required>
        <el-date-picker
            v-model="form.birth"
            style="width: 100%;"
            type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item label="Passport number" required>
        <el-input v-model="form.passportNumber"/>
      </el-form-item>
      <el-form-item label="Passport File">
        <file-upload v-model="form.passportUrl" :limit="1" :is-show-tip="false" :button-text="'Upload'"/>
      </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 cache from "@/plugins/cache";
import Vcode from "vue3-puzzle-vcode"
import {checkWdsf} from "@/apiPc/match";
const language = ref(cache.local.get('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: 'Leader'},
    {value: '4', label: '队医', enlabel: 'Nurse'},
    {value: '5', label: '翻译', enlabel: 'Translator'},
    {value: '6', label: '官员', enlabel: 'Official'},
    {value: '3', label: '其他', enlabel: 'Other'}
  ],
  title: '添加选手信息',
  isMe: false,
  isCodeTrue: false,
  cptId:''
})
const {form, show,showVcode, title, labels, uType, isMe,isCodeTrue,card,cptId} = toRefs(data)

let editgay = false
const open = (params) => {
  console.log(params)
  show.value = true
  title.value = params.title
  isMe.value = params.isMe
  cptId.value = params.cptId
  if (language.value == 0) {
    form.value.countryId = 240
  }
  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 = true
      form.value = params.form
    }
  }
}
defineExpose({open})
watch(show, (value) => {
  if (!value) {
    form.value = {
      sex:'0'
    }
  }
  nextTick(() => {
    proxy.$refs['dialogRef'].clearValidate()
  })
})

function submitForm() {
  if (editgay) {
    // id不是0
    form.value.cptId = cptId.value
    if(Array.isArray(form.value.passportUrl)){
      form.value.passportUrl = form.value.passportUrl[0].url
    } else {
      form.value.passportUrl = form.value.passportUrl
    }
    match.editPersonInfo(form.value).then(res => {
      ElMessage.success('保存成功')
      show.value = false
      emit('submitForm')
    })
  } else {
    if (!form.value.passportNumber) {
      ElMessage.error('Please fill in your passport number')
      return
    }
    if (!form.value.birth) {
      ElMessage.error('Please fill in your birthday')
      return
    }
    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
      } else {
        form.value.passportUrl = form.value.passportUrl
      }
      match.savePersonForMyPerson(form.value).then(res => {
        ElMessage.success('保存成功')
        show.value = false
        emit('submitForm', res.data)
      })
    }
  }
}

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.error('请填写WDSF卡号')
    } else {
      ElMessage.error('Please fill in your WDSF code')
    }
    return
  }
  showVcode.value = true
}
function codeSuccess(msg) {
  console.log('验证通过' + msg);
  showVcode.value = false
  isCodeTrue.value = true
  checkWdsf({card: card.value}).then(res => {
    form.value = res.data
    form.value.xing = form.value.surname
    form.value.ming = form.value.name
    form.value.wdsfStatus = form.value.status
    if (!form.value.sex) {
      form.value.sex = '0'
    }
    if (form.value.wdsfFlag == '0') {
      isCodeTrue.value = false
      if (language.value == 0) {
        ElMessage.error('WDSF卡号错误')
      } else {
        ElMessage.error('WDSF ID is Error')
      }
    }
  })
}
</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;
  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>