<template>
  <div v-if="show">
    <el-dialog v-model="show" width="80%" title="查看详情">
      <div>
        <el-form
          :model="queryParams" size="small" label-position="top" :inline="true"
          label-width="auto"
        >
          <el-form-item label="姓名" prop="name">
            <el-input v-model="queryParams.name" style="width: 200px;" />
          </el-form-item>
          <el-form-item label="证件号码" prop="idcCode">
            <el-input v-model="queryParams.idcCode" placeholder="请输入" style="width: 250px;" />
          </el-form-item>
          <el-form-item label="&nbsp;">
            <el-button type="primary" @click="selectFN"> 查询</el-button>
            <el-button type="" @click="reset"> 重置</el-button>
            <el-button type="warning" @click="handeData">导出</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div v-if="showSubmit">
        <el-button v-if="!showButton" type="primary" @click="handeSubmit">一键再确认</el-button>
        <el-button v-else type="warning" @click="handeWithdraw">一键撤回</el-button>
      </div>
      <br>

      <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="name"
          min-width="80"
        />
        <el-table-column
          label="证件类型"
          align="center"
          min-width="80"
        >
          <template #default="props">
            <div>{{ idcFilter(props.row.idcType) }}</div>
          </template>
        </el-table-column>
        <el-table-column
          label="性别"
          align="center"
          min-width="80"
        >
          <template #default="{row}">
            {{ row.sex==1?'女':'男' }}
          </template>
        </el-table-column>
        <el-table-column
          label="证件号"
          align="center"
          prop="idcCode"
          min-width="170"
        />
        <el-table-column
          label="出生日期"
          align="center"
          min-width="100"
          :show-overflow-tooltip="true"
        >
          <template #default="scope">
            <div>{{ parseTime(scope.row.birth, '{y}-{m}-{d}') }}</div>
          </template>
        </el-table-column>
        <el-table-column
          label="段位"
          align="center"
          min-width="100"
          :show-overflow-tooltip="true"
        >
          <template #default="{row}">
            {{ szToHz(row.level) }}段
          </template>
        </el-table-column>
        <el-table-column
          label="添加时间"
          align="center"
          min-width="100"
          :show-overflow-tooltip="true"
        >
          <template #default="scope">
            <div>{{ parseTime(scope.row.passDate, '{y}-{m}-{d}') }}</div>
          </template>
        </el-table-column>
        <el-table-column
          label="状态"
          align="center"
          min-width="100"
          :show-overflow-tooltip="true"
        >
          <template #default="{row}">
            {{ row.status }}
          </template>
        </el-table-column>
        <!--        <el-table-column-->
        <!--          label="附件"-->
        <!--          align="center"-->
        <!--          width="140"-->
        <!--        >-->
        <!--          <template #default="{row}">-->
        <!--            <el-image-->
        <!--              style="width: 100px;"-->
        <!--              :src="fillImgUrl(row.fileUrl)"-->
        <!--              :preview-src-list="[fillImgUrl(row.fileUrl)]"-->
        <!--              :preview-teleported="true"-->
        <!--            />-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <el-table-column
          v-if="showSubmit"
          label="操作"
          align="center"
          fixed="right"
          class-name="small-padding"
          width="200"
        >
          <template #default="scope">
            <el-button v-if="scope.row.status=='生效中'" type="danger" @click="handleDelete(scope.row)">撤回</el-button>
            <el-button v-else color="#13B5B1" style="--el-color-black:#fff;" @click="handleSubmit(scope.row)">再确认</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-link v-show="false" ref="linkRef" :href="fillImgUrl(url)" :underline="false" target="_blank" />
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, nextTick } from 'vue'
import { getCurrentInstance } from '@vue/runtime-core'
import { listApi, voidDuanInfo, effectDuanInfo, effectDuanInfoRang, voidDuanInfoRange } from '@/api/exam/addDuan'

import { idcFilter, szToHz } from '/@/utils/ruoyi'
const show = ref(false)
const list = ref([])
const queryParams = ref({})
const loading = ref(false)
const total = ref(0)
const url = ref()
const showButton = ref(false)
const showSubmit = ref(false)
const { proxy } = getCurrentInstance()
function open(row, params) {
  queryParams.value = {
    pageNum: 1,
    pageSize: 9999,
    rangeId: row.id
  }
  show.value = true
  showSubmit.value = params
  getList()
}

async function getList() {
  loading.value = true
  const res = await listApi(queryParams.value)
  list.value = res.rows
  total.value = res.total
  showButton.value = list.value.some(v => v.status == '生效中')
  loading.value = false
}

function selectFN() {
  queryParams.value.pageNum = 1
  getList()
}

function reset() {
  queryParams.value.name = null
  queryParams.value.idcCode = null
  getList()
}

async function handeSubmit() {
  await proxy.$modal.confirm('是否再次全部确认？')
  await effectDuanInfoRang(queryParams.value.rangeId)
  await getList()
  await proxy.$modal.msgSuccess('操作成功！')
}

async function handleDelete(row) {
  await proxy.$modal.confirm('是否确认撤回姓名为"' + row.name + '"的数据项？')
  await voidDuanInfo({ ids: row.id })
  await proxy.$modal.msgSuccess('操作成功！')
  await getList()
}

async function handeWithdraw() {
  await proxy.$modal.confirm('是否确认全部撤回？')
  await voidDuanInfoRange({ ids: queryParams.value.rangeId })
  await getList()
  await proxy.$modal.msgSuccess('操作成功！')
}

async function handleSubmit(row) {
  await effectDuanInfo(row.id)
  await getList()
  await proxy.$modal.msgSuccess('操作成功！')
}

function handeData() {
  proxy.download('/system/duanInput/export', {
    ...queryParams.value
  }, `添加段位${new Date().getTime()}.xlsx`)
}

defineExpose({
  open
})

</script>

<style lang="scss" scoped>
.con{
  padding: 2px;
  border-radius: 2px;
  //text-align: center;
  span{
    margin-left: 5px;
  }
}

.bg{
  color: #d51515;
}
</style>