<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
  >
    <div class="boxInvitation">

      <div v-if="showR" class="text-center pd20">
        <img class="mauto" src="@/assets/dance/ok.png"/>
        <!--     提交成功等待审核-->
        <h3 v-if="form.status">
          <span v-if="form.status==0">In Approval</span>
          <span v-if="form.status==1">Approved</span>
        </h3>
        <h4>
          Your invitation letter application has been received,<br/>
          and we will process it as soon as possible.
          <br/>
          Thank you so much for your kind patience.
        </h4>

        <div class="red">To check your application status, please go to Account > Personal > Visa Review Record, or
          refer to your email for any updates.
        </div>

      </div>

      <el-form v-else ref="iformRef" :model="form" :rules="rules" label-position="top">
        <el-form-item :label="language==0?'申请人类别':'Applicant Type'" prop="applicatType" required>
          <el-select v-model="form.applicatType" @change="changeApplicatType">
            <el-option label="MNA/Team" value="1"/>
            <el-option label="Technical Official" value="2"/>
            <el-option label="WT Team" value="3"/>
            <!--            <el-option label="Supplier" value="4"/>-->
            <el-option label="Other(not listed above)" value="5"/>
          </el-select>
          <el-input v-if="form.applicatType==5" v-model="form.remarks" class="mt10" placeholder="Please specify"/>
        </el-form-item>
        <el-form-item :label="language==0?'邀请函类别':'Invitation Type'" prop="invitationType" required>
          <el-select v-model="form.invitationType">
            <el-option :label="language==0?'一般邀请函':'General Invitation'" value="1"/>
            <el-option :label="language==0?'TE/PU(外办)邀请函':'TE/PU Invitation'" value="2"/>
          </el-select>
        </el-form-item>
        <el-form-item v-if="form.invitationType=='2'" label="Proof of Employment" prop="invitationFileArr" required>
          <div class="red">Proof of employment is required for TE/PU invitation letters.</div>
          <div class="red">
            This document must be issued by the invitee's association and must bear an official stamp or signature.
          </div>
          <br/>
          <file-upload v-model="form.invitationFileArr" :button-text="language==0?'上传':'Upload'" :is-show-tip="false"
                       :limit="1"></file-upload>
        </el-form-item>
