<template>
  <div v-if="show">
    <el-dialog v-model="show" width="80%" title="查看详情" style="min-width: 1100px;">
      <el-table border :data="list" style="width: 100%">
        <el-table-column label="序号" align="center" type="index" width="55" />
        <el-table-column
          label="姓名"
          align="center"
          prop="perName"
          min-width="120"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="证件类型"
          align="center"
          prop=""
          min-width="120"
          :show-overflow-tooltip="true"
        >
          <template #default="scope">
            <div>{{ cardType[scope.row.idcType].label }}</div>
          </template>
        </el-table-column>
        <el-table-column
          label="证件号"
          align="center"
          prop="idcCode"
          min-width="140"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="级位"
          align="center"
          prop=""
          min-width="100"
        >
          <template #default="scope">
            {{ szToHz(scope.row.oldJi) }}级
          </template>
        </el-table-column>

        <el-table-column
          label="级位编号"
          align="center"
          prop="examPersonData.certCode"
          min-width="120"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="通过日期"
          align="center"
          prop=""
          min-width="100"
        >
          <template #default="scope">
            <span>{{ parseTime(scope.row?.examPersonData?.certTime, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="变更后级别"
          align="center"
          prop=""
          min-width="100"
        >
          <template #default="scope">
            {{ szToHz(scope.row.newJi) }}级
          </template>
        </el-table-column>
        <el-table-column
          label="变更理由"
          align="center"
          prop=""
          min-width="140"
        >
          <template #default="scope">
            <div v-if="scope.row.reason==1">报错级位</div>
            <div v-if="scope.row.reason==2">以前有级位无法报下一级</div>
            <div v-if="scope.row.reason==3">其它</div>
          </template>
        </el-table-column>
        <el-table-column
          label="附件"
          align="center"
          prop=""
          min-width="100"
        >
          <template #default="scope">
            <div>
              <!--              <el-image style="width: 100px;" :src="fillImgUrl(scope.row.fileUrl)" :fit="fit" @click="imgRul(scope.row.fileUrl)" />-->
              <el-button v-if="scope.row.fileUrl" type="text" @click="handleDownload(scope.row,'fileUrl')">下载</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <imgView ref="imgViewRef" />
    <el-link v-show="false" ref="linkRef" :href="fillImgUrl(url)" :underline="false" target="_blank" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { szToHz } from '/@/utils/ruoyi'
import { addList } from '/@/api/member/dataAlteration/level'
import imgView from './imgView.vue'
import { getCurrentInstance } from '@vue/runtime-core'
const { proxy } = getCurrentInstance()
const show = ref(false)
const rangeId = ref()
const list = ref([])
const queryParams = ref({})
const loading = ref(false)
const total = ref(0)
const url = ref()
const cardType = ref([
  { label: '身份证', value: '0' },
  { label: '港澳台通行证 ', value: '1' },
  { label: '中国护照', value: '2' },
  { label: '外国护照', value: '3' },
  { label: '其它', value: '4' }
])

function open(row) {
  queryParams.value = {
    pageNum: 1,
    pageSize: 9999
  }
  show.value = true
  rangeId.value = row
  queryParams.value.rangeId = rangeId.value
  getList()
}

async function getList() {
  loading.value = true
  const res = await addList(queryParams.value)
  if (res.code == 200) {
    list.value = res.rows
    list.value.forEach(item => {
      item.examPersonData = JSON.parse(item.examPersonData)
      item.fileUrl = JSON.parse(item.fileUrl)
    })
    total.value = res.total
    loading.value = false
    console.log(list.value)
  }
}

function imgRul(url) {
  proxy.$refs['imgViewRef'].open(url)
}

function handleDownload(row) {
  console.log(row)
  url.value = row.fileUrl?.[0]?.url
  proxy.$refs['linkRef'].$el.click()
}

defineExpose({
  open
})

</script>

<style scoped lang="scss">

</style>