import { Permission } from "@cqsjjb/jjb-common-decorator/permission";
import { Connect } from "@cqsjjb/jjb-dva-runtime";
import { Button, Descriptions, Modal, Space } from "antd";
import { useState } from "react";
import Page from "zy-react-library/components/Page";
import Search from "zy-react-library/components/Search";
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 useTable from "zy-react-library/hooks/useTable";
import { getLabelName } from "zy-react-library/utils";
import { ENCLOSED_AREA_AUDIT_STATUS_ENUM } from "~/enumerate/constant";
import { NS_ENCLOSED_AREA_VEHICLE_APPLY } from "~/enumerate/namespace";

function List(props) {
  const [list, setList] = useState([]);
  const [refusalReason, setCurrentRefusalReason] = useState("");
  const [viewRejectReasonModalVisible, setViewRejectReasonModalVisible] = useState(false);

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

  const [form] = Search.useForm();
  const { tableProps, getData } = useTable(props["enclosedAreaVehicleApplyList"], {
    form,
    params: () => {
      let carBelongType = 1;
      if (props.entrance === "enterprise")
        carBelongType = 2;
      if (props.entrance === "stakeholder")
        carBelongType = 3;
      return { processOrRecord: 2, carBelongType };
    },
    onSuccess: async (data) => {
      const list = await getFile({ single: false, dataSource: data.list, eqType: UPLOAD_FILE_TYPE_ENUM[602], foreignKey: "attachmentId" });
      setList(list);
    },
  });

  return (
    <Page isShowAllAction={false}>
      <Search
        options={[
          { name: "licenceNo", label: "车牌号" },
        ]}
        form={form}
        onFinish={getData}
      />
      <Table
        columns={[
          { title: "车辆类型", dataIndex: "vehicleTypeName" },
          { title: "驾驶人", dataIndex: "applyPersonUserName" },
          { title: "部门", dataIndex: "applyPersonDepartmentName" },
          { title: "手机号", dataIndex: "userPhone" },
          { title: "申请区域", dataIndex: "closedAreaName" },
          {
            title: "申请时间范围",
            dataIndex: "visitStartTime",
            render: (_, record) => `${record.visitStartTime} - ${record.visitEndTime}`,
          },
          { title: "申请原因", dataIndex: "applyReason" },
          { title: "车牌号", dataIndex: "licenceNo" },
          { title: "车辆照片", dataIndex: "files", render: (_, record) => <TooltipPreviewImg files={record.files} /> },
          { title: "所属项目", dataIndex: "projectName", hidden: !(props.entrance === "stakeholder") },
          {
            title: "申请状态",
            dataIndex: "auditFlag",
            render: (_, record) => getLabelName({ list: ENCLOSED_AREA_AUDIT_STATUS_ENUM, status: record.auditFlag }),
          },
          {
            title: "操作",
            width: 150,
            fixed: "right",
            render: (_, record) => (
              <Space>
                {props.permission(props.viewBtn || "jgd-enclosed-vehicle-records-show") && (
                  <Button
                    type="link"
                    onClick={() => {
                      props.history.push(`./view?id=${record.id}`);
                    }}
                  >
                    查看
                  </Button>
                )}
                {record.auditFlag === 3 && props.permission(props.rejectReasonBtn || "jgd-enclosed-vehicle-records-bh") && (
                  <Button
                    type="link"
                    onClick={() => {
                      setViewRejectReasonModalVisible(true);
                      setCurrentRefusalReason(record.refusalReason);
                    }}
                  >
                    驳回原因
                  </Button>
                )}
              </Space>
            ),
          },
        ]}
        {...tableProps}
        dataSource={list}
        loading={tableProps.loading || getFileLoading}
      />
      {
        viewRejectReasonModalVisible && (
          <ViewRejectReasonModal
            refusalReason={refusalReason}
            onCancel={() => {
              setViewRejectReasonModalVisible(false);
              setCurrentRefusalReason("");
            }}
          />
        )
      }
    </Page>
  );
}

const ViewRejectReasonModal = (props) => {
  return (
    <Modal
      open
      title="驳回原因"
      maskClosable={false}
      onCancel={props.onCancel}
      width={600}
      footer={[
        <Button key="cancel" onClick={props.onCancel}>取消</Button>,
      ]}
    >
      <Descriptions
        column={1}
        bordered
        styles={{ label: { width: 200 } }}
        items={[
          { label: "驳回原因", children: props.refusalReason },
        ]}
      />
    </Modal>
  );
};

export default Connect([NS_ENCLOSED_AREA_VEHICLE_APPLY], true)(Permission(List));
