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 Table from "zy-react-library/components/Table";
import TooltipPreviewImg from "zy-react-library/components/TooltipPreviewImg";
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 { NS_ENCLOSED_AREA_PERSONNEL_APPLY } from "~/enumerate/namespace";

function View(props) {
  const [info, setInfo] = useState({});

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

  const getData = async () => {
    const { data } = await props["enclosedAreaPersonnelApplyInfo"]({ id: query.id });
    const informSignFile = await getFile({ eqType: UPLOAD_FILE_TYPE_ENUM[609], eqForeignKey: data.informSignId });
    setInfo({
      ...data,
      informSignFile,
    });
    props.onGetData?.(data);
  };

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

  return (
    <Page headerTitle={props.headerTitle || "查看"} contentPadding="0 20px 20px 20px" isShowFooter={props.isShowFooter}>
      <Spin spinning={props.enclosedAreaPersonnelApply.enclosedAreaPersonnelApplyLoading || getFileLoading}>
        <Divider orientation="left">人员信息</Divider>
        <Descriptions
          bordered
          column={2}
          styles={{ label: { width: 200 } }}
          items={[
            ...(
              props.entrance === "stakeholder"
                ? [
                    { label: "相关方名称", children: info.applyPersonCorpName },
                    { label: "所属项目", children: info.projectName },
                  ]
                : []
            ),
            ...(
              props.entrance === "enterprise" || props.entrance === "supervision" || !props.entrance
                ? [
                    { label: "所属企业", children: info.applyPersonCorpName },
                  ]
                : []
            ),
            { label: "姓名", children: info.applyPersonUserName },
            { label: "部门", children: info.applyPersonDepartmentName },
            { label: "手机号", children: info.userPhone },
            { label: "申请区域", children: info.closedAreaName },
            { label: "申请时间范围", children: `${info.visitStartTime} - ${info.visitEndTime}` },
            { label: "个人照片", children: (<PreviewImg files={[info.userFaceUrl]} />) },
            { label: "申请原因", children: info.applyReason },
            { label: "申请人员签字", children: (<PreviewImg files={info.informSignFile} />) },
          ]}
        />
        {
          info.entourage && (
            <>
              <Divider orientation="left">更多人员信息</Divider>
              <Table
                dataSource={JSON.parse(info.entourage)}
                pagination={false}
                options={false}
                disabledResizer={true}
                columns={[
                  { title: "姓名", dataIndex: "name", render: (_, record) => record.name || record.userName },
                  { title: "部门", dataIndex: "deptName" },
                  { title: "手机号", dataIndex: "phone" },
                  {
                    title: "个人照片",
                    dataIndex: "userFaceUrl",
                    render: (_, record) => <TooltipPreviewImg files={[record.userFaceUrl]} />,
                  },
                ]}
              />
            </>
          )
        }
        {props.children}
      </Spin>
    </Page>
  );
}

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