<template>
  <el-dialog
      v-model="show" :title="title" width="600px" append-to-body close-icon="CircleClose" center
      :close-on-click-modal="false" class="pcloginpop"
      destroy-on-close
  >
    <div class="boxInvitation pd20">

      <div class="text-center pd20" v-if="showR">
        <img class="mauto" src="@/assets/dance/ok.png"/>
<!--        <h2 class="text-center">{{ language == 0 ? '申请已提交' : 'Submitted successfully' }}</h2>-->
        <h4 class="text-center" v-if="language == 0">
          我们已收到您的邀请函申请，并将尽快处理。请耐心等待。
        </h4>
        <h4 v-else>
          Your invitation letter application has been received,<br/>
          and we will process it as soon as possible.
          <br/>
          Please be patient while waiting.
        </h4>
        <el-button size="large" type="primary" @click="conti" round class="btn-lineG">
          {{ language == 0 ? '继续提交' : 'Continue To Submit' }}
        </el-button>
      </div>

      <el-form :model="form" :rules="rules" ref="iformRef" label-position="top"  v-else>
        <el-form-item :label="language==0?'申请人类别':'Applicant Type'">
          <el-select v-model="form.type">
            <el-option label="MNA" value="1"/>
            <el-option label="Technical Officials" value="2"/>
            <el-option label="WT Staff" value="3"/>
            <el-option label="Supplier" value="4"/>
            <el-option label="Other" value="5"/>
          </el-select>
          <el-input v-if="form.type==5"/>
        </el-form-item>
        <el-form-item :label="language==0?'邀请函类别':'Application Type'" required prop="type">
          <el-select v-model="form.type">
            <el-option label="一般邀请函" value="1"/>
            <el-option label="TE/PU(外办)邀请函" value="2"/>
          </el-select>
        </el-form-item>
        <el-form-item :label="language==0?'是否需要中文邀请函':'Chinese Invitation'">
          <el-radio-group>
            <el-radio :label="1">{{ language==0?'是':'Yes' }}</el-radio>
            <el-radio :label="0">{{ language==0?'否':'No' }}</el-radio>
          </el-radio-group>
        </el-form-item>

<!--        一般信息-->
        <el-form-item :label="language==0?'国家/地区协会名':'MNA/Team Name'" required prop="teamName">
          <el-input v-model="form.teamName"/>
        </el-form-item>
        <el-form-item :label="language==0?'国家/地区协会地址':'MNA/Team Address'" required prop="teamName">
          <el-input v-model="form.teamName"/>
        </el-form-item>
        <el-form-item :label="language==0?'邮箱':'Email'" required prop="email">
          <el-input v-model="form.email" type="email"/>
          <div class="tip"></div>
        </el-form-item>
        <el-form-item :label="language==0?'姓名':'Full Name'" required prop="name">
          <el-input v-model="form.name"/>
        </el-form-item>
        <el-form-item :label="language==0?'联系人职位':'Position'" required prop="position">
          <el-select v-model="form.position">
            <el-option label="经理" value="1"/>
            <el-option label="领队" value="2"/>
            <el-option label="教练" value="3"/>
            <el-option label="其他" value="4"/>
          </el-select>
        </el-form-item>
        <el-form-item :label="language==0?'联系电话':'Mobile'" required prop="mobile">
          <el-input v-model="form.mobile"/>
        </el-form-item>
<!--       签证办理中国大使馆 -->
<!--       中国大使馆邮箱 -->

<!--上传护照，多张-->
        <el-form-item :label="language==0?'有效证件':'Passport Copy'" required prop="passportCopy">
          <image-upload v-model="form.passportCopy" :limit="1" :is-show-tip="false"
                        :action="'/league/visa/getPersonInfoFromCert/3'"
                        :button-text="language==0?'上传':'Upload'"/>
        </el-form-item>
<!--识别信息-->
        <div>
          <el-form-item :label="language==0?'性别':'Gender'" required prop="gender">
            <el-radio-group v-model="form.gender">
              <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?'国籍':'Nationality'" required prop="nationality">
            <el-select filterable v-model="form.nationality" style="width: 100%;">
              <el-option v-for="item in countrys" :key="item.id" :label="language==0?item.name:item.enName"
                         :value="item.id"/>
            </el-select>
          </el-form-item>
          <el-form-item :label="language==0?'出生日期':'Date of Birth'" required prop="birth">
            <el-date-picker
                v-model="form.birth"
                style="width: 100%;" placeholder="YYYY-MM-DD"
                type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
            />
          </el-form-item>

          <el-form-item :label="language==0?'护照号':'Passport No.'" required prop="passportNo">
            <el-input v-model="form.passportNo"/>
          </el-form-item>
          <el-form-item :label="language==0?'护照签发日':'Date of Arrival'" required prop="arrival">
            <el-date-picker
                v-model="form.arrival" placeholder="YYYY-MM-DD"
                style="width: 100%;"
                type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
            />
          </el-form-item>
          <el-form-item :label="language==0?'护照过期日':'Date of Departure'" required prop="departure">
            <el-date-picker
                v-model="form.departure"
                style="width: 100%;" placeholder="YYYY-MM-DD"
                type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
            />
          </el-form-item>
        </div>
