<template>
  <div>
    <div>
      <el-tabs v-model="tabs" @tab-change="initData">
        <el-tab-pane label="级位" :name="0" />
        <el-tab-pane label="段位" :name="1" />
      </el-tabs>

      <div v-if="form.perCode">
        <span v-if="form.perCode&&(form.certStage==3||form.certStage==4)&&form.idcType!=3">
          会员号：{{ form.perCode }}
        </span>
        <span v-if="tabs==0&&list.length>0" style="margin-left: 10px;">
          级位{{ szToHz(minVal.level) }}级
          <span style="margin-left: 10px">获取时间 {{ minVal.createTime? parseTime(minVal.createTime, '{y}-{m}-{d}') :'--' }}</span>
        </span>
        <span v-if="tabs==1&&list.length>0" style="margin-left: 10px;">
          段位{{ szToHz(maxVal.level) }}段
          <span style="margin-left: 10px">获取时间{{ maxVal.createTime? parseTime(maxVal.createTime, '{y}-{m}-{d}'):'--' }}</span>
        </span>
      </div>
    </div>
    <br>
    <el-table v-loading="loading" :data="list">
      <el-table-column type="index" label="序号" width="55" align="center" />
      <el-table-column
        :label="tabs==0?'级位':'段位'" align="center" prop="level" min-width="70"
        :show-overflow-tooltip="true"
      >
        <template #default="scope">
          <div>
            {{ szToHz(scope.row.level) }}{{ tabs==0?'级':'段' }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        v-if="tabs==0" label="级位号" align="center" prop="certCode" min-width="115"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        v-if="tabs==1" label="段位号" align="center" prop="certCode" min-width="115"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        v-if="deptType==1" label="单号" align="center" prop="examCode" min-width="115"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        v-if="deptType==1"
        label="考点" align="center" prop="dgName" min-width="140"
        :show-overflow-tooltip="true"
      />

      <el-table-column
        v-if="deptType==1"
        label="考试名称" align="center" prop="examName" min-width="140"
        :show-overflow-tooltip="true"
      />

      <el-table-column
        v-if="deptType==1"
        label="考点所属一级单位" align="center" prop="memName" min-width="140"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        v-if="deptType==1"
        label="考官编号" align="center" prop="examinerNames" min-width="130"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="获得证书时间" align="center" prop="createTime" min-width="120"
        :show-overflow-tooltip="true"
      >
        <template #default="scope">
          <div>
            {{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}
          </div>
        </template>
      </el-table-column>

      <el-table-column
        v-if="(deptType==1)" label="操作" align="center"
        min-width="300" fixed="right"
      >
        <template #default="scope">
          <div>
            <el-button v-if="deptType==1" type="primary" @click="certificateFN(scope.row)">更新证书</el-button>
            <el-button v-if="tabs==0" :disabled="!(scope.row?.remark?.length>0)" type="warning" @click="levelChange(scope.row)">变更记录</el-button>
            <el-button v-if="deptType==1||deptType==2||deptType==3" type="danger" @click="downloadCard(scope.row)">下载证书</el-button>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        v-if="(deptType!=1&&tabs==0)" label="操作" align="center"
        min-width="200"
      >
        <template #default="scope">
          <div>
            <el-button v-if="deptType==1||deptType==2" type="primary" @click="certificateFN(scope.row)">更新证书</el-button>
            <el-button v-if="tabs==0" :disabled="!(scope.row?.remark?.length>0)" type="primary" @click="levelChange(scope.row)">变更记录</el-button>
            <el-button v-if="(deptType==1||deptType==2||deptType==3)&&tabs==0" type="danger" @click="downloadCard(scope.row)">下载证书</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <levelRecord ref="levelRecordRef" />
  </div>
</template>

<script setup >
import { getPersonTecDetails, editCertsByCertCode, checkTechDownPermission2 } from '@/api/member/detail.js'
import {
  checkDownPermission,
  checkPersonByPersonId
} from '@/api/exam/cert'
import { szToHz } from '@/utils/ruoyi'
import { getInfo } from '@/api/person/info.js'
import { onMounted, ref, reactive, toRefs, getCurrentInstance, computed } from 'vue'
import useUserStore from '@/store/modules/user'
import levelRecord from './levelRecord.vue'
import { getAssoPers } from '/@/api/person/info'
import { useRoute } from 'vue-router'
const deptType = computed(() => useUserStore().deptType)
const loading = ref(false)
const { proxy } = getCurrentInstance()
const list = ref([])
const tabs = ref(0)
const perId = ref()
const route = useRoute()

const props = defineProps({
  form: {}
})
const data = reactive({
  form: {},
  info: {}
})
const { form, info } = toRefs(data)


onMounted(() => {
  form.value = props.form
  getAssoPers(route.query.perId).then(res => {
    res.data[10] ? perId.value = res.data[10] : perId.value = route.query.perId
    initData()
    getInfoFn()
  })
})

const maxVal = ref()
const minVal = ref()
async function initData() {
  loading.value = true
  const res = await getPersonTecDetails(tabs.value, perId.value)
  let min = 100
  let max = null
  list.value = res.data || []
  list.value.forEach((item) => {
    item.level = item.level * 1
    item.remark = JSON.parse(item.remark)
    if (item.level < min) {
      min = item.level
      minVal.value = item
    }
    if (item.level > max) {
      max = item.level
      maxVal.value = item
    }
  })
  list.value = list.value.filter(v => v.certCode != 'G255839248')
  loading.value = false
}

async function certificateFN(row) {
  await proxy.$modal.confirm(`是否确认更新${tabs.value == 0 ? '级位' : '段位'}证书？`)
  loading.value = true
  await editCertsByCertCode({ certCode: row.certCode })
  loading.value = false
  await initData()
  await proxy.$modal.msgSuccess('操作成功！')
}

async function getInfoFn() {
  const res = await getInfo(perId.value)
  info.value = res.data
}

// 级位变更记录
function levelChange(row) {
  proxy.$refs['levelRecordRef'].open(row.remark)
}

async function downloadCard(row) {
  const res = await checkPersonByPersonId(row.perId)
  if (!res.data) return await proxy.$modal.confirm('该学员没有照片，无法生成证书！')
  await handelCheckDownPermission(row.techId)
  await proxy.download(
    `/person/technology/exportPdf`,
    { code: row.certCode },
    `级位证书`
  )
}

function handelCheckDownPermission(techId) {
  return new Promise(async(resolve, reject) => {
    if (!techId) return reject()
    const res = await checkTechDownPermission2(techId)
    if (res.code == 200 && res.data.flag == 1) {
      return resolve()
    } else {
      proxy.$modal.msgError(res.data.info)
      return reject()
    }
  })
}
</script>

<style scope lang="scss">
.span{
  color: #920f20;
  margin-left: 10px;
  cursor :pointer;

}

.btn{
  margin-left: 10px;
}

h3{
  background-color: #f5f7f9;
  padding: 10px;
  display: flex;
  justify-content: space-between;

}
</style>