<template>
  <el-dialog
    v-model="show" :title="title" width="1000px" append-to-body :close-on-click-modal="false"
    destroy-on-close
  >
    <el-descriptions border>
      <el-descriptions-item v-if="form.picUrl" :label="language==0?'个人照片':'photo'">
        <img style="width: 60px" :src="fillImgUrl(form.picUrl)">
      </el-descriptions-item>
      <el-descriptions-item :label="language==0?'姓氏':'surname'">{{ form.xing }}</el-descriptions-item>
      <el-descriptions-item :label="language==0?'名':'name'">{{ form.ming }}</el-descriptions-item>
      <el-descriptions-item :label="language==0?'短名':'short name'">{{ form.shortName }}</el-descriptions-item>
      <el-descriptions-item  :label="language==0?'性别':'sex'">{{ form.sexStr }}</el-descriptions-item>
      <el-descriptions-item :label="language==0?'所属国家':'Nationality'">{{ form.countryName }}</el-descriptions-item>
      <el-descriptions-item :label="language==0?'证件类型':'ID type'">{{ form.idcTypeStr }}</el-descriptions-item>
      <el-descriptions-item :label="language==0?'证件号码':'ID NO'">{{ form.idcCode }}</el-descriptions-item>
      <el-descriptions-item :label="language==0?'出生日期':'birth'">{{ form.birth }}</el-descriptions-item>
      <el-descriptions-item :label="language==0?'手机号码':'Phone'">{{ form.phone }}</el-descriptions-item>
      <el-descriptions-item :label="language==0?'邮箱':'Email'">{{ form.email }}</el-descriptions-item>
      <el-descriptions-item :label="language==0?'详细地址':'Address'">{{ form.address }}</el-descriptions-item>
    </el-descriptions>

    <el-row v-if="participantsInfoArr&&participantsInfoArr.length>0" class="mt20">
      <el-col :span="16">
        <el-form ref="dialogRef">
          <el-form-item v-for="(s,index) in participantsInfoArr" :key="index">
            <template #label>
              <span v-if="s.status == 0" class="red">*</span>{{ s.name }}
            </template>
            <el-input v-if="s.type == '0'" v-model="s.value" type="text" />
            <el-input v-if="s.type == '1'" v-model="s.value" type="number" />
            <el-select v-if="s.type == '4'" v-model="s.value" class="m-2">
              <el-option v-for="item in s.option" :key="item.id" :label="item.name" :value="item.name" />
            </el-select>
            <ImageUpload
              v-if="s.type == '3'" v-model="s.value" :limit="1"
              :is-show-tip="false"
            />
            <!-- 文件 2-->
            <FileUpload v-if="s.type == '2'" v-model="s.fixWxFile" :action="uploadUrl" />

          </el-form-item>
        </el-form>
      </el-col>
    </el-row>

    <template #footer>
      <div class="dialog-footer text-center">
        <el-button type="primary" @click="submitForm">保 存</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { reactive, ref, toRefs, watch } from 'vue'
import { getCurrentInstance, nextTick, onMounted } from '@vue/runtime-core'
import * as match from '@/apiPc/match'
import { certificates } from '@/assets/lib/nation'
import { ElMessage } from 'element-plus'
import { useRoute } from 'vue-router'

const { proxy } = getCurrentInstance()
const emit = defineEmits(['submitForm'])
const uploadUrl = ref('/upload/upLoadToFileServer')
const route = useRoute()
import cache from "@/plugins/cache"
const language = ref(cache.local.get('language') || 0)

const data = reactive({
  form: {},
  show: false,
  countryList: [],
  participantsInfoArr: [],
  title: '',
  groupId: '0'
})
const { form, show, countryList, participantsInfoArr, title, groupId } = toRefs(data)
const matchId = route.params.id
let extraId = 0
let personId
onMounted(() => {
  getCountryList()
})
const open = (params) => {
  // debugger
  show.value = true
  title.value = params.title
  personId = params.personId
  extraId = params.extraId
  participantsInfoArr.value = params.participantsInfoArr
  init()
}
defineExpose({ open })
watch(show, (value) => {
  if (!value) {
    form.value = {}
    participantsInfoArr.value = []
  }
})

function init() {
  match.getPersonInfoById(personId).then(res => {
    form.value = res.data
    if (extraId != 0) {
      getSupplement()
    }
  })
}

function getSupplement() {
  match.getSupplementInfo(extraId).then(res => {
    if (res.data.personInfo) {
      // 补充字段信息
      participantsInfoArr.value = JSON.parse(res.data.personInfo)
      for (var n of participantsInfoArr.value) {
        if (n.type == '3' && n.value.url) {
          // 图片
          n.value = n.value.url
        }
        if (n.type == '2') {
          // 文件
          var arr = [{
            name: n.value.name,
            url: n.value.url
          }]
          n.fixWxFile = arr
        }
      }
    }
  })
}

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

function submitForm() {
  let fileInfo = {}
  for (const n of participantsInfoArr.value) {
    if (n.status == 0 && (!n.value && !n.fixWxFile)) {
      ElMessage.error(`请完善${n.name}信息`)
      return
    }
    if (n.type == '2' && n.fixWxFile) {
      const temp = n.fixWxFile[0].name.split('.')
      fileInfo = {
        url: n.fixWxFile[0].url,
        name: n.fixWxFile[0].name,
        extname: temp[temp.length - 1]
      }
      n.value = fileInfo
    }
  }
  let obj = {}
  if (extraId != '0') { // 修改
    obj = {
      cptId: matchId,
      personId: personId,
      id: extraId,
      personInfo: JSON.stringify(participantsInfoArr.value)
    }
  } else { // 没填过
    obj = {
      cptId: matchId,
      personId: personId,
      personInfo: JSON.stringify(participantsInfoArr.value)
    }
  }
  match.saveSupplementInfo(obj).then(res => {
    show.value = false
    emit('submitForm')
  })
}

function cancel() {
  show.value = false
}
</script>

<style lang="scss">
.threeFour {
  width: 100%;

  :deep(.el-upload--picture-card) {
    width: 120px;
    height: 160px;
  }

  :deep(.el-upload-list--picture-card .el-upload-list__item) {
    width: 120px;
    height: 160px;
  }
}

.tip {
  font-size: 13px;
  color: #999;
  margin: 10px 0;

  i {
    color: red;
    margin: 0 4px 0 0;
  }
}

.red {
  color: #f56c6c;
}
</style>