<template>
  <div v-if="preventInspectData?.totalRow === 0" class="empty-style">
    <img class="empty-img" src="@/assets/images/empty@1X.png" alt="" />
    <span>暂无数据</span>
  </div>
  <div v-else class="disaster-check-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="[{ success: item.label === '通过任务' }, { warning: 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="inspectType" label="检查类型">
          <template #default="{ row }">
            {{ checkTaskTypeDic.find((item) => item.itemSort === row.inspectType)?.itemValue }}
          </template>
        </el-table-column>
        <el-table-column prop="deptName" label="被检查单位" />
        <el-table-column prop="updatedAt" label="完成时间">
          <template #default="{ row }">
            {{ row.taskState === TaskStatus.Completed ? row.updatedAt : '--' }}
          </template>
        </el-table-column>
        <el-table-column prop="taskState" label="完成情况">
          <template #default="{ row }">
            <span :class="row.taskState === TaskStatus.Completed ? 'complete' : 'checking'">
              {{ getTaskStatusText(row.taskState) }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="hasHazard" label="检查情况" fixed="right">
          <template #default="{ row }">
            <span :class="row.hasHazard ? 'trouble' : 'no-trouble'">
              {{ booleanToDisplay(row.hasHazard) }}
            </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 task from '@/assets/images/disaster-overview/task.png';
  import signTask from '@/assets/images/disaster-overview/sign-task.png';
  import successTask from '@/assets/images/disaster-overview/success-task.png';
  import warningTask from '@/assets/images/disaster-overview/warning-task.png';
  import SimplePagination from '@/components/Pagination/SimplePagination.vue';
  import { TaskStatus, getTaskStatusText, booleanToDisplay } from './constant';
  import { SysDictDataDetail, queryDictTypeDetail } from '@/api/dict';
  import {
    QueryCheckingListsParams,
    TaskRecord,
    PreventInspectInfoRes,
    getPreventInspect,
  } from '@/api/disaster-overview';

  const loading = ref(true);
  const checkTaskTypeDic = ref<SysDictDataDetail[]>([]);
  const queryCheckingListsParams = ref<QueryCheckingListsParams>({
    pageNumber: 1,
    pageSize: 3,
  });
  const totalPage = ref<number>();
  const preventInspectData = ref<PreventInspectInfoRes>();
  const tableData = ref<TaskRecord[]>([]);
  const sumData = computed(() => {
    return [
      {
        icon: task,
        label: '总任务',
        count: preventInspectData.value?.totalTask,
      },
      {
        icon: task,
        label: '已提交任务',
        count: preventInspectData.value?.submittedTask,
      },
      {
        icon: signTask,
        label: '已签字任务',
        count: preventInspectData.value?.signedTask,
      },
      {
        icon: successTask,
        label: '通过任务',
        count: preventInspectData.value?.passTask,
      },
      {
        icon: warningTask,
        label: '隐患任务',
        count: preventInspectData.value?.dangerTask,
      },
    ];
  });

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

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

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

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

  const getData = async () => {
    loading.value = true;
    await getPreventInspect(queryCheckingListsParams.value).then((res) => {
      preventInspectData.value = res;
      tableData.value = res.taskRecord;
      totalPage.value = res.totalPage;
    });
    loading.value = false;
  };

  onMounted(async () => {
    getData();
    await queryDictTypeDetail('check_task_type').then((res) => {
      checkTaskTypeDic.value = res.sysDictDataList;
    });
  });
</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-check-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;
      }

      .success {
        color: #52c41a;
      }

      .warning {
        color: #faad14;
      }
    }
  }

  .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);
      }
    }

    .complete::before {
      content: '';
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #52c41a;
      margin-right: 8px;
      position: relative;
      bottom: 2.5px;
    }

    .checking::before {
      content: '';
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #1777ff;
      margin-right: 8px;
      position: relative;
      bottom: 2.5px;
    }

    .trouble {
      color: #ff4d4f;
    }

    .no-trouble {
      color: #52c41a;
    }
  }
</style>
