<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-control-container">
        <header class="disaster-control__header">
          <el-button type="primary" class="disaster-control__header-button" :icon="Plus">创建灾害处置单</el-button>
          <Search />
        </header>
        <BasicTable
          :table-config="tableConfig"
          :table-data="tableData"
          @update:pageSize="handleSizeChange"
          @update:pageNumber="handleCurrentChange"
        >
          <template #disasterMaterial="scope">
            <div class="disaster-material--div">
              <div class="disaster-material--div__item" v-for="item in scope.row.disasterMaterial" :key="item.id">
                <img :src="FILE_TYPE_ICON[item.type as keyof typeof FILE_TYPE_ICON]" alt="" />
                <el-tooltip :content="item.name" placement="bottom" effect="light">
                  <span>{{ item.name }}</span>
                </el-tooltip>
                <img :src="DownLoadIcon" alt="" class="download-icon" />
              </div>
            </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 #action="scope">
            <ActionButton text="编辑" v-if="scope.row.activeStatus === ACTIVE_STATUS.NOT_EFFECTIVE" />
            <ActionButton text="查看" />
            <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: '确定要删除?',
              }"
            />
          </template>
        </BasicTable>
      </div>
    </main>
  </div>
</template>

<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import { Plus } from '@element-plus/icons-vue';
  import DownLoadIcon from '@/assets/svg/download.svg';
  import Search from './src/components/Search.vue';
  import BasicTable from '@/components/BasicTable.vue';
  import ActionButton from '@/components/ActionButton.vue';
  import type { TableColumnProps } from '@/types/basic-table';
  import useTableConfig from '@/hooks/useTableConfigHook';
  import { getDisasterControlTableData } from '@/api/disaster-control';
  import type { DisasterControlTableDataResponse } from '@/types/disaster-control';
  import { ACTIVE_STATUS, ACTIVE_STATUS_COLOR, ACTIVE_STATUS_MAP, FILE_TYPE_ICON } from '@/views/disaster/constant';
  const tableData = ref<DisasterControlTableDataResponse[]>([]);
  const columns: TableColumnProps[] = [
    {
      prop: 'disasterType',
      label: '灾害类型',
      align: 'center',
    },
    {
      prop: 'disasterLevel',
      label: '灾害等级',
      align: 'center',
    },
    {
      prop: 'startTime',
      label: '开始时间',
      align: 'center',
      width: '200cpx',
    },
    {
      prop: 'endTime',
      label: '结束时间',
      align: 'center',
      width: '200cpx',
    },
    {
      prop: 'disasterMaterial',
      label: '处置材料',
      align: 'center',
      slot: 'disasterMaterial',
      width: '200cpx',
    },
    {
      prop: 'shouldCompleteTime',
      label: '应完成时间',
      align: 'center',
      width: '200cpx',
    },
    {
      prop: 'activeStatus',
      label: '生效状态',
      align: 'center',
      slot: 'activeStatus',
      width: '120cpx',
    },
    {
      prop: 'action',
      label: '操作',
      align: 'center',
      slot: 'action',
      fixed: 'right',
      width: '250cpx',
    },
  ];
  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 getDisasterControlTableData();
    tableData.value = res;
    pagination.total = tableData.value.length;
    tableConfig.loading = false;
  };
  onMounted(() => {
    getTableData();
  });
</script>

<style lang="scss" scoped>
  @use '../style/disaster.scss' as *;
  .disaster-control__header-button {
    font-size: 14cpx;
    margin-bottom: 20cpx;
  }
  .disaster-control-container {
    display: flex;
    flex-direction: column;
    gap: 20cpx;
  }
  .disaster-material--div {
    display: flex;
    flex-direction: column;
    gap: 10cpx;
    img {
      width: 15cpx;
      height: 15cpx;
    }
    &__item {
      @include flex-center;
      gap: 5cpx;
      span {
        width: 150cpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
  .download-icon {
    cursor: pointer;
  }
</style>