<!--        <el-form-item :label="language==0?'是否需要中文邀请函':'Do you need a Chinese invitation？'" prop="chinese"-->
<!--                      required>-->
<!--          <el-radio-group v-model="form.chinese">-->
<!--            <el-radio value="1">{{ language == 0 ? '是' : 'Yes' }}</el-radio>-->
<!--            <el-radio value="0">{{ language == 0 ? '否' : 'No' }}</el-radio>-->
<!--          </el-radio-group>-->
<!--        </el-form-item>-->

        <!--        一般信息-->
        <el-form-item :label="language==0?'国家/地区协会名':'MNA/Team Name'" :required="form.applicatType==1"
                      prop="associationCode">
          <el-select v-model="form.associationCode" clearable filterable>
            <el-option v-for="item in mnaList" :key="item.code" :label="language==0?item.nameCn:item.nameEn"
                       :value="item.code"/>
          </el-select>
        </el-form-item>
        <el-form-item :label="language==0?'国家/地区协会地址':'MNA/Team Address'" :required="form.applicatType==1"
                      prop="associationAddress">
          <el-input v-model="form.associationAddress"/>
        </el-form-item>
        <el-form-item :label="language==0?'邮箱':'Contact Email'" prop="email" required>
          <div class="red">Note: Notifications from the organizing committee will be sent to this email address.
          </div>
          <el-input v-model="form.email" type="email">
            <template #append>
              <el-button v-loading="codeloading" class="codeBtn" @click="sendEmail">
                {{ language == 0 ? '发送验证码' : 'Send Code' }}
              </el-button>
            </template>
          </el-input>
          <!--          <div class="tip"></div>-->
        </el-form-item>
        <el-form-item prop="code" required>
          <el-input v-model="form.code" placeholder="Email verification code"/>
        </el-form-item>
        <el-form-item :label="language==0?'姓名':'Contact person Full Name'" prop="fullName" required>
          <el-input v-model="form.fullName"/>
        </el-form-item>
        <el-form-item :label="language==0?'联系人职位':'Contact person Position'" prop="position" required>
          <el-select v-model="form.position">
            <el-option label="Manager" value="0"/>
            <el-option label="Team leader" value="1"/>
            <el-option label="Coach" value="2"/>
            <el-option label="Other" value="3"/>
          </el-select>
          <el-input v-if="form.position==3" v-model="form.remarks1" class="mt10" placeholder="Please specify"/>
        </el-form-item>
        <el-form-item :label="language==0?'联系电话':'Contact person Phone Number'" prop="phone" required>
          <el-input v-model="form.phone"/>
        </el-form-item>
        <el-form-item :label="language==0?'签证办理中国大使馆':'Chinese Embassy Visas Office'" prop="embassy" required>
          <div class="red">Ex:EMBASSY OF THE PEOPLE'S REPUBLIC OFCHINA IN THE ISLAMIC REPUBLIC OF PAKISTAN
          </div>
          <el-input v-model="form.embassy"/>
        </el-form-item>
        <el-form-item :label="language==0?'中国大使馆邮箱':'Chinese Embassy Email'" prop="embassyEmail" required>
          <el-input v-model="form.embassyEmail"/>
        </el-form-item>

        <!--上传护照，多张-->
        <div class="cptVisaInfoBosTable">
          <el-form-item :label="language==0?'有效证件':'Passport Copy'" required>
            <div class="wrap-item">
              <!-- <el-text type="success">Please ensure that the uploaded passport image is clear, complete, and free from
                glare or reflections.
              </el-text> -->
              <div class="red">Please ensure that the uploaded passport image is clear, complete, and free from
                glare or reflections.
              </div>
              <div class="red">You may upload multiple passports at once to appy for multiple applicants.
              </div>
              <div class="red">Please review the extracted passport information carefully.
              </div>
              <div class="red">If you notice any errors, you can edit the fields manually before submission.
              </div>
              <ImageUpload v-model="form.passportCopy" :action="'/league/visa/getPersonInfoFromCert/3' "
                           :button-text="language==0?'上传':'Upload'"
                           :is-show-tip="false"
                           :limit="20" :show-file-list="false" list-type="text"
                           paramName="pic" @response="getPassportInfo"
              />
            </div>
          </el-form-item>
          <!--识别信息-->
          <div v-if="form.cptVisaInfoBos?.length>0" class="border">
            <el-table :data="form.cptVisaInfoBos" border size="small">
              <el-table-column :label="language==0?'护照':'Passport Copy'" min-width="100" prop="passportCopy">
                <template #header>
                  <div class="esp">
                    <span class="red">*</span>Passport Copy
                  </div>
                </template>
                <template #default="scope">
                  <el-image :preview-src-list="[fillImgUrl(scope.row.passportCopy)]"
                            :src="fillImgUrl(scope.row.passportCopy)"
                            preview-teleported style="width: 60px;z-index: 999;"/>
                </template>
              </el-table-column>
              <el-table-column :label="'position'" min-width="100" prop="position">
                <template #header>
                  <div class="esp">
                    <span class="red">*</span>Position
                  </div>
                </template>
                <template #default="scope">
                  <el-select v-model="scope.row.position" size="small">
                    <!--MNA/Team-->
                    <template v-if="form.applicatType=='1'">
                      <el-option label="Head Of Team" value="Head Of Team"/>
                      <el-option label="Head Coach" value="Head Coach"/>
                      <el-option label="Manager" value="Manager"/>
                      <el-option label="Coach" value="Coach"/>
                      <el-option label="Trainer" value="Trainer"/>
                      <el-option label="Team Doctor" value="Team Doctor"/>
                      <el-option label="Team Physiotherepaist" value="Team Physiotherepaist"/>
                      <el-option label="Competitor" value="Competitor"/>
                      <el-option label="MNA Official" value="MNA Official"/>
                      <el-option label="MNA Guest" value="MNA Guest"/>
                    </template>
                    <!--Technical Official-->
                    <template v-if="form.applicatType=='2'">
                      <el-option label="International Referee" value="International Referee"/>
                      <el-option label="Technical Delegate" value="Technical Delegate"/>
                      <el-option label="CSB member" value="CSB member"/>
                    </template>
                    <!--WT Team-->
                    <template v-if="form.applicatType=='3'">
                      <el-option label="WT Director" value="WT Director"/>
                      <el-option label="WT Manager" value="WT Manager"/>
                      <el-option label="WT Assistant Manager" value="WT Assistant Manager"/>
                      <el-option label="WT Coordinator" value="WT Coordinator"/>
                    </template>
                    <el-option label="Other (please specify)" value="other"/>
                  </el-select>
                  <el-input v-if="scope.row.position=='other'" v-model="scope.row.remarks" placeholder="Please specify"
                            size="small"></el-input>
                </template>
              </el-table-column>
              <el-table-column :label="'lastName'" min-width="100" prop="lastName">
                <template #header>
                  <div class="esp">
                    <span class="red">*</span>LastName
                  </div>
                </template>
                <template #default="scope">
                  <el-input v-model="scope.row.lastName" size="small"/>
                </template>
              </el-table-column>
              <el-table-column :label="'firstName'" min-width="100" prop="fristName">
                <template #header>
                  <div class="esp">
                    <span class="red">*</span>firstName
                  </div>
                </template>
                <template #default="scope">
                  <el-input v-model="scope.row.fristName" size="small"/>
                </template>
              </el-table-column>
              <el-table-column :label="language==0?'性别':'Gender'" prop="sex" width="70">
                <template #header>
                  <div class="esp">
                    <span class="red">*</span>Gender
                  </div>
                </template>
                <template #default="scope">
                  <el-select v-model="scope.row.sex" size="small">
                    <el-option label="M" value="0"/>
                    <el-option label="F" value="1"/>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column :label="language==0?'国籍':'Nationality'" prop="nationality" width="110px">
                <template #header>
                  <div class="esp">
                    <span class="red">*</span>Nationality
                  </div>
                </template>
                <template #default="scope">
                  <el-select v-model="scope.row.nationality" filterable size="small">
                    <el-option v-for="item in countrys" :key="item.id" :label="item.noc"
                               :value="item.id"/>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column :label="language==0?'出生日期':'Birth'" prop="birth" width="130px">
                <template #header>
                  <div class="esp">
                    <span class="red">*</span>Birth
                  </div>
                </template>
                <template #default="scope">
                  <el-date-picker v-model="scope.row.birthday"
                                  format="YYYY-MM-DD"
                                  placeholder="YYYY-MM-DD" size="small"
                                  style="width: 100%;" type="date" value-format="YYYY-MM-DD"
                  />
                </template>
              </el-table-column>
              <el-table-column :label="language==0?'护照号':'Passport No.'" prop="passportNo" width="110px">
                <template #header>
                  <div class="esp">
                    <span class="red">*</span>Passport No.
                  </div>
                </template>
                <template #default="scope">
                  <el-input v-model="scope.row.passportNo" size="small"/>
                </template>
              </el-table-column>
              <el-table-column :label="language==0?'护照签发日':'DATE OF ISSUE'" prop="expiryDate" width="130px">
                <template #header>
                  <div class="esp">
                    <span class="red">*</span>DATE OF ISSUE
                  </div>
                </template>
                <template #default="scope">
                  <el-date-picker
                      v-model="scope.row.issueDate" format="YYYY-MM-DD"
                      placeholder="YYYY-MM-DD" size="small"
                      style="width: 100%;" type="date" value-format="YYYY-MM-DD"
                  />
                </template>
              </el-table-column>
              <el-table-column :label="language==0?'护照过期日':'DATE OF EXPIRY'" prop="arrival" width="130px">
                <template #header>
                  <div class="esp">
                    <span class="red">*</span>DATE OF EXPIRY
                  </div>
                </template>
                <template #default="scope">
                  <el-date-picker
                      v-model="scope.row.expiryDate" format="YYYY-MM-DD"
                      placeholder="YYYY-MM-DD" size="small"
                      style="width: 100%;" type="date" value-format="YYYY-MM-DD"
                  />
                </template>
              </el-table-column>
              <el-table-column fixed="right" label="Actions">
                <template #default="scope">
                  <el-button icon="delete" size="small" type="danger" @click="delPassportInfo(scope.$index)"/>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <el-form-item :label="language==0?'备注':'Remarks'" prop="remarks3">
          <div class="red">
            You may leave any message here, or let us know if you require additional documents for your visa application.
          </div>
          <el-input v-model="form.remarks3"/>
        </el-form-item>
        <!--        补充材料-->
        <el-form-item :label="language==0?'补充材料':'Additional Documents'" prop="files">
          <file-upload v-model="form.files" :button-text="language==0?'上传':'Upload'" :is-show-tip="false"
                       :limit="1"/>
        </el-form-item>


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

