import { Connect } from "@cqsjjb/jjb-dva-runtime";
import { ReactFlow, ReactFlowProvider } from "@xyflow/react";
import { Button, Descriptions, Divider, message, Modal, Space, Spin } from "antd";
import { useEffect, useRef, useState } from "react";
import { useReactToPrint } from "react-to-print";
import HeaderBack from "zy-react-library/components/HeaderBack";
import HiddenInfo from "zy-react-library/components/HiddenInfo/gwj";
import PreviewImg from "zy-react-library/components/PreviewImg";
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 useGetUserInfo from "zy-react-library/hooks/useGetUserInfo";
import { getFileUrl, getLabelName } from "zy-react-library/utils";
import { PLAN_ENUM } from "~/enumerate/constant";
import { NS_INSPECTION } from "~/enumerate/namespace";
import { getFlowData } from "~/utils/flow";
import "./index.less";

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

  const [info, setInfo] = useState({
    inspectedPartyConfirmation: {},
    currentInspectorUser: {},
    content: [],
    inspectorVerificationList: [],
  });
  const [hiddenList, setHiddenList] = useState([]);
  const [hiddenViewModalOpen, setHiddenViewModalOpen] = useState(false);
  const [hiddenId, setHiddenId] = useState("");
  const [hiddenUUId, setHiddenUUId] = useState("");
  const [flowModalOpen, setFlowModalOpen] = useState(false);
  const [currentId, setCurrentId] = useState("");
  const contentRef = useRef(null);
  const handlePrint = useReactToPrint({
    contentRef,
    pageStyle: `    @page {
      size: landscape;
      margin: 0mm;
    }
    @media print {
      body {
        margin: 10px;
        padding: 10px;
      }
    }
  `,
    documentTitle: "",
  });

  const getData = async () => {
    const userInfo = await getUserInfo();
    const { data } = await props["inspectionView"]({ inspectionId: query.id });
    for (let i = 0; i < data.content.length; i++) {
      const files = await getFile({
        eqType: UPLOAD_FILE_TYPE_ENUM["140"],
        eqForeignKey: data.content[i].contentId,
      });
      data.content[i].files = files;
    }
    data.currentInspectorUser = data.inspectorVerificationList.filter(item => item.userId === userInfo.id)[0];
    setInfo(data);
    const { data: hiddenList } = await props["hiddenList"]({ foreignKey: query.inspectionId, pageIndex: 1, pageSize: 999 });
    setHiddenList(hiddenList);
  };
  useEffect(() => {
    getData();
  }, []);

  return (
    <div>
      <HeaderBack title="查看" />
      <Spin spinning={props.inspection.inspectionLoading || getFileLoading}>
        <div style={{ padding: 20, paddingBottom: 0 }} ref={contentRef}>
          <Divider orientation="left">
            {info.subject}
            现场安全检查记录
          </Divider>
          <Descriptions
            column={2}
            bordered
            styles={{ label: { width: 200 } }}
            items={[
              { label: "被检查单位", children: info.inspectedPartyConfirmation.departmentName },
              { label: "被检查单位现场负责人", children: info.inspectedPartyConfirmation.userName },
              { label: "牵头检查部门", children: info.currentInspectorUser.departmentName },
              { label: "检查人", children: info.currentInspectorUser.userName },
              { label: "检查类型", children: info.typeName },
              { label: "检查时间", children: `${info.timeStart}至${info.timeEnd}` },
              { label: "检查场所", children: info.place, span: 2 },
              { label: "计划属性", children: getLabelName({ list: PLAN_ENUM, status: info.todo1 }), span: 2 },
              { label: "计划名称", children: info.todo2, span: 2 },
              { label: "记录填写时间", children: info.createTime, span: 2 },
            ]}
          />
          <Divider orientation="left">检查情况</Divider>
          <Descriptions
            column={2}
            bordered
            styles={{ label: { width: 200 } }}
            items={
              info.content.map(item =>
                [
                  { label: "检查情况", children: item.content },
                  { label: "图片", children: (<PreviewImg files={item.files} />) },
                ],
              ).flat()
            }
          />
          <Divider orientation="left">发现问题</Divider>
          <Table
            className="print-no-use"
            dataSource={hiddenList || []}
            disabledResizer={true}
            pagination={false}
            options={false}
            columns={[
              { title: "隐患描述", dataIndex: "hiddenDesc" },
              { title: "隐患部位", dataIndex: "hiddenPartName" },
              { title: "操作", render: (_, record) => (
                <Space>
                  <Button
                    type="link"
                    onClick={() => {
                      setHiddenViewModalOpen(true);
                      setHiddenId(record.id);
                      setHiddenUUId(record.hiddenId);
                    }}
                  >
                    查看
                  </Button>
                  <Button
                    type="link"
                    onClick={() => {
                      setFlowModalOpen(true);
                      setCurrentId(record.id);
                    }}
                  >
                    流程图
                  </Button>
                </Space>
              ) },
            ]}
          />
          <table className="print-table">
            <thead>
              <tr>
                <th>序号</th>
                <th>隐患描述</th>
                <th>隐患部位</th>
              </tr>
            </thead>
            <tbody>
              {
                (hiddenList || []).map((item, index) => (
                  <tr key={item.id}>
                    <td>{index + 1}</td>
                    <td>{item.hiddenDesc}</td>
                    <td>{item.hiddenPartName}</td>
                  </tr>
                ))
              }
            </tbody>
          </table>
          <Divider orientation="left">检查人员审核情况</Divider>
          <Table
            className="print-no-use"
            dataSource={info.inspectorVerificationList}
            disabledResizer={true}
            pagination={false}
            options={false}
            columns={[
              { title: "审核人员", dataIndex: "userName" },
              { title: "审核意见", dataIndex: "userRemarks" },
              { title: "签字", render: (_, record) => (record.signature && <PreviewImg files={[record.signature]} />) },
            ]}
          />
          <table className="print-table">
            <thead>
              <tr>
                <th>序号</th>
                <th>审核人员</th>
                <th>审核意见</th>
                <th>签字</th>
              </tr>
            </thead>
            <tbody>
              {
                info.inspectorVerificationList.map((item, index) => (
                  <tr key={item.id}>
                    <td>{index + 1}</td>
                    <td>{item.userName}</td>
                    <td>{item.userRemarks}</td>
                    <td>{item.signature && <img src={getFileUrl() + item.signature} alt="" width={100} height={100} />}</td>
                  </tr>
                ))
              }
            </tbody>
          </table>
          <Divider orientation="left">被检查单位现场负责人确认情况</Divider>
          <Descriptions
            column={1}
            bordered
            styles={{ label: { width: 200 } }}
            items={[
              { label: "被检查单位现场负责人（签字）", children: (<PreviewImg files={[]} />) },
            ]}
          />
        </div>
        <div style={{ marginTop: 20, paddingBottom: 20, textAlign: "center" }}>
          <Space>
            <Button type="primary" onClick={handlePrint}>打印</Button>
            {query.isExport !== "0" && <Button type="primary">导出</Button>}
          </Space>
        </div>
      </Spin>
      {hiddenViewModalOpen && (
        <HiddenViewModal
          id={hiddenId}
          hiddenId={hiddenUUId}
          onCancel={() => {
            setHiddenViewModalOpen(false);
            setHiddenId("");
            setHiddenUUId("");
          }}
        />
      )}
      {flowModalOpen && (
        <FlowModal
          id={currentId}
          onCancel={() => {
            setFlowModalOpen(false);
            setCurrentId("");
          }}
        />
      )}
    </div>
  );
}

