import { Connect } from "@cqsjjb/jjb-dva-runtime";
import { Button, message, Modal, Space } from "antd";
import AddIcon from "zy-react-library/components/Icon/AddIcon";
import Page from "zy-react-library/components/Page";
import Search from "zy-react-library/components/Search";
import DictionarySelect from "zy-react-library/components/Select/Dictionary";
import Table from "zy-react-library/components/Table";
import { FORM_ITEM_RENDER_ENUM } from "zy-react-library/enum/formItemRender";
import useGetUrlQuery from "zy-react-library/hooks/useGetUrlQuery";
import useTable from "zy-react-library/hooks/useTable";
import { getLabelName } from "zy-react-library/utils";
import { NS_STOCK_PERSONNEL_AND_VEHICLES, NS_VEHICLE_APPLY } from "~/enumerate/namespace";

const VEHICLE_APPROVAL_STATUS_ENUM = [
  { name: "审核中", bianma: "1" },
  { name: "通过", bianma: "2" },
  { name: "不通过", bianma: "3" },
];

function List(props) {
  const [form] = Search.useForm();
  const query = useGetUrlQuery();
  const { tableProps, getData } = useTable(props["vehicleApplyList"], {
    form,
    params: { employeeVehicleUserId: query.id, vehicleBelongType: props.vehicleBelongType || 1 },
  });

  const onDelete = (record) => {
    Modal.confirm({
      title: "删除确认",
      content: "确定要删除吗？",
      onOk: async () => {
        const { success } = await props["vehicleApplyDelete"]({ id: record.id });
        if (success) {
          message.success("删除成功");
          getData();
        }
      },
    });
  };

  return (
    <Page headerTitle="车辆管理">
      <Search
        options={[
          { name: "licenceNo", label: "车牌号" },
          { name: "gateLevelAuthAreaId", label: "访问港区范围", render: (<DictionarySelect dictValue="HG_AUTH_AREA" />) },
          { name: "visitStartTime", label: "访问开始时间", render: FORM_ITEM_RENDER_ENUM.DATE },
          { name: "visitEndTime", label: "访问结束时间", render: FORM_ITEM_RENDER_ENUM.DATE },
        ]}
        form={form}
        onFinish={getData}
      />
      <Table
        toolBarRender={() => (
          <Space>
            <Button
              icon={(<AddIcon />)}
              type="primary"
              onClick={() => {
                if (tableProps.dataSource.length >= 2) {
                  message.warning("最多添加两辆车");
                  return;
                }
                if (query.userName) {
                  const params = new URLSearchParams({
                    employeeVehicleUserId: query.id || "",
                    employeeVehicleUserName: query.userName || "",
                    vehicleDepartmentId: query.departmentId || "",
                    vehicleDepartmentName: query.departmentName || "",
                    vehicleCorpId: query.corpinfoId || "",
                    vehicleCorpName: query.corpName || "",
                  }).toString();
                  props.history.push(`./add?${params}`);
                  return;
                }
                props.history.push("./add");
              }}
            >
              新增
            </Button>
          </Space>
        )}
        columns={[
          { title: "车辆归属人", dataIndex: "employeeVehicleUserName" },
          { title: "车牌号", dataIndex: "licenceNo" },
          { title: "车牌类型", dataIndex: "licenceTypeName" },
          { title: "车辆类型", dataIndex: "vehicleTypeName" },
          {
            title: "访问港区范围",
            dataIndex: "gateLevelAuthArea",
            render: (_, record) => record.gateLevelAuthArea && JSON.parse(record.gateLevelAuthArea).area.map(item => item.value).join("、"),
          },
          { title: "访问起始时间", dataIndex: "visitStartTime" },
          { title: "访问结束时间", dataIndex: "visitEndTime" },
          {
            title: "审批状态",
            dataIndex: "auditFlag",
            render: (_, record) => getLabelName({ list: VEHICLE_APPROVAL_STATUS_ENUM, status: record.auditFlag }),
          },
          {
            title: "车辆开启状态",
            dataIndex: "blockedFlag",
            render: (_, record) => record.blockedFlag === 2 ? "正常" : "已拉黑",
          },
          {
            title: "操作",
            fixed: "right",
            width: 350,
            render: (_, record) => (
              <Space>
                <Button
                  type="link"
                  onClick={() => {
                    // TODO
                    props.history.push(`./vehicleRecords?licenceNo=${record.licenceNo}`);
                  }}
                >
                  车辆进出记录
                </Button>
                <Button
                  type="link"
                  onClick={() => {
                    props.history.push(`./approvalRecords?id=${record.id}`);
                  }}
                >
                  审批记录
                </Button>
                {record.auditFlag === 3 && (
                  <Button
                    type="link"
                    onClick={() => {
                      props.history.push(`./add?id=${record.id}`);
                    }}
                  >
                    重新申请
                  </Button>
                )}
                <Button
                  type="link"
                  onClick={() => {
                    props.history.push(`./view?id=${record.id}`);
                  }}
                >
                  查看
                </Button>
                <Button
                  type="link"
                  danger
                  onClick={() => {
                    onDelete(record.id);
                  }}
                >
                  删除
                </Button>
              </Space>
            ),
          },
        ]}
        {...tableProps}
      />
    </Page>
  );
}

export default Connect([NS_STOCK_PERSONNEL_AND_VEHICLES, NS_VEHICLE_APPLY], true)(List);
