<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">

      <div class="text-center pd20" v-if="showR">
        <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/>
          Please be patient while waiting.
        </h4>
      </div>

      <el-form :model="form" :rules="rules" ref="iformRef" label-position="top" v-else>
        <el-form-item :label="language==0?'申请人类别':'Applicant Type'" required prop="applicatType">
          <el-select v-model="form.applicatType">
            <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.applicatType==5" placeholder="Please specify" v-model="form.remarks"/>
        </el-form-item>
        <el-form-item :label="language==0?'邀请函类别':'Application Type'" required prop="invitationType">
          <el-select v-model="form.invitationType">
            <el-option :label="language==0?'一般邀请函':'General Invitation'" value="1"/>
            <el-option :label="language==0?'TE/PU(外办)邀请函':'TE/PU(Foreign) Invitation'" value="2"/>
          </el-select>
        </el-form-item>
        <el-form-item :label="language==0?'是否需要中文邀请函':'Chinese Invitation'" required prop="chinese">
          <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!=2"
                      prop="associationCode">
          <el-select v-model="form.associationCode" 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!=2"
                      prop="associationAddress">
          <el-input v-model="form.associationAddress"/>
        </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="fullName">
          <el-input v-model="form.fullName"/>
        </el-form-item>
        <el-form-item :label="language==0?'联系人职位':'Position'" required prop="position">
          <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-form-item>
        <el-form-item :label="language==0?'联系电话':'Phone'" required prop="phone">
          <el-input v-model="form.phone"/>
        </el-form-item>
        <el-form-item :label="language==0?'签证办理中国大使馆':'Chinese Embassy Visas Office'" required prop="embassy">
          <el-input v-model="form.embassy"/>
        </el-form-item>
        <el-form-item :label="language==0?'中国大使馆邮箱':'Chinese Embassy Email'" required prop="embassyEmail">
          <el-input v-model="form.embassyEmail"/>
        </el-form-item>

        <!--上传护照，多张-->
        <div class="cptVisaInfoBosTable">
          <el-form-item :label="language==0?'有效证件':'Passport Copy'" required>
            <ImageUpload v-model="form.passportCopy" :is-show-tip="false"
                         :action="'/league/visa/getPersonInfoFromCert/3'"
                         paramName="pic" list-type="text" :show-file-list="false"
                         :button-text="language==0?'上传':'Upload'" @response="getPassportInfo"
            />
          </el-form-item>
          <!--识别信息-->
          <div v-if="form.cptVisaInfoBos?.length>0" class="border">
            <el-table :data="form.cptVisaInfoBos" border size="small">
              <el-table-column prop="passportCopy" :label="language==0?'护照':'Passport Copy'" min-width="100">
                <template #default="scope">
                  <el-image style="width: 60px"
                            :src="fillImgUrl(scope.row.passportCopy)"/>
                </template>
              </el-table-column>
              <el-table-column prop="position" :label="'position'" min-width="100">
                <template #default="scope">
                  <el-input v-model="scope.row.position" size="small"/>
                </template>
              </el-table-column>
              <el-table-column prop="lastName" :label="'lastName'" min-width="100">
                <template #default="scope">
                  <el-input v-model="scope.row.lastName" size="small"/>
                </template>
              </el-table-column>
              <el-table-column prop="fristName" :label="'firstName'" min-width="100">
                <template #default="scope">
                  <el-input v-model="scope.row.fristName" size="small"/>
                </template>
              </el-table-column>
              <el-table-column prop="sex" :label="language==0?'性别':'Gender'" width="100">
                <template #default="scope">
                  <el-select v-model="scope.row.sex" size="small">
                    <el-option label="male" value="0"/>
                    <el-option label="female" value="1"/>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column prop="nationality" :label="language==0?'国籍':'Nationality'" width="110px">
                <template #default="scope">
                  <el-select v-model="scope.row.nationality" size="small" filterable>
                    <el-option v-for="item in countrys" :key="item.id" :label="language==0?item.name:item.enName"
                               :value="item.id"/>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column prop="birth" :label="language==0?'出生日期':'Birth'" width="130px">
                <template #default="scope">
                  <el-date-picker size="small"
                                  v-model="scope.row.birthday"
                                  style="width: 100%;" placeholder="YYYY-MM-DD"
                                  type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                  />
                </template>
              </el-table-column>
              <el-table-column prop="passportNo" :label="language==0?'护照号':'Passport No.'" width="110px">
                <template #default="scope">
                  <el-input v-model="scope.row.passportNo" size="small"/>
                </template>
              </el-table-column>
              <el-table-column prop="expiryDate" :label="language==0?'护照签发日':'Expiry Date'" width="130px">
                <template #default="scope">
                  <el-date-picker
                      v-model="scope.row.issueDate" size="small"
                      style="width: 100%;" placeholder="YYYY-MM-DD"
                      type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                  />
                </template>
              </el-table-column>
              <el-table-column prop="arrival" :label="language==0?'护照过期日':'Expiration date'" width="130px">
                <template #default="scope">
                  <el-date-picker
                      v-model="scope.row.expiryDate" size="small"
                      style="width: 100%;" placeholder="YYYY-MM-DD"
                      type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                  />
                </template>
              </el-table-column>
              <el-table-column label="Actions">
                <template #default="scope">
                  <el-button type="danger" size="small" @click="delPassportInfo(scope.row)">
                    {{ language == 0 ? '删除' : 'Delete' }}
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>

        </div>
        <!--        补充材料-->
        <el-form-item :label="language==0?'补充材料':'Additional Documents'" prop="files">
          <file-upload v-model="form.files" :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, associationList, countryList, getVisaInfo} 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 user = useUserStore().user
const {proxy} = getCurrentInstance()
const language = useStorage('language', 0)
const form = ref({
  gender: '0',
  cptVisaInfoBos: []
})
const show = 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
  form.value.userId = user.userId
  form.value.cptId = params.cptId
  getCountryList()
  getMNAList()
  getVisa()
}
defineExpose({open})

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) {
    if (language.value == 0) {
      ElMessage.warning('请填写正确的邮箱')
    } else {
      ElMessage.warning('Please fill in the correct email')
    }
    return
  }
  if (form.value.files && Array.isArray(form.value.files)) {
    form.value.files = form.value.files[0]?.url
  }
  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) => {
          ElMessage.success(language.value == 0 ? '提交成功' : 'Successfully!')
          showR.value = true
        })
      })
    }
  })
}

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

function delPassportInfo(row) {
  console.log(row,form.value.cptVisaInfoBos)
  form.value.cptVisaInfoBos = _.remove(form.value.cptVisaInfoBos, row)
}

</script>

<style scoped lang="scss">
: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: 15px;
  margin-bottom: 20px;
  border: 1px dashed #ebeef5;

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