<template>
  <div class="safety-platform-container">
    <header class="safety-platform-container__header">
      <span class="breadcrumb-title">灾后评估及重建</span>
    </header>
    <main class="safety-platform-container__main">
      <BasicTable
        :tableConfig="tableConfig"
        :tableData="tableData"
        @update:page-size="handleSizeChange"
        @update:page-number="handleCurrentChange"
      >
        <template #disasterAssessMaterials="scope">
          <div
            class="file-container--div"
            v-for="item in unformatAttachment(scope.row.disasterAssessMaterials)"
            :key="item.fileId"
          >
            <img
              class="file-container--div__icon"
              @click="previewOnline(item.fileUrl, item.fileType as keyof typeof FILE_TYPE_ICON)"
              :src="FILE_TYPE_ICON[item.fileType]"
            />
            <span
              class="file-container--div__name"
              @click="previewOnline(item.fileUrl, item.fileType as keyof typeof FILE_TYPE_ICON)"
              >{{ item.fileName }}</span
            >
            <img
              class="file-container--div__download"
              :src="DownloadIcon"
              @click="downloadFile(item.fileUrl, item.fileName)"
            />
          </div>
        </template>
        <template #disasterReconstructMaterials="scope">
          <div
            class="file-container--div"
            v-for="item in unformatAttachment(scope.row.disasterReconstructMaterials)"
            :key="item.fileId"
          >
            <img
              class="file-container--div__icon"
              @click="previewOnline(item.fileUrl, item.fileType as keyof typeof FILE_TYPE_ICON)"
              :src="FILE_TYPE_ICON[item.fileType]"
            />
            <span
              class="file-container--div__name"
              @click="previewOnline(item.fileUrl, item.fileType as keyof typeof FILE_TYPE_ICON)"
              >{{ item.fileName }}</span
            >
            <img
              class="file-container--div__download"
              :src="DownloadIcon"
              @click="downloadFile(item.fileUrl, item.fileName)"
            />
          </div>
        </template>
        <template #action="scope">
          <div class="action-container--div" style="justify-content: left">
            <ActionButton
              v-if="scope.row.disasterAssessMaterials || scope.row.disasterReconstructMaterials"
              text="编辑"
              @click="handleEditMaterials(scope.row)"
            />
            <ActionButton v-else text="上传" @click="handleUploadMaterials(scope.row)" />
          </div>
        </template>
      </BasicTable>
      <PreviewOnline ref="previewOnlineRef" />
    </main>
  </div>
</template>

<script setup lang="ts">
  import { onMounted, ref } from 'vue';
  import { useRouter } from 'vue-router';
  import BasicTable from '@/components/BasicTable.vue';
  import ActionButton from '@/components/ActionButton.vue';
  import useTableConfig from '@/hooks/useTableConfigHook';
  import { POST_DISASTER_TABLE_OPTIONS, POST_DISASTER_TABLE_COLUMNS } from './src/config/table';
  import { getDisasterControlCollapseData } from '@/api/disaster-control';
  import type { QueryPageRequest } from '@/types/basic-query';
  import type { DisposalManagementListQuery, DisposalManagementListResponse } from '@/types/disaster-control';
  import DownloadIcon from '@/views/disaster/disaster-control/src/svg/download.svg';
  import { downloadFile } from '@/views/disaster/utils';
  import PreviewOnline from '@/views/disaster/components/PreviewOnline.vue';
  import { FILE_TYPE_ICON } from '@/components/UploadFiles/constants';
  import { unformatAttachment } from '@/components/UploadFiles/utils';
  import { usePostDisasterMaterial } from '@/store/modules/usePostDisasterMaterial';
  import { storeToRefs } from 'pinia';

  const router = useRouter();

  const postDisasterMaterialStore = usePostDisasterMaterial();
  const { id, type, disasterAssessMaterials, disasterReconstructMaterials } = storeToRefs(postDisasterMaterialStore);

  const { tableConfig, pagination } = useTableConfig(POST_DISASTER_TABLE_COLUMNS, POST_DISASTER_TABLE_OPTIONS);

  const tableData = ref<DisposalManagementListResponse[]>([]);

  const tableQuery = ref<QueryPageRequest<DisposalManagementListQuery>>({
    pageNumber: pagination.pageNumber,
    pageSize: pagination.pageSize,
    queryParam: {},
  });

  const handleSizeChange = (value: number) => {
    pagination.pageSize = value;
    tableQuery.value.pageSize = value;
    getTableData();
  };
  const handleCurrentChange = (value: number) => {
    pagination.pageNumber = value;
    tableQuery.value.pageNumber = value;
    getTableData();
  };

  async function getTableData() {
    tableConfig.loading = true;
    const res = await getDisasterControlCollapseData(tableQuery.value);
    tableData.value = res.records;
    pagination.total = res.totalRow;
    tableConfig.loading = false;
  }

  // 预览
  const previewOnlineRef = ref<InstanceType<typeof PreviewOnline>>();
  const previewOnline = (url: string | undefined, type: keyof typeof FILE_TYPE_ICON) => {
    if (url) {
      previewOnlineRef.value?.open(url, type);
    }
  };

  // 上传
  const handleUploadMaterials = (row: DisposalManagementListResponse) => {
    id.value = row.id;
    type.value = 'upload';
    disasterAssessMaterials.value = row.disasterAssessMaterials;
    disasterReconstructMaterials.value = row.disasterReconstructMaterials;
    router.push({
      name: 'disaster-control-post-disaster-item',
    });
  };

  // 编辑
  const handleEditMaterials = (row: DisposalManagementListResponse) => {
    id.value = row.id;
    type.value = 'edit';
    disasterAssessMaterials.value = row.disasterAssessMaterials;
    disasterReconstructMaterials.value = row.disasterReconstructMaterials;
    router.push({
      name: 'disaster-control-post-disaster-item',
    });
  };

  onMounted(() => {
    getTableData();
  });
</script>

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