<template>
  <el-dialog
    v-model="show"
    append-to-body center
    class="pcloginpop"
    destroy-on-close
    style="min-width: 350px;"
  >
    <div>
      <el-descriptions border>
        <!--        <el-descriptions-item label="No.">{{ form.id }}</el-descriptions-item>-->
        <el-descriptions-item label="Applicant Type">
          <span v-if="form.applicatType==1">MNA/Team</span>
          <span v-if="form.applicatType==2">Technical Official (TD/CSB/IR)</span>
          <span v-if="form.applicatType==3">WT Team</span>
          <span v-if="form.applicatType==5">Other(not listed above)</span>
          <span>{{ form.remarks }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="Invitation Type">
          {{ form.invitationType == 1 ? 'Visa lnvitation' : 'TE/PU letter' }}
        </el-descriptions-item>
        <el-descriptions-item label="MNA/Team Name">
          {{ associationCodeFind(form.associationCode) }}
        </el-descriptions-item>
        <el-descriptions-item label="MNA/Team Address">{{ form.associationAddress }}</el-descriptions-item>
        <el-descriptions-item label="Contact Email">{{ form.email }}</el-descriptions-item>
        <el-descriptions-item label="Full Name">{{ form.fullName }}</el-descriptions-item>
        <el-descriptions-item label="Position">
          <span v-if="form.remarks1">form.remarks1</span>
          <span v-else>
            <sapn v-if="form.position==0">Manager</sapn>
            <sapn v-if="form.position==1">Team leader</sapn>
            <sapn v-if="form.position==2">Coach</sapn>
            <sapn v-if="form.position==3">Other</sapn>
          </span>
        </el-descriptions-item>
        <el-descriptions-item label="Phone">{{ form.phone }}</el-descriptions-item>
        <el-descriptions-item label="Chinese Embassy Visa Office">{{ form.embassy }}</el-descriptions-item>
        <el-descriptions-item label="Chinese Embassy Email">{{ form.embassyEmail }}</el-descriptions-item>
        <el-descriptions-item label="Additional Documents">
          <el-link v-if="form.files" :href="fillImgUrl(form.files)" target="_blank" type="primary">
            additional documents
          </el-link>
        </el-descriptions-item>
        <el-descriptions-item label="Remarks">{{ form.remarks3 }}</el-descriptions-item>
      </el-descriptions>
      <!--    <el-divider></el-divider>-->
      <br/>
      <div v-if="form.cptVisaInfoBos?.length>0">
        <el-table :data="form.cptVisaInfoBos" border stripe>
          <el-table-column label="Passport Copy" prop="passportCopy">
            <template #default="{row}">
              <el-image
                :preview-src-list="[fillImgUrl(row.passportCopy)]"
                :preview-teleported="true"
                :src="fillImgUrl(row.passportCopy)"
                style="width: 50px;height: 70px"
              />
            </template>
          </el-table-column>
          <el-table-column align="center" label="Date OF Entrye" prop="entryDate"/>
          <el-table-column align="center" label="Date OF Departure" prop="departureDate"/>
          <el-table-column align="center" label="position" prop="position"/>
          <el-table-column align="center" label="lastName" prop="lastName"/>
          <el-table-column align="center" label="firstName" prop="fristName"/>
          <el-table-column align="center" label="Gender" prop="sex">
            <template #default="{row}">
              {{ row.sex == '0' ? 'M' : 'F' }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="nationality" prop="nationality"/>
          <el-table-column align="center" label="birthday" prop="birthday"/>
          <el-table-column align="center" label="Passport No." prop="passportNo"/>
          <el-table-column align="center" label="DATE OF ISSUE" prop="issueDate"/>
          <el-table-column align="center" label="DATE OF EXPIRY" prop="expiryDate"/>
        </el-table>
      </div>
    </div>
    
    <p class="red" style="font-size: 16px">
      Passport information has been auto-recognized.Please double-check carefully, as errors may occur.Edit if
      necessary
      before submission.
    </p>
    <br>
    <p style="text-align: center">
      <el-button type="primary" @click="handelSubmit">Confrm</el-button>
    </p>
    <br>
  </el-dialog>

</template>

<script setup>
import {useStorage} from "@vueuse/core/index";
import {getCurrentInstance, ref} from "vue";
import {
  associationList,
} from "@/apiPc/match";
import useUserStore from "@/store/modules/user";
import _ from 'lodash'
import {fillImgUrl} from "/@/utils/ruoyi";

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 mnaList = ref([])
const open = (params) => {
  form.value = {}
  show.value = true
  form.value = {...params}
  getMNAList()
}
defineExpose({
  open,
})


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

function handelSubmit() {
  show.value = false
  emit('success')
}

function associationCodeFind(id) {
  const obj = mnaList.value.find(v => v.code == id)
  if (obj) return obj.nameEn
}

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