<template>
  <div class="disaster-precaution">
    <header class="disaster-precaution__header">
      <Search type="done" />
    </header>
    <BasicTable
      :table-config="tableConfig"
      :table-data="tableData"
      @update:pageSize="handleSizeChange"
      @update:pageNumber="handleCurrentChange"
    >
      <template #taskName="scope">
        <div class="task-name--div">
          <el-tooltip :content="scope.row.taskName" placement="top" effect="light">
            <span>{{ scope.row.taskName }}</span>
          </el-tooltip>
          <img :src="OverdueIcon" alt="overdue" v-if="scope.row.isOverdue === OVERDUE_STATUS.OVERDUE" />
        </div>
      </template>
      <template #activeStatus="scope">
        <div class="active-status--div">
          <div
            class="dot"
            :style="{ backgroundColor: ACTIVE_STATUS_COLOR[scope.row.activeStatus as ACTIVE_STATUS] }"
          ></div>
          <span>{{ ACTIVE_STATUS_MAP[scope.row.activeStatus] }}</span>
        </div>
      </template>
      <template #taskStage="scope">
        <span>{{ TASK_STAGE_MAP[scope.row.taskStage] }}</span>
      </template>
      <template #action="scope">
        <ActionButton text="查看" />
        <ActionButton
          text="撤回"
          :popconfirm="{
            title: '是否撤回提交?',
          }"
          @confirm="handleWithdraw(scope.row)"
          v-if="scope.row.taskStage !== TASK_STAGE.COMPLETED && scope.row.activeStatus === ACTIVE_STATUS.ACTIVE"
        />
      </template>
    </BasicTable>
  </div>
</template>

<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import BasicTable from '@/components/BasicTable.vue';
  import ActionButton from '@/components/ActionButton.vue';
  import Search from './Search.vue';
  import type { TableColumnProps } from '@/types/basic-table';
  import useTableConfig from '@/hooks/useTableConfigHook';
  import { TASK_STAGE, TASK_STAGE_MAP, OVERDUE_STATUS } from '../constants/task-execution';
  import { ACTIVE_STATUS, ACTIVE_STATUS_MAP, ACTIVE_STATUS_COLOR } from '@/views/disaster/constant';
  import type { DoneTaskExecutionTableDataResponse } from '@/types/task-execution/tableData';
  import { getTaskExecutionDoneTableData } from '@/api/task-execution/tableData';
  const tableData = ref<DoneTaskExecutionTableDataResponse[]>([]);
  import OverdueIcon from '@/assets/svg/overdue.svg';
  const columns: TableColumnProps[] = [
    {
      prop: 'taskName',
      label: '任务名称',
      align: 'center',
      slot: 'taskName',
    },
    {
      prop: 'selfCheckUnit',
      label: '被检查（自查）单位',
      align: 'center',
    },
    {
      prop: 'taskType',
      label: '检查类型',
      align: 'center',
    },
    {
      prop: 'shouldCompleteTime',
      label: '应完成时间',
      align: 'center',
    },
    {
      prop: 'submitTime',
      label: '提交时间',
      align: 'center',
    },
    {
      prop: 'activeStatus',
      label: '生效状态',
      align: 'center',
      slot: 'activeStatus',
    },
    {
      prop: 'taskStage',
      label: '任务阶段',
      align: 'center',
      slot: 'taskStage',
    },
    {
      prop: 'action',
      label: '操作',
      align: 'center',
      slot: 'action',
      width: '130cpx',
      fixed: 'right',
    },
  ];
  const options = {
    emptyText: '暂无数据',
    height: '60vh',
    loading: true,
    stripe: true,
  };
  const { tableConfig, pagination } = useTableConfig(columns, options);
  const handleSizeChange = (value: number) => {
    pagination.pageSize = value;
    tableConfig.loading = true;
    getTableData();
  };
  const handleCurrentChange = (value: number) => {
    pagination.pageNumber = value;
    tableConfig.loading = true;
    getTableData();
  };
  const getTableData = async () => {
    const res = await getTaskExecutionDoneTableData();
    tableData.value = res;
    pagination.total = tableData.value.length;
    tableConfig.loading = false;
  };
  const handleWithdraw = (row: any) => {
    console.log(row);
  };
  onMounted(() => {
    getTableData();
  });
</script>

<style lang="scss" scoped>
  @use '../style/task-execution.scss' as *;
</style>