</template>

<script setup>
import {useStorage} from "@vueuse/core/index";
import {getCurrentInstance, ref} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import {
  addInvitation,
  associationList,
  countryList,
  getInvitation,
  getVisaInfo,
  getVisaInfoList,
  sendVisaCode
} from "@/apiPc/match";
import ImageUpload from '@/components/ImageUpload/index.vue'
import useUserStore from "@/store/modules/user";
import _ from 'lodash'
import FileUpload from "@/components/FileUpload";

const emit = defineEmits(['refresh'])
const user = useUserStore().user
const {proxy} = getCurrentInstance()
const language = useStorage('language', 0)
const form = ref({
  gender: '0',
  chinese:'0',
  cptVisaInfoBos: [],
  email: user?.email,
})
const show = ref(false)
const codeloading = ref(false)
const showR = ref(false)
const title = ref('')
const countrys = ref([])
const mnaList = 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) => {
  show.value = true
  title.value = params.title
  cptId.value = params.cptId
  if (!cptId.value) {
    proxy.$modal.msgError('参数有误');
  }
  form.value = {
    gender: '0',
    chinese:'0',
    cptVisaInfoBos: [],
    email: user?.email,
    userId: user?.userId,
    cptId: params.cptId
  }
  getCountryList()
  getMNAList()
  // getVisa()
}
defineExpose({
  open,
  reOpen: (id) => {
    show.value = true
    showR.value = false
    title.value = language.value == 0 ? '邀请函申请' : 'Visa Invitation Letter '

    getCountryList()
    getMNAList()
    getInvitation(id).then((res => {
      form.value = res.data
      cptId.value = res.data.cptId
      delete form.value.id
    })).then(() => {
      getVisaInfoList(id).then(res => {
        _.each(res.data, (item) => {
          delete item.id
        })

        if (form.value.invitationFile) {
          form.value.invitationFileArr = JSON.parse(form.value.invitationFile)
        }

        form.value.cptVisaInfoBos = res.data
      })
    })
  }
})

