<template>
  <el-dialog v-model="show" :title="title" width="500px" close-icon="CircleClose" center destroy-on-close>
    <div class="pd20" v-loading="loading">
      <el-form ref="dialogRef" label-position="top" :model="form" :rules="rules" v-if="!isDone">
        <el-form-item :label="language==0?'姓氏':'family name'" required prop="lastName">
          <el-input v-model="form.lastName"></el-input>
        </el-form-item>
        <el-form-item :label="language==0?'名字':'first name'" required prop="fristName">
          <el-input v-model="form.fristName"></el-input>
        </el-form-item>
        <el-form-item :label="language==0?'媒体名称':'media organization'" required prop="mediaName">
          <el-input v-model="form.mediaName"></el-input>
        </el-form-item>
        <el-form-item :label="language==0?'媒体类型':'media category'" required prop="mediaType">
          <el-select v-model="form.mediaType">
            <el-option label="Reporter/Written Media" value="0"/>
            <el-option label="Photographer" value="1"/>
            <el-option label="TV Non-Rights Holder" value="2"/>
          </el-select>
        </el-form-item>
        <el-form-item :label="language==0?'国家（地区)':'country'" required prop="country">
          <el-select v-model="form.country" filterable>
            <el-option v-for="item in countrys"
                       :key="item.id"
                       :label="language==0?item.name:item.enName"
                       :value="language==0?item.id :item.id"/>
          </el-select>
        </el-form-item>
        <el-form-item :label="language==0?'证件类型':'ID type'" required prop="passType">
          <el-select v-model="form.passType">
            <el-option :label="language==0?'身份证':'ID Card'" value="0"/>
            <el-option :label="language==0?'护照':'Passport'" value="1"/>
          </el-select>
        </el-form-item>
        <el-form-item :label="language==0?'身份证（护照）号码':'ID or passport number'" required prop="idCard">
          <el-input v-model="form.idCard"></el-input>
        </el-form-item>
        <el-form-item :label="language==0?'邮箱':'work email'" required prop="email">
          <el-input v-model="form.email"></el-input>
        </el-form-item>
        <el-form-item :label="language==0?'一寸证件照':'profile photo'" required prop="photos">
          <image-upload v-model="form.photos" :limit="1" :is-show-tip="false"
                        :button-text="language==0?'上传':'Upload'"/>
        </el-form-item>
      </el-form>

<!--      “提交成功”状态、提交记录、和提交的信息展示  提交后需要修改请联系XXXX邮箱-->
      <div  v-if="isDone">
        <el-descriptions column="1" border>
          <el-descriptions-item :label="language==0?'姓氏':'family name'">{{form.lastName}}</el-descriptions-item>
          <el-descriptions-item :label="language==0?'名字':'first name'">{{form.fristName}}</el-descriptions-item>/>
          <el-descriptions-item :label="language==0?'媒体名称':'media organization'">{{form.mediaName}}</el-descriptions-item>
          <el-descriptions-item :label="language==0?'媒体类型':'media category'">
            <span v-if="form.mediaType==0">Reporter/Written Media</span>
            <span v-if="form.mediaType==1">Photographer</span>
            <span v-if="form.mediaType==2">TV Non-Rights Holder</span>
          </el-descriptions-item>
          <el-descriptions-item :label="language==0?'国家（地区)':'country'">
            <span v-if="language=='0'">{{form.name}}</span>
            <span v-if="language=='1'">{{form.enName}}</span>
          </el-descriptions-item>
          <el-descriptions-item :label="language==0?'证件类型':'ID type'">
            <span v-if="form.passType==0">{{ language==0?'身份证':'ID Card' }}</span>
            <span v-if="form.passType==1">{{ language==0?'护照':'Passport' }}</span>
          </el-descriptions-item>
          <el-descriptions-item :label="language==0?'证件号码':'ID NO.'">{{form.idCard}}</el-descriptions-item>
          <el-descriptions-item :label="language==0?'邮箱':'work email'">{{form.email}}</el-descriptions-item>
          <el-descriptions-item :label="language==0?'一寸证件照':'profile photo'">
            <el-image :src="fillImgUrl(form.photos)" style="width: 100px;"/>
          </el-descriptions-item>
        </el-descriptions>

        <el-result icon="success"
                   :title="language==0?'已提交':'Submitted'"
                   :sub-title="language==0?'提交后需要修改请联系XXXX邮箱':'Submitted, please modify contact XXXX email'"  />

      </div>

    </div>
      <template #footer v-if="!isDone">
        <el-button @click="cancel">{{language==0?'取消':'cancel'}}</el-button>
        <el-button type="primary" @click="submit">{{language==0?'确定':'confirm'}}</el-button>
      </template>
  </el-dialog>
