import { Connect } from "@cqsjjb/jjb-dva-runtime";
import { Descriptions, Divider, Spin } from "antd";
import { useEffect, useState } from "react";
import Page from "zy-react-library/components/Page";
import PreviewImg from "zy-react-library/components/PreviewImg";
import PreviewPdf from "zy-react-library/components/PreviewPdf";
import Table from "zy-react-library/components/Table";
import { UPLOAD_FILE_TYPE_ENUM } from "zy-react-library/enum/uploadFile/gwj";
import useGetFile from "zy-react-library/hooks/useGetFile";
import useGetUrlQuery from "zy-react-library/hooks/useGetUrlQuery";
import useTable from "zy-react-library/hooks/useTable";
import { getFileSuffix } from "zy-react-library/utils";
import { NS_EMERGENCY_EXERCISE } from "~/enumerate/namespace";

function View(props) {
  const query = useGetUrlQuery();
  const { loading: getFileLoading, getFile } = useGetFile();

  const [basicInfo, setBasicInfo] = useState({});

  const { tableProps: organizationTableProps } = useTable(props["emergencyExerciseOrganizationList"], {
    params: { likeDrillId: query.id, corpId: query.corpId },
    useStorageQueryCriteria: false,
  });
  const { tableProps: organizationPersonnelTableProps } = useTable(props["emergencyExerciseOrganizationPersonnelList"], {
    params: { likeDrillId: query.id, corpId: query.corpId },
    useStorageQueryCriteria: false,
  });
  const { tableProps: contentTableProps } = useTable(props["emergencyExerciseContentList"], {
    params: { likeDrillId: query.id, corpId: query.corpId },
    useStorageQueryCriteria: false,
  });
  const { tableProps: scenarioTableProps } = useTable(props["emergencyExerciseScenarioList"], {
    params: { likeDrillId: query.id, corpId: query.corpId },
    useStorageQueryCriteria: false,
  });

  const getBasicInfo = async () => {
    const { data } = await props["emergencyExerciseInfo"]({ id: query.id });
    const summaryEvaluationFiles = [];
    const emergencyDrillFiles = [];
    if (data.summaryAssessmentFileId) {
      const fileItems = await getFile({ eqType: UPLOAD_FILE_TYPE_ENUM[705], eqForeignKey: data.summaryAssessmentFileId });
      summaryEvaluationFiles.push(...fileItems);
    }
    if (data.emergencyDrill) {
      const fileItems = await getFile({ eqType: UPLOAD_FILE_TYPE_ENUM[704], eqForeignKey: data.emergencyDrill });
      emergencyDrillFiles.push(...fileItems);
    }
    setBasicInfo({
      ...data,
      summaryEvaluationFiles,
      emergencyDrillFiles,
    });
  };

  useEffect(() => {
    getBasicInfo();
  }, []);

  const previewFile = (files = []) => {
    const pdfFile = [];
    const imgFile = [];
    for (let i = 0; i < files.length; i++) {
      const file = files[i];
      if (getFileSuffix(file.fileName) === "pdf")
        pdfFile.push(file);
      else
        imgFile.push(file);
    }
    return (
      <>
        <PreviewPdf files={pdfFile} />
        <PreviewImg files={imgFile} />
      </>
    );
  };

  return (
    <Page headerTitle="查看">
      <Divider orientation="left">应急演练基本信息</Divider>
      <Spin spinning={props.emergencyExercise.emergencyExerciseLoading || getFileLoading}>
        <Descriptions
          bordered
          column={2}
          styles={{ label: { width: 200 }, content: { width: 500 } }}
          items={[
            { label: "应急演练方案名称", children: basicInfo.drillName, span: 2 },
            { label: "演练单位", children: basicInfo.drillUnit },
            { label: "演练时间", children: basicInfo.drillTime },
            { label: "演练目的", children: basicInfo.drillPurpose, span: 2 },
            { label: "演练特点", children: basicInfo.drillFeatures, span: 2 },
            { label: "应急演练地点", children: basicInfo.drillLocation },
            { label: "参加人员", children: basicInfo.participants },
          ]}
        />
      </Spin>
      <Divider orientation="left">应急指挥机构</Divider>
      <Table
        options={false}
        disabledResizer={true}
        columns={[
          { title: "机构名称", dataIndex: "orgName" },
          { title: "组成单位", dataIndex: "constituentUnit" },
          { title: "机构职责", dataIndex: "orgDuties" },
        ]}
        {...organizationTableProps}
      />
      <Divider orientation="left">应急指挥机构人员</Divider>
      <Table
        options={false}
        disabledResizer={true}
        columns={[
          { title: "应急指挥机构", dataIndex: "orgName" },
          { title: "姓名", dataIndex: "personName" },
          { title: "单位", dataIndex: "unit" },
          { title: "职务", dataIndex: "position" },
          { title: "联系电话", dataIndex: "contactPhone" },
          { title: "紧急联系电话", dataIndex: "emergencyContactPhone" },
        ]}
        {...organizationPersonnelTableProps}
      />
      <Divider orientation="left">演练内容</Divider>
      <Table
        options={false}
        disabledResizer={true}
        columns={[
          { title: "演练内容", dataIndex: "drillContent" },
          { title: "演练内容序号", dataIndex: "contentOrder" },
        ]}
        {...contentTableProps}
      />
      <Divider orientation="left">演练场景</Divider>
      <Table
        options={false}
        disabledResizer={true}
        columns={[
          { title: "演练场景", dataIndex: "drillScenario" },
          { title: "演练场景序号", dataIndex: "scenarioOrder" },
        ]}
        {...scenarioTableProps}
      />
      <Divider orientation="left">总结评价</Divider>
      <Spin spinning={props.emergencyExercise.emergencyExerciseLoading || getFileLoading}>
        <Descriptions
          bordered
          column={1}
          styles={{ label: { width: 200 }, content: { width: 500 } }}
          items={[
            { label: "演练目的", children: basicInfo.drillPurpose },
            { label: "附件", children: previewFile(basicInfo.summaryEvaluationFiles) },
          ]}
        />
      </Spin>
      <Divider orientation="left">应急演练方案附件</Divider>
      <Spin spinning={props.emergencyExercise.emergencyExerciseLoading || getFileLoading}>
        <Descriptions
          bordered
          column={1}
          styles={{ label: { width: 200 }, content: { width: 500 } }}
          items={[
            { label: "附件", children: previewFile(basicInfo.emergencyDrillFiles) },
          ]}
        />
      </Spin>
    </Page>
  );
}

export default Connect([NS_EMERGENCY_EXERCISE], true)(View);