<template>
  <div class="disaster-precaution-container">
    <header class="disaster-precaution-container__header">
      <span class="disaster-precaution-container__title">检查任务管理</span>
    </header>
    <main class="disaster-precaution-container__main">
      <div class="disaster-precaution">
        <header class="disaster-precaution__header">
          <el-button type="primary" class="disaster-precaution__header--button" :icon="Plus" @click="handleCreateTask">
            创建检查任务单
          </el-button>
          <Search
            :searchConfig="TASK_MANAGEMENT_SEARCH_CONFIG"
            :searchData="searchData"
            @update:searchData="handleSearch"
          />
          <div
            style="width: 100%; height: 20px; background-color: red; margin-top: 20px"
            v-show="selectedIds.length > 0"
          >
            <span>{{ selectedIds.length }}项</span>
          </div>
        </header>
        <BasicTable
          :table-config="tableConfig"
          :table-data="tableData"
          @update:pageSize="handleSizeChange"
          @update:pageNumber="handleCurrentChange"
          @update:selectedIds="handleSelectedIds"
        >
          <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 #taskType="scope">
            <span>{{ TASK_TYPE_MAP[scope.row.taskType] }}</span>
          </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="编辑"
              v-if="scope.row.activeStatus === ACTIVE_STATUS.NOT_EFFECTIVE"
              @click="handleEditTask(scope.row.id)"
            />
            <ActionButton text="查看" @click="handleViewTask(scope.row.id)" />
            <ActionButton
              text="发布"
              :popconfirm="{
                title: '确定要发布?',
              }"
              v-if="scope.row.activeStatus === ACTIVE_STATUS.NOT_EFFECTIVE"
            />
            <ActionButton
              text="撤回"
              :popconfirm="{
                title: '确定要撤回?',
              }"
              v-else-if="scope.row.activeStatus === ACTIVE_STATUS.ACTIVE"
            />
            <ActionButton
              text="删除"
              :popconfirm="{
                title: '确定要删除?',
              }"
              v-if="scope.row.activeStatus === ACTIVE_STATUS.NOT_EFFECTIVE"
            />
          </template>
        </BasicTable>
      </div>
    </main>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted, reactive } from 'vue';
  import { Plus } from '@element-plus/icons-vue';
  import BasicTable from '@/components/BasicTable.vue';
  import ActionButton from '@/components/ActionButton.vue';
  import Search from '@/views/disaster/components/Search.vue';
  import useTableConfig from '@/hooks/useTableConfigHook';
  import { getTaskManagementTableData } from '@/api/task-execution/tableData';
  import type { TaskExecutionTableData } from '@/types/task-execution/tableData';
  import OverdueIcon from '@/assets/svg/overdue.svg';
  import { OVERDUE_STATUS, TASK_TYPE_MAP, TASK_STAGE_MAP } from './src/constants/task-execution';
  import { ACTIVE_STATUS, ACTIVE_STATUS_COLOR, ACTIVE_STATUS_MAP } from '@/views/disaster/constant';
  import { TABLE_OPTIONS, TASK_MANAGEMENT_TABLE_COLUMNS, TASK_MANAGEMENT_SEARCH_CONFIG } from './src/config';
  import { useRouter } from 'vue-router';
  const router = useRouter();
  const searchData = reactive({
    taskType: '',
    activeStatus: '',
    taskStage: '',
  });
  const handleSearch = (data: any) => {
    console.log(data);
  };
  const selectedIds = ref<number[]>([]);
  const handleSelectedIds = (ids: number[]) => {
    selectedIds.value = ids;
    console.log(ids);
  };
  const defaultPath = '/disaster-prevention/disaster-precaution/task-item';
  const handleCreateTask = () => {
    router.push({
      name: defaultPath,
      query: {
        operate: 'create',
      },
    });
  };
  const handleEditTask = (id: number) => {
    router.push({
      name: defaultPath,
      query: { operate: 'edit', id },
    });
  };
  const handleViewTask = (id: number) => {
    router.push({
      name: defaultPath,
      query: { id },
    });
  };
  const tableData = ref<TaskExecutionTableData[]>([]);
  const { tableConfig, pagination } = useTableConfig(TASK_MANAGEMENT_TABLE_COLUMNS, TABLE_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 getTaskManagementTableData();
    tableData.value = res;
    pagination.total = tableData.value.length;
    tableConfig.loading = false;
  };
  onMounted(() => {
    getTableData();
  });
</script>

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