import { Connect } from "@cqsjjb/jjb-dva-runtime";
import { Descriptions, Divider, message, Spin } from "antd";
import { useEffect, useState } from "react";
import FormBuilder from "zy-react-library/components/FormBuilder";
import Page from "zy-react-library/components/Page";
import PreviewImg from "zy-react-library/components/PreviewImg";
import { FORM_ITEM_RENDER_ENUM } from "zy-react-library/enum/formItemRender";
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 Review(props) {
  const [info, setInfo] = useState({});

  const query = useGetUrlQuery();
  const [form] = FormBuilder.useForm();
  const { loading: getFileLoading, getFile } = useGetFile();

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

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

  const onSubmit = async (values) => {
    const { success } = await props["enclosedAreaPersonnelApplyReviewSubmit"]({
      ...values,
      id: query.id,
    });
    if (success) {
      message.success("提交成功");
      props.history.goBack();
    }
  };

  return (
    <Page
      headerTitle={props.headerTitle || "审核"}
      contentPadding="0 20px 20px 20px"
      isShowFooter={props.isShowFooter || false}
    >
      <Spin spinning={props.enclosedAreaPersonnelApply.enclosedAreaPersonnelApplyLoading || getFileLoading}>
        <Divider orientation="left">人员信息</Divider>
        <Descriptions
          bordered
          column={2}
          styles={{ label: { width: 200 } }}
          items={[
            { label: "姓名", children: info.applyPersonUserName },
            { label: "手机号", children: info.userPhone },
            { label: "身份证号", children: info.userCard ? atob(info.userCard) : "" },
            { label: "申请区域", children: info.closedAreaName },
            { label: "一级口门", children: info.levelOneMkmjName },
            { label: "二级口门", children: info.levelTwoMkmjName },
            { label: "申请时间范围", children: `${info.visitStartTime} - ${info.visitEndTime}` },
            { label: "个人照片", children: (<PreviewImg files={[info.userFaceUrl]} />) },
            { label: "申请原因", children: info.applyReason },
            { label: "申请人员签字", children: (<PreviewImg files={info.informSign} />) },
          ]}
        />
        {!props.headerTitle && (
          <FormBuilder
            style={{ marginTop: 20 }}
            span={24}
            onFinish={onSubmit}
            values={{
              auditFlag: "2",
            }}
            options={[
              {
                name: "auditFlag",
                label: "是否通过审核",
                render: FORM_ITEM_RENDER_ENUM.RADIO,
                items: [{ bianma: "2", name: "是" }, { bianma: "3", name: "否" }],
              },
              {
                name: "refusalReason",
                label: "驳回原因",
                render: FORM_ITEM_RENDER_ENUM.TEXTAREA,
                dependencies: ["auditFlag"],
                hidden: formValues => !(formValues.auditFlag === "3"),
              },
            ]}
            form={form}
          />
        )}
      </Spin>
    </Page>
  );
}

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