<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 ID'" v-if="form.id&&form.id!='0'">
        {{ 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="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 ? '补充信息' : 'Supplementary 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?'性别':'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?'出生日期':'Birthday'">
        <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="language==0?'有效证件':'Valid Certificates Scanning Copy'" 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 passport copy for authentication</span>
        </div>

      </el-form-item>
      <el-form-item :label="language==0?'证件号':'Passport number'">
        <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} from "@/apiPc/match";
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'
  },
  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
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 (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()
  })
})

function submitForm() {
  // if (!form.value.passportNumber) {
  //   ElMessage.warning('Please fill in your passport number')
  //   return
  // }
  // if (!form.value.picUrl) {
  //   ElMessage.warning('Please upload your photo')
  //   return
  // }
  if (!form.value.passportUrl||form.value.passportUrl==''||form.value.passportUrl.length==0) {
    ElMessage.warning('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 (!form.value.birth) {
    //   ElMessage.warning('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
      }
      if(groupId=='0'){
        match.savePersonForMyPerson(form.value).then(res => {
          ElMessage.success('保存成功')
          show.value = false
          emit('submitForm', res.data)
        })
      } else {
        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
  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.warning('WDSF卡号错误')
      } else {
        ElMessage.warning('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>