<!--        补充材料-->
        <el-form-item :label="language==0?'补充材料':'Additional Documents'" required prop="additionalDocuments">
          <file-upload v-model="form.additionalDocuments" :limit="1" :is-show-tip="false"
                        :button-text="language==0?'上传':'Upload'"/>
        </el-form-item>



        <div class="text-center">
          <el-button type="primary" size="large" @click="submit" round class="btn-lineG">
            {{ language == 0 ? '提交' : 'SUBMIT' }}
          </el-button>
        </div>
      </el-form>
    </div>
  </el-dialog>

</template>

<script setup>
import {useStorage} from "@vueuse/core/index";
import {getCurrentInstance, watch} from "vue";
import {nextTick} from "@vue/runtime-core";
import {ElMessage, ElMessageBox} from "element-plus";
import {addInvitation, countryList} from "@/apiPc/match";
import ImageUpload from "@/components/ImageUpload";

const {proxy} = getCurrentInstance()
const language = useStorage('language', 0)
const form = ref({
  gender:'0'
})
const show = ref(false)
const showR = ref(false)
const title = ref('')
const countrys = ref([])
const cptId = ref('')
const rules = ref(
    {
      nationality: [{required: true, trigger: 'change', message: language.value == 0 ? '请选择' : 'Please choose'},],
      name: [{required: true, trigger: 'blur', message: language.value == 0 ? '请输入' : 'Please enter'},],
      email: [{required: true, trigger: 'blur', message: language.value == 0 ? '请输入' : 'Please enter'},],
      birth: [{required: true, trigger: 'change', message: language.value == 0 ? '请选择' : 'Please choose'},],
      passportNo: [{required: true, trigger: 'blur', message: language.value == 0 ? '请输入' : 'Please enter'},],
      passportCopy: [{required: true, trigger: 'blur', message: language.value == 0 ? '请上传' : 'Please Upload'},],
      arrival: [{required: true, trigger: 'change', message: language.value == 0 ? '请选择' : 'Please choose'},],
      departure: [{required: true, trigger: 'change', message: language.value == 0 ? '请选择' : 'Please choose'},],
    })
const open = (params) => {
  console.log(params)
  show.value = true
  title.value = params.title
  cptId.value = params.cptId
}
defineExpose({open})
watch(show, (value) => {
  if (!value) {
    form.value = {
      sex: '0'
    }
    if (language.value == 0) {
      form.value.countryId = 240
    }
  }
  nextTick(() => {
    // proxy.$refs['dialogRef'].clearValidate()
  })
})
getCountryList()

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

const submit = () => {
  proxy.$refs.iformRef.validate(valid => {
    if (form.value.email.indexOf('@') == -1) {
      if (language.value == 0) {
        ElMessage.warning('请填写正确的邮箱')
      } else {
        ElMessage.warning('Please fill in the correct email')
      }
      return
    }
    if (valid) {
      ElMessageBox.confirm(
          language.value == 0 ? '请确认信息正确并提交吗？' : 'Please confirm that the information is correct and submit it',
          language.value == 0 ? '提示' : 'Tips', {
            confirmButtonText: language.value == 0 ? '确定' : 'Confirm',
            cancelButtonText: language.value == 0 ? '取消' : 'Cancel',
            type: 'warning'
          }).then(() => {
        form.value.cptId = cptId.value
        if (Array.isArray(form.value.passportCopy)) {
          form.value.passportCopy = form.value.passportCopy[0].url
        }
        addInvitation(form.value).then((res) => {
          ElMessage.success(language.value == 0 ?'提交成功':'Successfully!')
          showR.value = true
        })
      })
    }
  })
}
const conti = () => {
  showR.value = false
  form.value = {
    gender: '0'
  }
}
</script>

<style scoped lang="scss">
.tip{font-size: 12px;}
.boxInvitation {
  width: 90%;
  margin: auto
}
h4{font-size: 15px;line-height: 1.6;}
</style>