<script name="selfEvaluationSure" setup>

import { h, onMounted, ref } from 'vue'
import { list } from '@/http/apis/performanceEvaluation/selfEvaluationSure'
import { useRouter } from 'vue-router'

const activeName = ref('1'),
  tabChange = (val) => {
    activeName.value = val
    tableListRef.value.pageParams.pageNumber = 1
    getTableData()
  },
  column = [
    {
      label: '序号',
      type: 'index',
      width: '60'
    },
    {
      label: '评价计划',
      key: 'appraisalName',
      prop: 'appraisalName',
      minWidth: 180,
      showOverflowTooltip: true
    },
    {
      label: '项目',
      key: 'projectName',
      prop: 'projectName',
      minWidth: 200,
      showOverflowTooltip: true
    },
    {
      label: '项目类型',
      key: 'projectTypeName',
      prop: 'projectTypeName',
      width: 80
    },
    {
      label: '预算年度',
      key: 'projectYear',
      prop: 'projectYear',
      width: 80
    },
    {
      label: '自评总分',
      key: 'totalScore',
      prop: 'totalScore',
      width: 80
    },
    {
      label: '打分时间',
      key: 'processLaunchTime',
      prop: 'processLaunchTime',
      width: 180
    },
    {
      label: '操作',
      slot: 'action',
      fixed: 'right',
      width: 80
    }
  ],
  column1 = [
    {
      label: '序号',
      type: 'index',
      width: '60'
    },
    {
      label: '评价计划',
      key: 'appraisalName',
      prop: 'appraisalName',
      minWidth: 180,
      showOverflowTooltip: true
    },
    {
      label: '项目',
      key: 'projectName',
      prop: 'projectName',
      minWidth: 200,
      showOverflowTooltip: true
    },
    {
      label: '项目类型',
      key: 'projectTypeName',
      prop: 'projectTypeName',
      width: 80
    },
    {
      label: '预算年度',
      key: 'projectYear',
      prop: 'projectYear',
      width: 80
    },
    {
      label: '自评总分',
      key: 'totalScore',
      prop: 'totalScore',
      width: 80
    },
    {
      label: '打分时间',
      key: 'processLaunchTime',
      prop: 'processLaunchTime',
      width: 180
    },
    {
      label: '审核状态',
      key: 'processStatusName',
      prop: 'processStatusName',
      width: 180,
      render: row => [
        h('span', {
          class: [
            'dot mr-4',
            `${row.processStatusName === '审核通过' ? 'bg-success' : row.processStatusName === '审核中' ? 'bg-warning' : 'bg-danger'}`
          ]
        }),
        h(
          'span',
          {
            class: row.processStatusName === '审核通过' ? 'text-success' : row.processStatusName === '审核中' ? 'text-warning' : 'text-danger'
          },
          row.processStatusName
        )]
    },
    {
      label: '审核时间',
      key: 'processHandleTime',
      prop: 'processHandleTime',
      width: 180
    },
    {
      label: '操作',
      slot: 'action',
      fixed: 'right',
      width: 80
    }
  ],
  tableListRef = ref(),
  total = ref(0),
  data = ref([]),
  getTableData = async (pageParams = tableListRef.value.pageParams) => {
    data.value = []
    const res = await list(activeName.value, {
      ...pageParams
    })
    data.value = res.data.records
    total.value = res.data.total
  },
  // 审核
  router = useRouter(),
  toAudit = (row) => {
    router.push({ name: 'selfScoreSureDetail', query: { appraisalId: row.appraisalId, projectId: row.projectId, projectCode: row.projectCode, instanceId: row.instCode, nodeId: row.nodeId, taskId: row.taskId }})
  },
  // 查看
  toView = (row) => {
    router.push({ name: 'selfScoreSureDetail', query: { appraisalId: row.appraisalId, projectId: row.projectId, projectCode: row.projectCode, instanceId: row.instCode, taskId: row.taskId }})
  }
onMounted(() => {
  getTableData()
})
</script>

<template>
  <el-card class="tab-card w-full">
    <template #header>
      <el-tabs v-model="activeName" @tab-change="tabChange">
        <el-tab-pane label="待审核" name="1" />
        <el-tab-pane label="审核记录" name="2" />
      </el-tabs>
    </template>
    <table-list
      ref="tableListRef"
      :column="activeName==='1'?column:column1"
      :data="data"
      :total="total"
      @get-table-data="getTableData"
    >
      <template #action="{scope}">
        <a v-if="activeName==='1'" @click="toAudit(scope.row)">审核</a>
        <a v-else @click="toView(scope.row)">查看</a>
      </template>
    </table-list>
  </el-card>
</template>