function getVisa() {
  getVisaInfo({
    userId: user.userId,
    cptId: cptId.value
  }).then(res => {
    if (res.data && res.data.status != 2) {
      showR.value = true
      form.value = res.data
    } else {
      showR.value = false
    }
  })
}

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

function getMNAList() {
  associationList().then(res => {
    mnaList.value = res.data
  })
}

const submit = () => {
  console.log(form.value)
  if (form.value.email?.indexOf('@') == -1) {
    ElMessage.warning(language.value == 0 ? '请填写正确的邮箱' : 'Invalid Emaill Address！')
    return
  }
  if (form.value.applicatType == 5 && !form.value.remarks) {
    ElMessage.warning('Please specify Applicant Type')
    return
  }
  if (form.value.position == 3 && !form.value.remarks1) {
    ElMessage.warning('Please specify position')
    return
  }
  for (let row of form.value.cptVisaInfoBos) {
    if (!row.position) {
      ElMessage.warning(`Please specify ${row.fristName}'s position`)
      return
    }
    if (row.position == 'other' && !row.remarks) {
      ElMessage.warning(`Please specify ${row.fristName}'s position`)
      return;
    }
  }

  if (form.value.files && Array.isArray(form.value.files)) {
    form.value.files = form.value.files[0]?.url
  }
  if (form.value.invitationFileArr) {
    form.value.invitationFile = JSON.stringify(form.value.invitationFileArr)
  }

  proxy.$refs.iformRef.validate(valid => {
    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
        addInvitation(form.value).then((res) => {
          if (res.data == -200) {
            ElMessage.error(language.value == 0 ? '邮箱验证码不正确' : 'Invalid email verification code')
          } else {
            ElMessage.success(language.value == 0 ? '提交成功' : 'Successfully!')
            showR.value = true
            emit('refresh')
          }
        })
      })
    }
  })
}

