<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">
        会员号：{{ form.perCode }}
        <span v-if="tabs==0&&list.length>0" style="margin-left: 10px;">级位{{ level }}级</span>
        <span v-if="tabs==1&&list.length>0" style="margin-left: 10px;">段位{{ level }}段</span>
        <span v-if="list.length>0" style="margin-left: 10px;">获取时间 <span v-if="dataTim">{{ dataTim }}</span> <span v-else>--</span></span>
      </div>
    </div>

    <br>
    <el-table
      v-loading="loading" :data="list" border style="width: 100%"
    >
      <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 label="单号" align="center" prop="examCode" min-width="115" :show-overflow-tooltip="true" />
      <el-table-column
        label="考点" align="center" prop="dgName" min-width="140"
        :show-overflow-tooltip="true"
      />

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

      <el-table-column
        label="考点所属一级单位" align="center" prop="memName" min-width="140"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="考官编号" align="center" prop="examinerNames" min-width="80"
        :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="200"
      >
        <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="primary" @click="levelChange(scope.row)">变更记录</el-button>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        v-if="(deptType==2||deptType==3||deptType==6)&&tabs==0" label="操作" align="center"
        min-width="120"
      >
        <template #default="scope">
          <div>
            <el-button :disabled="!(scope.row?.remark?.length>0)" type="primary" @click="levelChange(scope.row)">变更记录</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <levelRecord ref="levelRecordRef" />
  </div>
</template>

<script setup >
import { getPersonTecDetails, getNewestCertTime, editCertsByCertCode } from '@/api/member/detail.js'
import { szToHz } from '@/utils/ruoyi'
import { onMounted, ref, reactive, toRefs, getCurrentInstance, computed } from 'vue'
import useUserStore from '@/store/modules/user'
import levelRecord from './levelRecord.vue'
const deptType = computed(() => useUserStore().deptType)
const loading = ref(false)
const { proxy } = getCurrentInstance()
const list = ref([])
const tabs = ref(0)
const level = ref()
const data = reactive({
  form: {}
})

const { form } = toRefs(data)

const props = defineProps({
  form: {
    type: Object,
    required: true
  },
  userId: {}
})

onMounted(() => {
  form.value = props.form
  console.log(form.value)
  initData()
})

async function initData() {
  loading.value = true
  const res = await getPersonTecDetails(tabs.value, form.value.perId)
  list.value = res.data || []
  list.value.forEach((item) => {
    item.level = item.level * 1
    item.remark = JSON.parse(item.remark)
  })
  if ((tabs.value == 0 && form.value.levelJi) || (tabs.value == 1 && form.value.levelDuan)) {
    await getDataTime()
  }
  loading.value = false
}

//
// // 更新证书
// function update(type) {
//   proxy.$modal.confirm(`是否确认更新${type == 1 ? '级位' : '段位'}证书？`).then(function() {
//     loading.value = true
//     // type==1级位
//     // type==2段位
//     return newCerts({ perId: form.value.perId, type: type })
//   }).then(() => {
//     loading.value = true
//     initData()
//     proxy.$modal.msgSuccess('操作成功！')
//   }).catch(() => {
//   }).finally(() => {
//     loading.value = false
//   })
// }

const dataTim = ref()

// 获取时间
async function getDataTime() {
  const res = await getNewestCertTime({
    perId: form.value.perId,
    level: tabs.value == 0 ? form.value.levelJi : form.value.levelDuan,
    type: tabs.value
  })
  dataTim.value = res.data.passDate
  level.value = res.data.level
}

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

// 级位变更记录
function levelChange(row) {
  proxy.$refs['levelRecordRef'].open(row.remark)
}
</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>