import { Permission } from "@cqsjjb/jjb-common-decorator/permission";
import { Connect } from "@cqsjjb/jjb-dva-runtime";
import { Button, message, Modal, Space } from "antd";
import { useState } from "react";
import FormBuilder from "zy-react-library/components/FormBuilder";
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 Upload from "zy-react-library/components/Upload";
import { FORM_ITEM_RENDER_ENUM } from "zy-react-library/enum/formItemRender";
import { UPLOAD_FILE_TYPE_ENUM } from "zy-react-library/enum/uploadFile/gwj";
import useTable from "zy-react-library/hooks/useTable";
import useUploadFile from "zy-react-library/hooks/useUploadFile";
import { LICENSE_PLATE_NUMBER } from "zy-react-library/regular";
import { NS_VEHICLES_VIOLATION } from "~/enumerate/namespace";

function List(props) {
  const [addModalVisible, setAddModalVisible] = useState(false);

  const [form] = Search.useForm();

  const { tableProps, getData } = useTable(props["vehiclesViolationList"], {
    form,
  });

  return (
    <Page isShowAllAction={false}>
      <Search
        options={[
          // {
          //   name: "vehicleDepartmentId",
          //   label: "车辆所属部门",
          //   render: (<DepartmentSelectTree searchType="inType" params={{ enterpriseType: [1, 2, 3] }} />),
          // },
          // { name: "employeeVehicleUserName", label: "车辆所属人" },
          { name: "licenceNo", label: "车牌号" },
          // { name: "vehicleType", label: "车辆类型", render: (<DictionarySelect dictValue="VEHICLE_TYPE" />) },
        ]}
        form={form}
        onFinish={getData}
      />
      <Table
        toolBarRender={() => (
          <Space>
            {props.permission(props.addBtn || "jgd-che-liang-wei-gui-guan-li-add") && (
              <Button
                type="primary"
                icon={(<AddIcon />)}
                onClick={() => {
                  setAddModalVisible(true);
                }}
              >
                新增
              </Button>
            )}
          </Space>
        )}
        columns={[
          // { title: "车辆所属单位", dataIndex: "vehicleCorpName" },
          // { title: "车辆所属部门", dataIndex: "vehicleDepartmentName" },
          // { title: "车辆归属人", dataIndex: "employeeVehicleUserName" },
          { title: "车牌号", dataIndex: "licenceNo" },
          // { title: "车牌类型", dataIndex: "licenceTypeName" },
          // { title: "车辆类型", dataIndex: "vehicleTypeName" },
          { title: "违规次数", dataIndex: "violationCount" },
          {
            title: "操作",
            width: 120,
            fixed: "right",
            render: (_, record) => (
              <Space>
                {props.permission(props.violationRecordsBtn || "jgd-che-liang-wei-gui-guan-li-show") && (
                  <Button
                    type="link"
                    onClick={() => {
                      props.history.push(`./violationRecords?licenceNo=${record.licenceNo}`);
                    }}
                  >
                    查看违规记录
                  </Button>
                )}
              </Space>
            ),
          },
        ]}
        {...tableProps}
      />
      {
        addModalVisible && (
          <AddModal
            onCancel={() => {
              setAddModalVisible(false);
            }}
            getData={getData}
          />
        )
      }
    </Page>
  );
}

const AddModalComponent = (props) => {
  const [form] = FormBuilder.useForm();
  const { loading: uploadFileLoading, uploadFile } = useUploadFile();

  const onSubmit = async (values) => {
    const { id: illegalImagesId } = await uploadFile({
      single: false,
      files: values.illegalImages,
      params: { type: UPLOAD_FILE_TYPE_ENUM[607], foreignKey: "" },
    });
    const { success } = await props["vehiclesViolationAdd"]({ ...values, illegalImagesId });
    if (success) {
      message.success("操作成功");
      props.onCancel();
      props.getData();
    }
  };

  return (
    <Modal
      open
      title="新增"
      width={600}
      maskClosable={false}
      onCancel={props.onCancel}
      onOk={form.submit}
      confirmLoading={props.vehiclesViolation.vehiclesViolationLoading || uploadFileLoading}
    >
      <FormBuilder
        loading={props.vehiclesViolation.vehiclesViolationLoading || uploadFileLoading}
        form={form}
        showActionButtons={false}
        span={24}
        labelCol={{ span: 8 }}
        onFinish={onSubmit}
        options={[
          { name: "licenceNo", label: "车牌号", rules: [{ pattern: LICENSE_PLATE_NUMBER, message: "请输入正确的车牌号" }] },
          // {
          //   name: "licenceType",
          //   label: "车牌类型",
          //   render: (
          //     <DictionarySelect
          //       dictValue="LICENSE_PLATE_TYPE"
          //       onGetLabel={label => form.setFieldValue("licenceTypeName", label)}
          //     />
          //   ),
          // },
          // { name: "licenceTypeName", label: "车牌类型名称", onlyForLabel: true },
          // {
          //   name: "vehicleType",
          //   label: "车辆类型",
          //   render: (
          //     <DictionarySelect
          //       dictValue="VEHICLE_TYPE"
          //       onGetLabel={label => form.setFieldValue("vehicleTypeName", label)}
          //     />
          //   ),
          // },
          // { name: "vehicleTypeName", label: "车辆类型名称", onlyForLabel: true },
          { name: "violationtime", label: "违规时间", render: FORM_ITEM_RENDER_ENUM.DATETIME },
          {
            name: "violationType",
            label: "违规类型",
            render: (
              <DictionarySelect
                dictValue="VEHICLE_VIOLATION_TYPE"
                onGetLabel={label => form.setFieldValue("violationTypeName", label)}
              />
            ),
          },
          { name: "violationTypeName", label: "违规类型名称", onlyForLabel: true },
          {
            name: "location",
            label: "违规区域",
            render: FORM_ITEM_RENDER_ENUM.TEXTAREA,
            placeholder: "违规区域需明确车辆在港口内的具体违规位置如某一口门附近、某一码头区域、某一仓库通道等..",
          },
          { name: "illegalImages", label: "违规照片", render: (<Upload />) },
          { name: "describeMessage", label: " 违规说明", render: FORM_ITEM_RENDER_ENUM.TEXTAREA },
        ]}
      />
    </Modal>
  );
};

const AddModal = Connect([NS_VEHICLES_VIOLATION], true)(AddModalComponent);

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