import { Connect } from "@cqsjjb/jjb-dva-runtime";
import { Button, Descriptions, message, Modal, Space } from "antd";
import { useEffect, useState } from "react";
import Page from "zy-react-library/components/Page";
import PreviewImg from "zy-react-library/components/PreviewImg";
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_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 useTable from "zy-react-library/hooks/useTable";
import { NS_VEHICLES_VIOLATION } from "~/enumerate/namespace";

function ViolationRecords(props) {
  const [infoModalVisible, setInfoModalVisible] = useState(false);
  const [currentId, setCurrentId] = useState("");

  const query = useGetUrlQuery();
  const [form] = Search.useForm();
  const { tableProps, getData } = useTable(props["vehiclesViolationViolationRecordsList"], {
    form,
    params: { licenceNo: query.licenceNo },
  });

  const onDelete = (id) => {
    Modal.confirm({
      title: "清除确认",
      content: "确定要清除该违规记录吗？",
      onOk: async () => {
        const { success } = await props["vehiclesViolationViolationRecordsDelete"]({ id });
        if (success) {
          message.success("清除成功");
          getData();
        }
      },
    });
  };

  return (
    <Page headerTitle="违规记录">
      <Search
        options={[
          { name: "violationType", label: "违规类型", render: (<DictionarySelect dictValue="VEHICLE_VIOLATION_TYPE" />) },
        ]}
        labelCol={{ span: 4 }}
        form={form}
        onFinish={getData}
      />
      <Table
        columns={[
          { title: "车牌号", dataIndex: "licenceNo" },
          { title: "违规类型", dataIndex: "violationTypeName" },
          { title: "违规区域", dataIndex: "location" },
          { title: "违规时间", dataIndex: "violationtime" },
          { title: "违规说明", dataIndex: "describeMessage" },
          {
            title: "操作",
            width: 200,
            fixed: "right",
            render: (_, record) => (
              <Space>
                <Button
                  type="link"
                  onClick={() => {
                    setInfoModalVisible(true);
                    setCurrentId(record.id);
                  }}
                >
                  详情
                </Button>
                <Button
                  type="link"
                  danger
                  onClick={() => {
                    onDelete(record.id);
                  }}
                >
                  清除违规记录
                </Button>
              </Space>
            ),
          },
        ]}
        {...tableProps}
      />
      {
        infoModalVisible && (
          <InfoModal
            onCancel={() => {
              setInfoModalVisible(false);
            }}
            id={currentId}
          />
        )
      }
    </Page>
  );
}

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

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

  const getData = async () => {
    const { data } = await props["vehiclesViolationViolationRecordsInfo"]({ id: props.id });
    const illegalImages = await getFile({ eqType: UPLOAD_FILE_TYPE_ENUM[607], eqForeignKey: data.illegalImagesId });
    setInfo({
      ...data,
      illegalImages,
    });
  };

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

  return (
    <Modal
      loading={props.vehiclesViolation.vehiclesViolationLoading || getFileLoading}
      open
      title="查看"
      maskClosable={false}
      width={600}
      onCancel={props.onCancel}
      footer={[
        <Button key="cancel" onClick={props.onCancel}>取消</Button>,
      ]}
    >
      <Descriptions
        bordered
        column={1}
        styles={{ label: { width: 200 } }}
        items={[
          // { label: "车辆所属单位", children: info.vehicleCorpName },
          // { label: "车辆所属部门", children: info.vehicleDepartmentName },
          // { label: "车辆归属人", children: info.employeeVehicleUserName },
          { label: "车牌号", children: info.licenceNo },
          { label: "违规类型", children: info.violationTypeName },
          { label: "违规时间", children: info.violationtime },
          { label: "违规区域", children: info.location },
          { label: "违规照片", children: (<PreviewImg files={info.illegalImages} />) },
          { label: "违规说明", children: info.describeMessage },
        ]}
      />
    </Modal>
  );
};

const InfoModal = Connect([NS_VEHICLES_VIOLATION], true)(InfoModalComponent);

export default Connect([NS_VEHICLES_VIOLATION], true)(ViolationRecords);
