<script setup name="unitSelfEvaluation">
import { onMounted, reactive, ref, h } from 'vue'
import { selfProList } from '@/http/apis/performanceEvaluation/slefEvaluation'
import { useRoute } from 'vue-router'
const tableListRef = ref(),
  column = reactive([
    {
      label: '序号',
      type: 'index',
      width: '80'
    },
    {
      label: '项目名称',
      key: 'projectName',
      prop: 'projectName',
      minWidth: '150',
      showOverflowTooltip: true
    },
    {
      label: '申报单位',
      key: 'buildOrgName',
      prop: 'buildOrgName',
      minWidth: '80',
      showOverflowTooltip: true
    },
    {
      label: '项目类型',
      key: 'projectTypeName',
      prop: 'projectTypeName',
      width: '100'
    },
    {
      label: '预算年度',
      key: 'projectYear',
      prop: 'projectYear',
      width: '80'
    },
    {
      label: '自评总分',
      key: 'selfAppraisalTotalScore',
      prop: 'selfAppraisalTotalScore',
      width: '80',
      render: row => h('span', row.selfAppraisalScoreTime ? row.selfAppraisalTotalScore : '-')
    },
    {
      label: '打分时间',
      key: 'selfAppraisalScoreTime',
      prop: 'selfAppraisalScoreTime',
      width: '150',
      render: row => h('span', row.selfAppraisalScoreTime || '-')
    },
    {
      label: '状态',
      key: 'status',
      slot: 'status',
      width: 120
    },
    {
      label: '操作',
      slot: 'action',
      width: 130,
      fixed: 'right'
    }
  ]),
  data = ref([]),
  total = ref(0),
  searchForm = reactive({
    projectName: undefined
  }),
  getTableData = async (pageParams = tableListRef.value.pageParams) => {
    const res = await selfProList(activeName.value, {
      ...pageParams,
      ...searchForm
    })
    data.value = res.data.records
    total.value = res.data.total
  },
  search = () => {
    tableListRef.value.pageParams.pageNumber = 1
    getTableData()
  },
  reset = () => {
    searchForm.projectName = undefined
    tableListRef.value.pageParams.pageNumber = 1
    tableListRef.value.pageParams.pageSize = 10
    getTableData()
  },
  activeName = ref('1'),
  changeTab = (val) => {
    activeName.value = val
    reset()
  },
  route = useRoute()
onMounted(() => {
  activeName.value = route.query?.tab || '1'
  getTableData()
})
</script>

<template>
  <div>
    <el-card class="search mb-16">
      <el-form label-suffix=":" :model="searchForm" size="small">
        <el-row :gutter="16">
          <el-col :span="8">
            <el-form-item label="项目名称">
              <el-input
                v-model="searchForm.projectName"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item class="btn">
              <el-button type="primary" @click="search">查询</el-button>
              <el-button @click="reset">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card shadow="never" class="tab-card">
      <template #header>
        <el-tabs v-model="activeName" @tab-change="changeTab">
          <el-tab-pane label="待评价" name="1" />
          <el-tab-pane label="已评价待确认" name="2" />
          <el-tab-pane label="已确认" name="3" />
        </el-tabs>
      </template>
      <table-list
        ref="tableListRef"
        :column="column"
        :data="data"
        :total="total"
        @get-table-data="getTableData"
      >
        <template #status="{scope}">
          <div v-if="scope.row?.status" class="flex items-center">
            <span :class="`dot mr-4 ${[1,2].includes(scope.row?.status) ? 'bg-warning' : scope.row.status === 3 ? 'bg-success' : 'bg-danger'}`"></span>
            <p :class="`${[1,2].includes(scope.row?.status) ? 'text-warning' : scope.row.status === 3 ? 'text-success' : 'text-danger'}`">
              {{ scope.row.statusName }}
            </p>
          </div>
          <span v-else></span>
        </template>
        <template #action="{scope}">
          <a v-if="activeName==='1'&&[1,2].includes(scope.row.status)" @click="$router.push({name:'selfGiveScore',query:{projectCode:scope.row.projectCode,projectId:scope.row.projectId,appraisalId:scope.row.appraisalId,status:scope.row.status}})">{{ scope.row.draftId?'继续自评':'自评打分' }}</a>
          <a v-else-if="[4].includes(scope.row.status)" @click="$router.push({name:'selfGiveScore',query:{projectCode:scope.row.projectCode,projectId:scope.row.projectId,appraisalId:scope.row.appraisalId,status:scope.row.status}})">重新自评</a>
          <a v-if="activeName!=='1'" @click="$router.push({name:'selfScoreDetail',query:{projectCode:scope.row.projectCode,projectId:scope.row.projectId,appraisalId:scope.row.appraisalId,instanceId: scope.row.instCode}})">详情</a>
          <!--          <a @click="$router.push({name:'selfGiveScore',query:{projectCode:scope.row.projectCode,projectId:scope.row.projectId,appraisalId:scope.row.appraisalId}})">重新自评</a>-->
        </template>
      </table-list>
    </el-card>
  </div>
</template>