</template>

<script setup>
import {useStorage} from "@vueuse/core/index";
import { ref } from "vue";
import ImageUpload from "/@/components/ImageUpload/index.vue";
import {countryList} from "/@/apiPc/match";
import {getMediaInfo, mediaRegister} from "/@/apiPc/common";
import useUserStore from "@/store/modules/user";
import {ElMessageBox} from "element-plus";
import {getCurrentInstance} from "@vue/runtime-core";

const { proxy } = getCurrentInstance()
const language = useStorage('language', 0)
const loading = ref(false)
const show = ref(false)
const title = ref('')
const form = ref({})
const isDone = ref(false)
const countrys = ref([])
const user = useUserStore().user
const rules = ref({
  lastName: [
    { required: true, message: language.value==0?'请输入姓氏':'Please enter family name', trigger: 'blur'}
  ],
  fristName: [
    { required: true, message: language.value==0?'请输入名字':'Please enter first name', trigger: 'blur'}
  ],
  mediaName: [
    { required: true, message: language.value==0?'请输入媒体名称':'Please enter media organization', trigger: 'blur'}
  ],
  mediaType: [
    { required: true, message: language.value==0?'请选择媒体类型':'Please select media category', trigger: 'blur'}
  ],
  country: [
    { required: true, message: language.value==0?'请选择国家':'Please select country', trigger: 'blur'}
  ],
  passType: [
    { required: true, message: language.value==0?'请选择证件类型':'Please select ID type', trigger: 'blur'}
  ],
  idCard: [
    { required: true, message: language.value==0?'请输入证件号码':'Please enter ID or passport number', trigger: 'blur'}
  ],
  email: [
    { required: true, message: language.value==0?'请输入邮箱':'Please enter work email', trigger: 'blur'}
  ],
  photos: [
    { required: true, message: language.value==0?'请上传一寸证件照':'Please upload profile photo', trigger: 'blur'}
  ]
})

const open = (params) => {
  getCountryList()
  form.value.cptId = params.cptId
  form.value.userId = user.userId
  show.value = true
  title.value = language.value==0 ? '媒体注册' : 'Media Registration'
  getInfo()
}
defineExpose({open})
function getInfo() {
  loading.value = true
  getMediaInfo({userId: user.userId,cptId: form.value.cptId}).then(res=>{
    loading.value = false
    if(res.data){
      isDone.value = true
      form.value = res.data
    } else {
      isDone.value = false
    }
  })
}
function getCountryList() {
  countryList().then(res => {
    countrys.value = res.data
  })
}
const cancel = () => {
  show.value = false
}
const submit = () => {
  proxy.$refs.dialogRef.validate(valid => {
    ElMessageBox.confirm( '提交后不能修改，确定提交吗？','提示', {
      confirmButtonText: language.value==0?'确定':'confirm',
      cancelButtonText: language.value==0?'取消':'cancel',
      type: 'warning'
    }).then(() => {
      mediaRegister(form.value).then(res=>{
        isDone.value = true
      })
    })
  })
}

</script>

<style scoped lang="scss">

</style>