function HiddenViewModal(props) {
  return (
    <Modal
      title="查看隐患"
      width={1000}
      open
      maskClosable={false}
      onCancel={props.onCancel}
      footer={[
        <Button key="cancel" onClick={props.onCancel}>取消</Button>,
      ]}
    >
      <HiddenInfo id={props.id} hiddenId={props.hiddenId} />
    </Modal>
  );
}

function FlowModalComponent(props) {
  const [nodes, setNodes] = useState([]);
  const [edges, setEdges] = useState([]);

  const getData = async () => {
    const { success, data } = await props["hiddenFlowchart"]({ id: props.id });
    if (success) {
      const { nodes, edges } = getFlowData(data.flowCOList, data.thisFlow);
      setNodes(nodes);
      setEdges(edges);
    }
    else {
      message.error("获取数据失败");
      props.onCancel();
    }
  };
  useEffect(() => {
    getData();
  }, []);

  return (
    <Modal
      title="查看流程图"
      width={1000}
      open
      maskClosable={false}
      onCancel={props.onCancel}
      footer={[
        <Button key="cancel" onClick={props.onCancel}>取消</Button>,
      ]}
    >
      <ReactFlowProvider>
        <div style={{ width: "100%", height: 500 }}>
          <style>
            {`
              .react-flow__attribution {
                display: none !important;
              }
            `}
          </style>
          <ReactFlow
            nodes={nodes}
            edges={edges}
            fitView
            preventScrolling={false}
            connectionMode="loose"
            zoomOnScroll={true}
            zoomOnPinch={true}
            panOnScroll={true}
            panOnScrollSpeed={0.5}
            connectionLineOptions={{
              type: "straight",
              style: { stroke: "transparent", strokeWidth: 0 },
            }}
          >
          </ReactFlow>
        </div>
      </ReactFlowProvider>
    </Modal>
  );
}

const FlowModal = Connect([NS_INSPECTION], true)(FlowModalComponent);

export default Connect([NS_INSPECTION], true)(InspectionView);