const getPassportInfo = (res) => {
  if (res.code == 200) {
    let obj = {
      position: '',
      lastName: res.data.surname,
      fristName: res.data.givenName,
      sex: res.data.sex,
      birthday: res.data.birth?.slice(0, 10),
      nationality: res.data.nationality,
      passportNo: res.data.code,
      issueDate: res.data.issueDate?.slice(0, 10),
      expiryDate: res.data.validToDate?.slice(0, 10),
      passportCopy: res.data.pic
    }
    form.value.cptVisaInfoBos.push(obj)
  } else {
    if (res.data) {
      ElMessage.error(res.data.code)

      let obj = {
        position: '',
        lastName: '',
        fristName: '',
        sex: '',
        birthday: '',
        nationality: '',
        passportNo: '',
        issueDate: '',
        expiryDate: '',
        passportCopy: res.data.pic
      }
      form.value.cptVisaInfoBos.push(obj)
    } else {
      ElMessage.error(res.msg)
    }
  }
}

function delPassportInfo(index) {
  form.value.cptVisaInfoBos.splice(index, 1)
}

function sendEmail() {
  if (!form.value.email) {
    ElMessage.error(language.value == 0 ? '请输入邮箱' : 'Please enter contact Email')
    return
  }
  if (!/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(form.value.email)) {
    ElMessage.error(language.value == 0 ? '请输入正确的邮箱' : 'Please enter the correct contact email')
    return
  }
  codeloading.value = true
  sendVisaCode({email: form.value.email}).then(res => {
    codeloading.value = false
    if (res.code == 200) {
      ElMessage.success(language.value == 0 ? '发送成功,请前往邮箱查看' : 'Send success, please check your email')
    } else {
      ElMessage.error(res.msg)
    }
  })
}

function changeApplicatType() {
  _.each(form.value.cptVisaInfoBos || [], (item) => {
    item.position = ''
  })
}

</script>

<style lang="scss" scoped>
.red {
  color: red !important;
}

:deep(.el-upload--picture-card) {
  --el-upload-picture-card-size: 60px;
}

.tip {
  font-size: 12px;
}

.boxInvitation {
  width: 96%;
  margin: 20px auto 0;
}

h4 {
  font-size: 15px;
  line-height: 1.6;
}

.cptVisaInfoBosTable {
  padding: 10px;
  margin-bottom: 20px;
  border: 1px dashed #ebeef5;

  :deep(.el-table .el-table__header-wrapper th) {
    font-size: 12px;
  }
}

.wrap-item {
  flex-wrap: wrap;
  display: block;
}

.codeBtn {
  background-color: #0540EC !important;
  color: #fff !important;

}
</style>