<template>
  <div class="safety-platform-container">
    <header class="safety-platform-container__header">
      <div class="breadcrumb-title"> 演练会签 </div>
    </header>
    <main class="safety-platform-container__main">
      <div class="search-table-container">
        <BasicSearch
          :search-data="searchData"
          :search-config="DRILL_SIGN_LIST_SEARCH_CONFIG"
          @update:searchData="handleSearch"
        >
          <template #drillScope>
            <el-select v-model="searchData.drillScope" placeholder="请选择演练规模" filterable>
              <el-option
                v-for="item in drillScopeDice"
                :key="item.itemCode"
                :label="item.itemValue"
                :value="item.itemCode"
              />
            </el-select>
          </template>
          <template #drillTime>
            <el-date-picker
              v-model="searchData.drillTime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
            />
          </template>
        </BasicSearch>
        <BasicTable
          :table-data="tableData"
          :table-config="tableConfig"
          @update:pageSize="handleSizeChange"
          @update:pageNumber="handleCurrentChange"
        >
          <template #signType="scope">
            <span>{{ DRILI_SIGN_TYPE_MAP[scope.row.signType] }}</span>
          </template>
          <template #drillScope="scope">
            <span>{{ getDrillScope(scope.row.drillScope) }}</span>
          </template>
          <template #confirmStatus="scope">
            <span>{{ CONFIRM_STATUS_MAP[scope.row.confirmStatus] }}</span>
          </template>
          <template #action="scope">
            <ActionButton
              text="查看"
              @click="handleView(scope.row.drillPlanId, scope.row.signType, scope.row.confirmStatus)"
            />
          </template>
        </BasicTable>
      </div>
    </main>
  </div>
</template>

<script setup lang="ts">
  import { useRouter } from 'vue-router';
  import { onMounted, reactive, ref } from 'vue';
  import BasicSearch from '@/components/BasicSearch.vue';
  import BasicTable from '@/components/BasicTable.vue';
  import ActionButton from '@/components/ActionButton.vue';
  import { useEmergencyDrillHook } from './hook';
  import useTableConfig from '@/hooks/useTableConfigHook';
  import type { QueryPageRequest } from '@/types/basic-query';
  import type { DrillSignSearch, DrillSignlistQuery, DrillSignListResponse } from '@/types/emergency-drill';
  import { getDrillSignList } from '@/api/emergency-drill/emergency-drill';
  import {
    DRILL_SIGN_LIST_SEARCH_CONFIG,
    DRILL_SIGN_LIST_TABLE_OPTIONS,
    DRILI_SIGN_LIST_TABLE_COLUMNS,
  } from './configs/sign';
  import { DRILI_SIGN_TYPE_MAP, CONFIRM_STATUS_MAP } from './constants';
  import dayjs from 'dayjs';

  const { drillScopeDice, getDrillScopeDict, getDrillScope } = useEmergencyDrillHook();
  const { tableConfig, pagination } = useTableConfig(DRILI_SIGN_LIST_TABLE_COLUMNS, DRILL_SIGN_LIST_TABLE_OPTIONS);
  const router = useRouter();
  const searchData = reactive<DrillSignSearch>({
    signType: null,
    drillScope: null,
    drillContent: null,
    drillTime: null,
  });
  const tableData = ref<DrillSignListResponse[]>([]);
  let drillSignListQuery: QueryPageRequest<DrillSignlistQuery> = {
    pageNumber: pagination.pageNumber,
    pageSize: pagination.pageSize,
    queryParam: {},
  };
  const handleSearch = () => {
    drillSignListQuery.queryParam = {};
    if (searchData.signType) {
      drillSignListQuery.queryParam.signType = searchData.signType;
    }
    if (searchData.drillScope) {
      drillSignListQuery.queryParam.drillScope = searchData.drillScope;
    }
    if (searchData.drillContent) {
      drillSignListQuery.queryParam.drillContent = searchData.drillContent;
    }
    if (searchData.drillTime) {
      const [startDate, endDate] = searchData.drillTime;
      drillSignListQuery.queryParam.drillTimeStart = dayjs(startDate).format('YYYY-MM-DD 00:00:00');
      drillSignListQuery.queryParam.drillTimeEnd = dayjs(endDate).format('YYYY-MM-DD 23:59:59');
    } else {
      drillSignListQuery.queryParam.drillTimeStart = null;
      drillSignListQuery.queryParam.drillTimeEnd = null;
    }
    getTableData();
  };
  const getTableData = async () => {
    tableConfig.loading = true;
    const res = await getDrillSignList(drillSignListQuery);
    tableData.value = res.records;
    pagination.total = res.totalRow;
    tableConfig.loading = false;
  };
  const handleSizeChange = (value: number) => {
    pagination.pageSize = value;
    drillSignListQuery.pageSize = value;
    getTableData();
  };
  const handleCurrentChange = (value: number) => {
    pagination.pageNumber = value;
    drillSignListQuery.pageNumber = value;
    getTableData();
  };
  const handleView = (id: number, type: number, status: number) => {
    router.push({
      name: 'emergency-drill-sign-item',
      params: {
        id,
      },
      query: {
        type,
        status,
      },
    });
  };
  onMounted(() => {
    getDrillScopeDict();
    getTableData();
  });
</script>

<style scoped lang="scss">
  @use '@/styles/page-details-layout.scss' as *;
  @use '@/styles/page-main-layout.scss' as *;
</style>
