<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
    width="600px"
  >
    
    <div class="boxInvitation pd20">
      <div v-if="showR" class="text-center pd20">
        <img class="mauto" src="@/assets/dance/ok.png">
        <!--        <h2 class="text-center">{{ language == 0 ? '申请已提交' : 'Submitted successfully' }}</h2>-->
        <h4 v-if="language == 0" class="text-center">
          我们已收到您的邀请函申请，并将尽快处理。请耐心等待。
        </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 class="btn-lineG" round size="large" type="primary" @click="conti">
          {{ language == 0 ? '继续提交' : 'Continue To Submit' }}
        </el-button>
      </div>
      
      <el-form
        v-else ref="iformRef" :model="form" :rules="rules" label-position="right"
        label-width="150px"
      >
        <!--        <el-form-item :label="language==0?'有效证件':'Passport Copy'" prop="passportCopy" required>-->
        <!--          <image-upload-->
        <!--            v-model="form.passportCopy" :button-text="language==0?'上传':'Upload'" :is-show-tip="false"-->
        <!--            :limit="1"-->
        <!--          />-->
        <!--        </el-form-item>-->
        
        <el-form-item :label="language==0?'有效证件':'Valid Passport'" prop="passportCopy" required>
          <image-upload
            ref="uploadPassportRef"
            v-model="form.passportCopy"
            :action="'/common/getPersonInfoFromCert/6'"
            :button-text="language==0?'上传':'Upload'"
            :is-show-tip="false"
            :limit="1"
            param-name="pic"
            @response="ocrSuccess"
          />
          <div class="tip">
            <span v-if="language==0">请上传有效身份证件扫描件，用于核实身份信息、申请签证邀请函及购买保险等 </span>
            <span v-else>
              Please upload a scanned copy of your valid passport for verification of identity information,
              application of visa invitation letter and purchasing insurance etc.</span>
          </div>
        
        </el-form-item>
        <el-form-item :label="language==0?'姓名':'Name'" prop="name" required>
          <el-input v-model="form.name" @input="handleInput" />
        </el-form-item>
        <el-form-item :label="language==0?'护照号':'Passport No.'" prop="passportNo" required>
          <el-input v-model="form.passportNo" />
        </el-form-item>
        <el-form-item :label="language==0?'性别':'Gender'" prop="gender" required>
          <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'" prop="nationality" required>
          <el-select v-model="form.nationality" filterable 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'" prop="birth" required>
          <el-date-picker
            v-model="form.birth"
            format="YYYY-MM-DD" placeholder="YYYY-MM-DD"
            style="width: 100%;" type="date" value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item :label="language==0?'邮箱':'Email'" prop="email" required>
          <el-input v-model="form.email" type="email" />
          <div v-if="language == 0" class="tip">如以团队名义申请邀请函，建议统一填写领队邮箱。</div>
          <div v-else class="tip">
            If a visa invitation letter is applied by the organization, it is recommended to fill in the email of the
            head of team.
          </div>
        </el-form-item>
        
        <el-form-item :label="language==0?'抵达日期':'Date of Arrival'" prop="arrival" required>
          <el-date-picker
            v-model="form.arrival" format="YYYY-MM-DD"
            placeholder="YYYY-MM-DD"
            style="width: 100%;" type="date" value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item :label="language==0?'出发日期':'Date of Departure'" prop="departure" required>
          <el-date-picker
            v-model="form.departure"
            format="YYYY-MM-DD" placeholder="YYYY-MM-DD"
            style="width: 100%;" type="date" value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item :label="language==0?'备注':'Remark '">
          <el-input v-model="form.remark" rows="3" type="textarea" />
        </el-form-item>
        
        <div class="text-center">
          <el-button 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, watch, ref } 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 handleInput = (value) => {
  const regex = /^[a-zA-Z]*$/
  const regexCh = /^[\u4e00-\u9fa5]+$/
  if (language.value == 0) {
    if (!regexCh.test(value)) {
      form.value.name = ''
      ElMessage.warning('请输入中文')
    }
  } else {
    if (!regex.test(value)) {
      form.value.name = ''
      ElMessage.warning('Please enter English only')
    }
  }
}
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
        }
        form.value.ocrFlag = '1'
        addInvitation(form.value).then((res) => {
          ElMessage.success(language.value == 0 ? '提交成功' : 'Successfully!')
          showR.value = true
        })
      })
    }
  })
}

const ocrSuccess = (res) => {
  // form.value.passportUrl = res.data.url
  console.log(form.value.passportUrl)
  if (res.code == 200) {
    form.value.passportCopy = res.data.url
    form.value.passportNo = res.data.code
    form.value.birth = res.data.birth?.slice(0, 10)
    form.value.gender = res.data.sex
    form.value.name = res.data.name
  } else if (res.code == 500) {
    ElMessage.warning(res.msg)
    form.value.passportCopy = ''
  }
}

const conti = () => {
  showR.value = false
  form.value = {
    gender: '0'
  }
}
</script>

<style lang="scss" scoped>
.tip {
  font-size: 12px;
}

.boxInvitation {
  width: 90%;
  margin: auto
}

h4 {
  font-size: 15px;
  line-height: 1.6;
}
</style>