import { Connect } from "@cqsjjb/jjb-dva-runtime";
import { useEffect, useState } from "react";
import useGetUrlQuery from "zy-react-library/hooks/useGetUrlQuery";
import { getLabelName } from "zy-react-library/utils";
import { ENCLOSED_AREA_AUDIT_STATUS_ENUM } from "~/enumerate/constant";
import { NS_MOBILE } from "~/enumerate/namespace";

function ApplyList(props) {
  const query = useGetUrlQuery();

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

  const getData = async () => {
    const { data } = await props["temporaryVisitorApplyInfo"]({
      id: query.id,
      tmpApplyType: query.tmpApplyType,
      tmpMkmjType: query.tmpMkmjType,
    });
    setInfo(data);
  };
  useEffect(() => {
    getData();
  }, []);
  return (
    <div>
      <div style={{ backgroundColor: "#f9f9f9", padding: "10px" }}>
        <div style={{ backgroundColor: "#fff", padding: "10px", marginBottom: "10px", borderRadius: "5px" }}>
          {
            query.tmpApplyType === "PERSON_APPLY" && (
              <div>
                <div style={{ fontSize: "16px", fontWeight: "bold" }}>临时访客申请</div>
                <div>
                  申请人：
                  {info.applyPersonUserName}
                </div>
                <div>
                  手机号：
                  {info.userPhone}
                </div>
                <div>
                  申请区域：
                  { info.closedAreaName || info.gateLevelAuthArea && JSON.parse(info.gateLevelAuthArea).area.map(item => item.value).join("、")}
                </div>
                <div>
                  申请口门：
                  {info.levelOneMkmjName}
                </div>
                <div>
                  时间范围：
                  {info.visitStartTime}
                  至
                  {info.visitEndTime}
                </div>
                <div>
                  审核状态：
                  {getLabelName({ list: ENCLOSED_AREA_AUDIT_STATUS_ENUM, status: info.auditFlag })}
                </div>
                {info.auditFlag === 3 && (
                  <div>
                    驳回原因：
                    {info.refusalReason}
                  </div>
                )}
              </div>
            )
          }
          {
            query.tmpApplyType === "CAR_APPLY" && (
              <div>
                <div style={{ fontSize: "16px", fontWeight: "bold" }}>临时访客车辆申请</div>
                <div>
                  申请人：
                  {info.applyPersonUserName}
                </div>
                <div>
                  手机号：
                  {info.userPhone}
                </div>
                <div>
                  申请区域：
                  { info.closedAreaName || info.gateLevelAuthArea && JSON.parse(info.gateLevelAuthArea).area.map(item => item.value).join("、")}
                </div>
                <div>
                  申请口门：
                  {info.levelOneMkmjName}
                </div>
                <div>
                  时间范围：
                  {info.visitStartTime}
                  至
                  {info.visitEndTime}
                </div>
                <div>
                  车辆类型：
                  {info.vehicleTypeName}
                </div>
                <div>
                  车牌号：
                  {info.licenceNo}
                </div>
                <div>
                  审核状态：
                  {getLabelName({ list: ENCLOSED_AREA_AUDIT_STATUS_ENUM, status: info.auditFlag })}
                </div>
                {info.auditFlag === 3 && (
                  <div>
                    驳回原因：
                    {info.refusalReason}
                  </div>
                )}
              </div>
            )
          }
        </div>
      </div>
    </div>
  );
}

export default Connect([NS_MOBILE], true)(ApplyList);
