<template>
  <div v-if="disasterHandleData?.totalRow === 0" class="empty-style">
    <img class="empty-img" src="@/assets/images/empty@1X.png" alt="" />
    <span>暂无数据</span>
  </div>
  <div v-else class="disaster-done-list" v-loading="loading">
    <div class="sum-data">
      <div v-for="(item, index) in sumData" :key="index" class="sum-item">
        <img class="item-img" :src="item.icon" alt="" />
        <span class="item-label">{{ item.label }}</span>
        <span
          class="item-count"
          :class="[{ broken: item.label === '有损失记录' }, { complete: item.label === '处置完成' }]"
          >{{ item.count }}</span
        >
      </div>
    </div>
    <div class="table-data">
      <el-table
        :data="tableData"
        show-overflow-tooltip
        :header-row-class-name="handleHeaderRowClassName"
        :row-class-name="handleRowClassName"
        :header-cell-style="getRowClass"
        width="100%"
        height="100%"
      >
        <el-table-column prop="affectedItems" label="受灾物品" />
        <el-table-column prop="deptName" label="损失部门" />
        <el-table-column prop="affectedLocation" label="受灾地点" />
        <el-table-column prop="fixStatus" label="处置情况">
          <template #default="{ row }">
            <span
              :class="[
                {
                  done: getFixStatusText(row.fixStatus) === '已完成',
                },
                {
                  disposal: getFixStatusText(row.fixStatus) === '处置中',
                },
                {
                  closed: getFixStatusText(row.fixStatus) === '暂时关闭',
                },
              ]"
            >
              {{ getFixStatusText(row.fixStatus) }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="fixerName" label="整改人">
          <template #default="{ row }">
            <span>{{ row.fixerName }}({{ row.fixerStaffNo }})</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <SimplePagination :totalPages="totalPage" @update:current-page="getCurPageData" />
    </div>
  </div>
</template>

<script setup lang="ts">
  import { computed, onMounted, ref } from 'vue';
  import signTask from '@/assets/images/disaster-overview/sign-task.png';
  import brokenObject from '@/assets/images/disaster-overview/broken-object.png';
  import completeTask from '@/assets/images/disaster-overview/complete-task.png';
  import SimplePagination from '@/components/Pagination/SimplePagination.vue';
  import { getFixStatusText } from './constant';
  import {
    QueryCheckingListsParams,
    DisasterHandleInfoRecord,
    QueryDisasterHandleOverviewRes,
    getDisasterHandleOverview,
  } from '@/api/disaster-overview';

  const loading = ref(true);
  const queryHandleListsParams = ref<QueryCheckingListsParams>({
    pageNumber: 1,
    pageSize: 3,
  });
  const totalPage = ref<number>();
  const disasterHandleData = ref<QueryDisasterHandleOverviewRes>();
  const tableData = ref<DisasterHandleInfoRecord[]>([]);
  const sumData = computed(() => {
    return [
      {
        icon: signTask,
        label: '应上报部门',
        count: disasterHandleData.value?.dueReportDeptCount,
      },
      {
        icon: signTask,
        label: '已上报部门',
        count: disasterHandleData.value?.completeReportDeptCount,
      },
      {
        icon: signTask,
        label: '存在损失部门',
        count: disasterHandleData.value?.existLossDeptCount,
      },
      {
        icon: brokenObject,
        label: '有损失记录',
        count: disasterHandleData.value?.lossRecordCount,
      },
      {
        icon: completeTask,
        label: '处置完成',
        count: disasterHandleData.value?.completeHandleCount,
      },
    ];
  });

  const handleHeaderRowClassName = () => {
    return 'custom-header-row';
  };

  const handleRowClassName = () => {
    return 'custom-row';
  };

  function getRowClass() {
    return { 'background-color': '#fafafa' };
  }

  const getCurPageData = (page: number) => {
    queryHandleListsParams.value.pageNumber = page;
    getData();
  };

  const getData = async () => {
    loading.value = true;
    await getDisasterHandleOverview(queryHandleListsParams.value).then((res) => {
      disasterHandleData.value = res;
      tableData.value = res.disasterHandleInfoList;
      totalPage.value = res.totalPage;
    });
    loading.value = false;
  };

  onMounted(async () => {
    await getData();
  });
</script>

<style scoped lang="scss">
  .empty-style {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: rgba(0, 0, 0, 0.5);

    .empty-img {
      width: 50%;
      object-fit: contain;
    }
  }

  .disaster-done-list {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
  }

  .sum-data {
    display: flex;
    flex-wrap: wrap;

    .sum-item {
      height: 38px;
      padding: 8px 12px;
      margin: 0 5px 5px 0;
      display: flex;
      align-items: center;
      background: #fafafa;
      border-radius: 4px;
      border: 1px solid #eaeaea;

      .item-img {
        width: 12px;
        margin-right: 6px;
      }

      .item-label {
        font-weight: 500;
        font-size: 12px;
        color: #606266;
        margin-right: 15px;
      }

      .item-count {
        font-weight: 500;
        font-size: 16px;
        color: #1777ff;
      }

      .broken {
        color: #ff4d4f;
      }

      .complete {
        color: #52c41a;
      }
    }
  }

  .table-data {
    margin: 10px 0;
    overflow: auto;

    :deep(.el-table) {
      .custom-header-row {
        font-weight: 500;
        font-size: 14px;
        color: rgba(0, 0, 0, 0.85);
      }

      .custom-row {
        font-weight: 400;
        font-size: 14px;
        color: rgba(0, 0, 0, 0.65);
      }
    }

    .done::before,
    .disposal::before,
    .closed::before {
      content: '';
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      margin-right: 8px;
      position: relative;
      bottom: 2.5px;
    }

    .done::before {
      background: #52c41a;
    }

    .disposal::before {
      background: #1777ff;
    }

    .closed::before {
      background: #ff4d4f;
    }
  }
</style>
