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 { 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 { getLabelName } from "zy-react-library/utils";
import { VEHICLE_AUDIT_STATUS_ENUM } from "~/enumerate/constant";
import { NS_VEHICLE_APPLY } from "~/enumerate/namespace";

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

  const [info, setInfo] = useState({});
  const getData = async () => {
    const { data } = await props["vehicleApplyInfo"]({ id: query.id });
    const drivingLicenseFile = await getFile({
      eqType: UPLOAD_FILE_TYPE_ENUM[601],
      eqForeignKey: data.drivingLicenseId,
    });
    const attachmentFile = await getFile({ eqType: UPLOAD_FILE_TYPE_ENUM[602], eqForeignKey: data.attachmentId });
    let informSignFile = []
    if(data.informSignId){
      informSignFile = await getFile({ eqType: UPLOAD_FILE_TYPE_ENUM[606], eqForeignKey: data.informSignId })
    }

    setInfo({
      ...data,
      drivingLicenseFile,
      attachmentFile,
      informSignFile,
    });
  };

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

  return (
    <Page headerTitle="查看" contentPadding="0 20px 20px 20px">
      <Spin spinning={props.vehicleApply.vehicleApplyLoading || getFileLoading}>
        <Divider orientation="left">申请信息</Divider>
        <Descriptions
          column={2}
          bordered
          styles={{ label: { width: 200 } }}
          items={[
            { label: "访问人姓名", children: info.employeeVehicleUserName },
            { label: "手机号", children: info.lsUserPhone },
            { label: "身份证号", children: info.lsUserIdcard },
            { label: "车牌号", children: info.licenceNo },
            { label: "车牌类型", children: info.licenceTypeName },
            { label: "车辆类型", children: info.vehicleTypeName },
            { label: "访问开始时间", children: info.visitStartTime },
            { label: "访问结束时间", children: info.visitEndTime },
            { label: "访问港区", children: info.gateLevelAuthArea && JSON.parse(info.gateLevelAuthArea).area.map(item => item.value).join("、") },
            { label: "访问口门名称", children: info.mkmjName },
            { label: "来访事由", children: info.remarks, span: 2 },
            { label: "行驶证照片", children: (<PreviewImg files={info.drivingLicenseFile} />), span: 2 },
            { label: "车辆图片", children: (<PreviewImg files={info.attachmentFile} />), span: 2 },
            ...( info.informSignFile && info.informSignFile.length ===0 ? [] : [{ label: "申请人安全告知签字", children: (<PreviewImg files={info.informSignFile} />), span: 2 }]),
          ]}
        />
        <Divider orientation="left">审批信息</Divider>
        {
          info.vehicleAuditLogList && info.vehicleAuditLogList.map((item, index) => (
            <Descriptions
              key={index}
              column={2}
              bordered
              styles={{ label: { width: 200 } }}
              items={[
                { label: "审批企业", children: item.auditCorpName },
                { label: "审批部门", children: item.auditDeptName },
                { label: "审批人", children: item.auditUserName },
                { label: "审批状态", children: getLabelName({ list: VEHICLE_AUDIT_STATUS_ENUM, status: `${item.auditStatus}` }) },
                ...(item.auditStatus === 1 ? [] : [{ label: "审批时间", children: item.auditTime }]),
                ...(item.auditStatus === 3 ?  [ { label: "驳回原因", children: item.remarks }] :[]),
              ]}
            />
          ))
        }
      </Spin>
    </Page>
  );
}

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