import React, {
  useState,
  useEffect,
  useRef,
  useImperativeHandle,
  forwardRef,
} from "react";
import { useLocation, useNavigate } from "react-router-dom";
import {
  message,
  Form,
  Pagination,
  Table,
  Space,
  Modal,
  Button,
  Select,
  Row,
  Col,
  Tabs,
  Input,
  Upload,
  Checkbox,
  Tag,
  Radio,
  Descriptions,
  Popover,
  Transfer,
} from "antd";
import { UploadOutlined } from "@ant-design/icons";
import ajax from "@/services";
import moment from "moment";
import { dictionary, utils } from "@/config/common";
import {
  FormSelect,
  ExportBtnNew,
  ExportPMS,
  OptionPanel,
  SystemSearch,
  ResultPanel,
  FormSliderPicker,
  SelectGaodeLngLat,
  ResultFlow,
  AreaCascader,
  ImgResize,
  ImgZoom,
  TreeSelectGroup,
} from "@/components";
import "./index.scss";
import { getToken } from "@/config/cookie";
import { useSetState, useSessionStorageState, useUpdateEffect } from "ahooks";

const { TextArea } = Input;
const ConfigRoad = (props) => {
  const {
    getRecordList = {}
  } = props
  console.log(getRecordList);
  const navigate = useNavigate();
  //编辑泊位提交的编辑泊位
  const location = useLocation();
  const parking_id = getRecordList.id;
  const operator_id = getRecordList.operator_id;
  // const region_id = location.search.split("&")[2].split("=")[1];
  const [modalBtnLoading, setModalBtnLoading] = useState(false)
  //泊位管理Form
  const [berthForm] = Form.useForm();
  const [dataForm] = Form.useForm();
  const [editPoleForm] = Form.useForm();
  const [ruleForm] = Form.useForm(); //计费规则-添加或编辑规则的Form
  const [getEditData, setGetEditData] = useState({})
  const [getIdValue, setGetIdValue] = useState({})
  //计费规则添加弹窗的泊位选择框
  const [showBerthSelect, setShowBerthSelect] = useState(false);
  //编辑杆位
  const [editTitle, setEditTitle] = useState(false)
  const berthManage = {
    form: [
      {
        label: "泊位号",
        type: "input",
        placeholder: "请输入泊位号",
        name: "berth_code",
      },
      {
        label: "视频设备名称",
        type: "input",
        placeholder: "请输入内容",
        name: "video_content",
      },
    ],
    columns: [
      {
        title: "泊位排序",
        dataIndex: "index",
        key: "index",
        align: "center",
        render: (_, record, index) => {
          return index + 1;
        },
      },
      {
        title: "泊位号",
        dataIndex: "berth_code",
        key: "berth_code",
        align: "center",
      },
      {
        title: "ETC是否开启",
        dataIndex: "etc_status_name",
        key: "etc_status_name",
        align: "center",
      },
      {
        title: "对应视频设备",
        dataIndex: "video_equipment_name",
        key: "video_equipment_name",
        align: "center",
      },
      {
        title: "计费规则",
        dataIndex: "rule_id",
        key: "rule_id",
        align: "center",
      },
      {
        title: "经纬度",
        dataIndex: "lng_lat",
        key: "lng_lat",
        align: "center",
      },
      {
        title: "服务属性",
        dataIndex: "service_type_name",
        key: "service_type_name",
        align: "center",
      },
      {
        title: "状态",
        dataIndex: "status",
        key: "status",
        align: "center",
        render: (text) => {
          return text == 1 ? "上线" : text == 2 ? "下线" : "已删除";
        },
      },
      {
        title: "更新时间",
        dataIndex: "update_time",
        key: "update_time",
        align: "center",
      },
      {
        title: "操作",
        dataIndex: "operator",
        key: "operator",
        align: "center",
        render: (_, record) => {
          return (
            <>
              <Popover
                content={
                  <>
                    <div>
                      <a
                        onClick={() => {
                          setBerthModal({ record, visible: true });
                        }}
                      >
                        查看
                      </a>
                    </div>
                    <div>
                      <a
                        onClick={() => {
                          setIsEdit(true);
                          setEditBerthModal(true);
                          setGetEditData(record);
                          berthForm.setFieldsValue({
                            berth_code: record.berth_code,
                            service_type: record.service_type,
                            berth_type: record.berth_type,
                            etc_status: record.etc_status,
                          });
                          setLngLat(record.lng_lat);
                        }}
                      >
                        编辑
                      </a>
                    </div>
                    <div>
                      <a
                        onClick={() => {
                          setConfirmModalData({
                            ...confirmModalData,
                            visible: true,
                            type: record.status == 1 ? 2 : 1,
                            ids: [record.id],
                            func: (ids, status) =>
                              ajax.editStatus({
                                ids: ids,
                                status,
                              })
                          });
                          // console.log(record.status);
                        }}
                      >
                        {record.status == 1 ? "下线" : "上线"}
                      </a>
                    </div>
                    <div>
                      <a
                        onClick={() => {
                          setConfirmModalData({
                            ...confirmModalData,
                            visible: true,
                            type: 3,
                            ids: [record.id],
                            func: (ids, status) =>
                              ajax.editStatus({
                                ids: ids,
                                status,
                              })
                          });
                        }}
                      >
                        删除
                      </a>
                    </div>
                  </>
                }
              >
                <Button type="primary">操作</Button>
              </Popover>
            </>
          );
        },
      },
    ],
    confirmModalData: {
      visible: false,
      type: 1, //1上线 2下线 3 删除
      ids: [],
    },
    initialValues: {
      berth_id: "",
      video_content: "",
    },
    exporturl: "/api/bpm/berth/export",
    downloadUrl: "api/bpm/berth/berth_import_template",
    importProps: {
      name: "file",
      data: { road_id: parking_id },
      action: "/PMS/api/bpm/berth/import",
      headers: {
        Authorization: getToken(),
      },
      onChange(info) {
        if (info.file.status !== "uploading") {
          console.log(info.file, info.fileList);
        }
        if (info.file.status === "done") {
          if (info.file.response.status === 20000) {
            message.success(`${info.file.name} 上传成功`);
            formRef.current.getList();
          } else {
            message.error(info.file.response.message);
          }
        } else if (info.file.status === "error") {
          message.error(`${info.file.name} file upload failed.`);
        }
      },
    },
    search: function (params) {
      ajax
        .getManageList(params)
        .then((res) => {
          if (res.status === 20000) {
            setResultData({
              data: res.data.list,
              total_records: res.data.total,
            });
            setLoading(false)
          } else {
            message.error(res.message);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    key: "berth_code",
    create: function (params) {
      setIsEdit(false);
      berthForm.resetFields();
      setEditBerthModal(true);
    },
  };
  const [transferSouceData, setTransferSouceData] = useState([]);
  //数据采集设备管理
  const dataDevice = {
    form: [
      {
        label: "设备名称",
        type: "input",
        placeholder: "请输入内容",
        name: "device_name",
      },
      {
        label: "设备编号",
        type: "input",
        placeholder: "请输入内容",
        name: "device_id",
      },
      {
        label: "对应杆位号",
        type: "input",
        placeholder: "请输入内容",
        name: "num",
      },
      {
        label: "状态",
        type: "select",
        placeholder: "请输入内容",
        name: "status",
        options: [
          {
            label: "上线",
            value: 1,
          },
          {
            label: "下线",
            value: 2,
          },
        ],
      },
    ],
    columns: [
      {
        title: "设备名称",
        dataIndex: "name",
        key: "name",
        align: "center",
      },
      {
        title: "设备号",
        dataIndex: "code",
        key: "code",
        align: "center",
      },
      {
        title: "设备类型",
        dataIndex: "type_name",
        key: "type_name",
        align: "center",
      },
      {
        title: "对应杆位号",
        dataIndex: "pole_position_code",
        key: "pole_position_code",
        align: "center",
      },
      {
        title: "状态",
        dataIndex: "operate_status",
        key: "operate_status",
        align: "center",
      },
      {
        title: "更新时间",
        dataIndex: "update_time",
        key: "update_time",
        align: "center",
      },
      {
        title: "操作",
        dataIndex: "operator",
        key: "operator",
        align: "center",
        render: (_, record) => {
          return (
            <Popover
              trigger="hover"
              content={
                <>
                  <div>
                    <a
                      onClick={() => {
                        ajax.getDeviceInfo({ id: record.id }).then((res) => {
                          if (res.status === 20000) {
                            setDataAcquistionDetail({
                              visible: true,
                              record: res.data,
                            });
                          } else {
                            message.error(res.message);
                          }
                        });
                      }}
                    >
                      查看
                    </a>
                  </div>
                  <div>
                    <a
                      onClick={() => {
                        setGetIdValue(record.id);
                        setDataAcquistionModal({
                          ...dataAcquistionModal,
                          visible: true,
                          record: record,
                          isEdit: 1,
                        });
                        getEditInRoad(record);
                        dataAcquistionModal.form.setFieldsValue({
                          name: record.name,
                          code: record.code,
                          type: record.type_id,
                          brand: record.brand_id,
                          function: record.function_id,
                          note: record.note,
                        });
                      }}
                    >
                      编辑
                    </a>
                  </div>
                  <div>
                    <a
                      onClick={() => {
                        setDataStatusChangeModal({
                          visible: true,
                          type: record.status === 1 ? 2 : 1,
                          record: record,
                        });
                      }}
                    >
                      {record.status === 1 ? "下线" : "上线"}
                    </a>
                  </div>
                  <div>
                    <a
                      onClick={() => {
                        setDataStatusChangeModal({
                          visible: true,
                          type: 3,
                          record: record,
                        });
                      }}
                    >
                      删除
                    </a>
                  </div>
                </>
              }
            >
              <Button type="primary">操作</Button>
            </Popover>
          );
        },
      },
    ],
    exporturl: "/api/bpm/device/export_device",
    downloadUrl: "/api/bpm/device/device_import_template",
    importProps: {
      name: "file",
      data: { road_id: parking_id },
      headers: {
        Authorization: getToken(),
      },
      action: "/PMS/api/bpm/device/import_device",
      onChange(info) {
        if (info.file.status !== "uploading") {
          console.log(info.file, info.fileList);
        }
        if (info.file.status === "done") {
          if (info.file.response.status === 20000) {
            message.success(`${info.file.name} 上传成功`);
            formRef.current.getList();
          } else {
            message.error(info.file.response.message);
          }
        } else if (info.file.status === "error") {
          message.error(`${info.file.name} file upload failed.`);
        }
      },
    },
    key: "id",
    search: function (params) {
      ajax
        .getDeviceDimensionList(params)
        .then((res) => {
          if (res.status === 20000) {
            setResultData({
              data: res.data.list,
              total_records: res.data.total,
            });
            setLoading(false)
          } else {
            message.error(res.message);
          }
        })
        .catch((err) => console.error(err));
    },
    create: function (params) {
      getAllBerth();
      setDataAcquistionModal({
        ...dataAcquistionModal,
        visible: true,
        isEdit: 0,
      });
      dataAcquistionModal.form.resetFields();
    },
  };
  //杆位管理
  const poleManage = {
    form: [
      {
        label: "杆位号",
        type: "input",
        placeholder: "请输入内容",
        name: "pole_content",
      },
    ],
    columns: [
      {
        title: "杆位号",
        dataIndex: "code",
        width: 180,
        key: "code",
        align: "center",
      },
      {
        title: "更新时间",
        dataIndex: "update_time",
        width: 180,
        key: "update_time",
        align: "center",
      },
      {
        title: "操作",
        width: 180,
        dataIndex: "operator",
        key: "operator",
        align: "center",
        render: (_, record) => {
          return (
            <Popover
              trigger="hover"
              content={
                <>
                  <div>
                    <a
                      onClick={() => {
                        ajax.getPoleInfo({ id: record.id }).then((res) => {
                          if (res.status === 20000) {
                            setCheckPoleModal({
                              visible: true,
                              record: res.data,
                            });
                          }
                        });
                      }}
                    >
                      查看
                    </a>
                  </div>
                  <div>
                    <a
                      onClick={() => {
                        getEditRoadDevice(record)
                        getDevice(record)
                        ajax.getPoleInfo({ id: record.id }).then((res) => {
                          setEditTitle(true)
                          if (res.status === 20000) {
                            const { data } = res;
                            let videoIds = [];
                            if (
                              data.video_device_ids !== null &&
                              data.video_device_ids !== ""
                            ) {
                              videoIds = data.video_device_ids
                                .split(",")
                                .map((item) => +item);
                            }
                            let monitorIds = [];
                            if (
                              data.monitor_device_ids !== null &&
                              data.monitor_device_ids !== ""
                            ) {
                              monitorIds = data.monitor_device_ids
                                .split(",")
                                .map((item) => +item);
                            }
                            setEditPoleModal({
                              ...editPoleModal,
                              visible: true,
                              record: data,
                              isEdit: 1,
                            });
                            editPoleForm.setFieldsValue({
                              code: data.code,
                              has_pole: data.has_pole,
                              video_device_ids: videoIds,
                              monitor_device_ids: monitorIds,
                            });
                            setLngLatModal({
                              ...lngLatModal,
                              value: data.lng_lat,
                            });
                          }
                        });
                      }}
                    >
                      编辑
                    </a>
                  </div>
                  <div>
                    <a
                      onClick={() => {
                        setPoleModal({ visible: true, id: [record.id] });
                      }}
                    >
                      删除
                    </a>
                  </div>
                </>
              }
            >
              <Button type="primary">操作</Button>
            </Popover>
          );
        },
      },
    ],
    key: "id",
    exporturl: "/api/bpm/device/export_pole_position",
    downloadUrl: "/api/bpm/device/road_set_pole_position_import_template",
    importProps: {
      name: "file",
      action: "/PMS/api/bpm/device/road_set_import_pole_position",
      data: { road_id: parking_id },
      headers: {
        Authorization: getToken(),
      },
      onChange(info) {
        if (info.file.status !== "uploading") {
          console.log(info.file, info.fileList);
        }
        if (info.file.status === "done") {
          if (info.file.response.status === 20000) {
            message.success(`${info.file.name} 上传成功`);
            formRef.current.getList();
          } else {
            message.error(info.file.response.message);
          }
        } else if (info.file.status === "error") {
          message.error(`${info.file.name} file upload failed.`);
        }
      },
    },
    search: function (params) {
      ajax
        .getPoleListData(params)
        .then((res) => {
          if (res.status === 20000) {
            setResultData({
              data: res.data.list,
              total_records: res.data.total,
            });
            setLoading(false)
          } else {
            message.error(res.message);
          }
        })
        .catch((err) => console.error(err));
    },
    create: function (params) {
      setEditTitle(false)
      getRoadDevice(parking_id);
      getRoadMonitorDevice(parking_id);
      console.log(12122);
      setEditPoleModal({
        ...editPoleModal,
        visible: true,
        record: {},
        isEdit: 0,
      });
      editPoleForm.resetFields();
      setLngLatModal({
        ...lngLatModal,
        value: [],
      });
    },
  };
  useEffect(() => {
    getAllBerth();
  }, [currentObj]);
  //计费规则
  const billingRule = {
    form: [
      {
        label: "计费规则",
        type: "select",
        name: "rule",
        options: billRuleList,
      },
    ],
    columns: [
      {
        title: "序号",
        dataIndex: "index",
        key: "index",
        align: "center",
        render: (_, record, index) => {
          return index + 1;
        },
      },
      {
        title: "规则名称",
        dataIndex: "rule_name",
        key: "rule_name",
        align: "center",
      },
      {
        title: "车辆类型",
        dataIndex: "vehicle_type_name",
        key: "vehicle_type_name",
        align: "center",
      },
      {
        title: "计费说明",
        dataIndex: "note",
        key: "note",
        align: "center",
      },
      {
        title: "是否按泊位计费",
        dataIndex: "berth_ids",
        key: "berth_ids",
        align: "center",
        render: (text) => {
          return text === "" ? "否" : "是";
        },
      },
      {
        title: "更新时间",
        dataIndex: "update_time",
        key: "update_time",
        align: "center",
      },
      {
        title: "操作",
        dataIndex: "operator",
        key: "operator",
        align: "center",
        render: (_, record) => {
          return (
            <Popover
              trigger="hover"
              content={
                <>
                  <div>
                    <a
                      onClick={() => {
                        setCurRuleRecord(record);
                        setRuleDetailModal(true);
                      }}
                    >
                      查看
                    </a>
                  </div>
                  <div>
                    <a
                      onClick={() => {
                        setCurRuleRecord(record);
                        console.log(record);
                        ruleForm.setFieldsValue({
                          vehicle_type: record.vehicle_type,
                          rule_id: record.rule_id,
                          is_select: record.berth_ids === "" ? 0 : 1,
                          id: record.id
                        });
                        // setSelectedBerth(record.berth_ids.split(",").map(item => +item))
                        setRuleModal(true);
                        // setIsRuleEdit(true);
                        setIsRuleEdit(true);
                        setShowBerthSelect(false);
                        if (record.berth_ids != '') {
                          setShowBerthSelect(true);
                          setIsRuleEdit(true);

                        }

                        // }
                        let data = {
                          road_id: parking_id,
                          vehicle_type: record.vehicle_type,
                          id: record.id
                        }
                        ajax
                          .getRuleBerth(data)
                          .then((res) => {
                            if (res.status === 20000) {
                              res.data.left.map(item => {
                                item.key = item.value
                                return item
                              })
                              setAllBerthList(res.data.left);
                              setSelectedBerth(res.data.right)
                              console.log(res.data.list);
                            } else {
                              message.error(res.message)
                            }
                          })
                      }}
                    >
                      编辑
                    </a>
                  </div>
                  <div>
                    <a
                      onClick={() => {
                        setCurRuleRecord(record);
                        setRuleDelModal({ id: record.id, visible: true });
                      }}
                    >
                      删除
                    </a>
                  </div>
                </>
              }
            >
              <Button type="primary">操作</Button>
            </Popover>
          );
        },
      },
    ],

    exporturl: "",
    downloadUrl: "",
    importProps: {
      name: "file",
      action: "/PMS/api/bpm/berth/import",
      onChange(info) {
        if (info.file.status !== "uploading") {
          console.log(info.file, info.fileList);
        }
        if (info.file.status === "done") {
          if (info.file.response.status === 20000) {
            message.success(`${info.file.name} 上传成功`);
          } else {
            message.error(info.file.response.message);
          }
        } else if (info.file.status === "error") {
          message.error(`${info.file.name} file upload failed.`);
        }
      },
    },
    key: "rule_name",
    search: function (params) {
      ajax
        .getRoadRuleList(params)
        .then((res) => {
          if (res.status === 20000) {
            setResultData({
              data: res.data.list,
              total_records: res.data.total,
            });
            setLoading(false)
          } else {
            message.error(res.message);
          }
        })
        .catch((err) => console.error(err));
    },
    create: function () {
      setCurRuleRecord({
        vehicle_type: null,
        rule_id: null,
        is_select: 0,
      });
      setShowBerthSelect(false);
      ruleForm.setFieldsValue({
        vehicle_type: null,
        rule_id: null,
        is_select: 0,
      });
      setIsRuleEdit(false);
      setRuleModal(true);
    },
  };
  //form子组件
  const formRef = React.useRef();
  //收费员管理
  const tollCollector = {
    form: [
      {
        label: "收费员姓名",
        type: "input",
        placeholder: "请输入内容",
        name: "collect_name",
      },
      {
        label: "登陆名",
        type: "input",
        placeholder: "请输入内容",
        name: "login_name",
      },
    ],
    columns: [
      {
        title: "收费员姓名",
        dataIndex: "name",
        key: "name",
        align: "center",
      },
      {
        title: "员工编号",
        dataIndex: "number",
        key: "number",
        align: "center",
      },
      {
        title: "PDA账号",
        dataIndex: "pda_number",
        key: "pda_number",
        align: "center",
      },
      {
        title: "操作",
        dataIndex: "operator",
        key: "operator",
        align: "center",
        render: (_, record) => {
          return (
            <Popover
              trigger="hover"
              content={
                <div>
                  <a
                    onClick={() => {
                      setDelTollModal({
                        ...delTollModal,
                        visible: true,
                        id: record.id,
                      });
                    }}
                  >
                    删除
                  </a>
                </div>
              }
            >
              <Button type="primary">操作</Button>
            </Popover>
          );
        },
      },
    ],
    initialValues: {
      collect_name: "",
      login_name: "",
    },
    exporturl: "",
    key: "number",
    search: function (params) {
      ajax
        .getTollList(params)
        .then((res) => {
          if (res.status === 20000) {
            setResultData({
              data: res.data.list,
              total_records: res.data.total,
            });
            setLoading(false)
          } else {
            message.error(res.message);
          }
        })
        .catch((err) => console.error(err));
    },
    create: function (params) {
      setTollModal(true);
    },
  };
  //目前页面的对象
  const [currentObj, setCurrentObj] = useState(berthManage);

  const [type, setType] = useState(1);
  const [loading, setLoading] = useState(false);
  const [resultData, setResultData] = useSetState({
    // 请求结果
    total_records: 0,
    data: [],
  });
  //批量导入弹窗
  const [importGroup, setImportGroup] = useState({
    visible: false,
    imPortUrl: "",
  });
  //泊位弹窗
  const [berthModal, setBerthModal] = useState({
    visible: false,
    record: {},
  });
  //编辑泊位弹窗
  const [editBerthModal, setEditBerthModal] = useState(false);
  //是编辑还是添加的标志
  const [isEdit, setIsEdit] = useState(true);
  //经纬度弹窗和经纬度数据
  const [lngLatVisible, setLngLatVisible] = useState(false);
  const [lngLat, setLngLat] = useState([]);
  //操作选中的数据
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const [pageData, setPageData] = useSetState({
    // 分页参数
    pn: 1,
    page_size: 20,
  });
  //收费员弹窗
  const [tollModal, setTollModal] = useState(false);
  //可以选择的收费员列表
  const [canSelectTollList, setCanSelectTollList] = useState([]);
  //已选择的收费员列表
  const [hasSelectTollList, setHasSelectTollList] = useState([]);
  //rowkey
  const [rowKey, setRowKey] = useState("");

  //计费规则添加弹窗
  const [ruleModal, setRuleModal] = useState(false);

  //确认弹框的数据
  const [confirmModalData, setConfirmModalData] = useState({
    visible: false,
    type: 1, //1上线 2下线 3 删除
    ids: [],
    func: () => { },
  });
  //计费规则添加对应的泊位号
  const [allBerthList, setAllBerthList] = useState([]);
  //计费规则编辑弹窗是编辑还是新增
  const [isRuleEdit, setIsRuleEdit] = useState(false);
  //计费规则
  const [billRuleList, setBillRuleList] = useState([]);
  //编辑计费规则时候的记录信息
  const [curRuleRecord, setCurRuleRecord] = useState({});
  //选择中的泊位号
  const [selectedBerth, setSelectedBerth] = useState([]);
  //ruleDetailModal
  const [ruleDetailModal, setRuleDetailModal] = useState(false);
  //删除弹框
  const [ruleDelModal, setRuleDelModal] = useState({
    visible: false,
    id: [],
  });
  //收费员管理-删除收费员
  const [delTollModal, setDelTollModal] = useState({
    visible: false,
    id: -1,
    delFunc: deletToll,
    close: () => {
      setDelTollModal({ ...delTollModal, visible: false });
    },
  });
  //数据采集设备管理添加弹窗
  const [dataAcquistionModal, setDataAcquistionModal] = useState({
    visible: false,
    record: {},
    form: dataForm,
    isEdit: 0,
  });
  //数据采集设备新增弹窗里面啊的选择数据
  const [dataAcquistionSelect, setDataAcquistionSelect] = useState({
    typeList: [],
    brandList: [],
    funcList: [],
  });
  //数据采集设备泊位列表数据
  const [dataAcquistionBerth, setDataAcquistionBerth] = useState([]);
  const [dataAcquistionTargetKeys, setDataAcquistionTargetKeys] = useState([]);

  //数据采集设备上线，下线，删除弹窗
  const [dataStatusChangeModal, setDataStatusChangeModal] = useState({
    visible: false,
    type: 1,
    record: {},
  });

  //杆位删除
  const [poleModal, setPoleModal] = useState({
    visible: false,
    id: [],
  });
  //杆位查看弹窗
  const [checkPoleModal, setCheckPoleModal] = useState({
    visible: false,
    record: {},
  });
  const [getMonitorData, setGetMonitorData] = useState([])
  const [getRoadData, seGetRoadData] = useState([])
  //杆位修改弹窗
  const [editPoleModal, setEditPoleModal] = useState({
    form: editPoleForm,
    visible: false,
    isEdit: 0,
    record: {},
  });
  //video_device
  const [videoDeviceList, setVideoDeviceList] = useState([]);
  const [monitorDeviceList, setMonitorDeviceList] = useState([]);
  //杆位管理地图选点弹窗
  const [lngLatModal, setLngLatModal] = useState({
    visible: false,
    value: [],
  });
  //数据采集设备管理页面弹窗
  const [dataAcquistionDetail, setDataAcquistionDetail] = useState({
    visible: false,
    record: {},
  });

  function onShowSizeChange(pn, page_size) {
    setPageData({ pn, page_size });
  }
  //table选择
  const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      let arr = [];
      selectedRows.map((res) => {
        arr.push(res.id);
      });
      setSelectedRowKeys(arr);
    },
    getCheckboxProps: (record) => ({
      disabled: record.name === "Disabled User",
      // Column configuration not to be checked
      name: record.berth_code,
      // key: record.berth_code,
    }),
  };
  //收费员管理-添加收费员
  function addToll(road_id, ids) {
    ajax
      .addToll({ road_id, ids })
      .then((res) => {
        if (res.status === 20000) {
          message.success(res.message);
          formRef.current.getList();
        } else {
          message.error(res.message);
        }
      })
      .catch((err) => console.error(err));
  }
  const [getDeviceType, setGetDeviceType] = useState([])
  const deviceType = () => {
    let arr = sysConfig.berthType
    let newArr = arr.slice(1)
    setGetDeviceType(newArr)
  }
  useEffect(() => {
    deviceType()
  }, [])
  //1：泊位管理上线，2：下线，3：已删除
  function changeBerthManage(status) {
    console.log(selectedRowKeys);
    if (selectedRowKeys.length != []) {
      setConfirmModalData({
        ...confirmModalData,
        type: status,
        ids: selectedRowKeys,
        visible: true,
      });
    } else {
      message.error("请至少选择一条数据");
    }
  }
  const [getLeftBerth, setLeftGetBerth] = useState([]);
  const [selectedKeys, setSelectedKeys] = useState([]);
  const [targetKeys, setTargetKeys] = useState([]);

  function getEditInRoad(record) {
    let data = {
      video_equipment_id: record.id,
      road_id: record.road_id,
    };
    ajax.getEditInRoadData(data).then((res) => {
      if (res.status == 20000) {
        let temparr = [];
        let temparrRight = [];
        res.data.left.map((item) => {
          temparr.push({
            key: item.value + "",
            title: item.label,
          });
        });
        setLeftGetBerth(temparr);
        setTargetKeys(res.data.right);
      }
    });
  }
  const onChangeSelect = (nextTargetKeys, direction, moveKeys) => {
    console.log("targetKeys:", nextTargetKeys);
    console.log("direction:", direction);
    console.log("moveKeys:", moveKeys);
    setTargetKeys(nextTargetKeys);
  };
  const onSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {
    console.log("sourceSelectedKeys:", sourceSelectedKeys);
    setSelectedKeys([...sourceSelectedKeys, ...targetSelectedKeys]);
  };
  //收费员管理-删除收费员
  function deletToll(id) {
    ajax
      .delToll({ id })
      .then((res) => {
        if (res.status === 20000) {
          message.success(res.message);
          formRef.current.getList();
        } else {
          message.error(res.message);
        }
      })
      .catch((err) => console.error(err));
  }
  useEffect(() => {
    console.log(formRef.current);
  }, [formRef.current])


  function getRoadTollList() {
    ajax
      .getRoadTollList({ road_id: parking_id })
      .then((res) => {
        if (res.status === 20000) {
          let data = res.data.map((item) => {
            item.label = item.text;
            item.key = item.value;
            return item;
          });
          setCanSelectTollList(data);
        } else {
          message.error(res.message);
        }
      })
      .catch((err) => console.error(err));
  }
  const [getCarType, setGetCarType] = useState(true)
  const [getCarTypeValue, setGetCarTypeValue] = useState({})
  //处理添加计费规则-车辆类型切换
  function handleCarTypeChange(value) {
    setGetCarTypeValue(value)
    if (value === '') {
      setGetCarType(true)
    } else {
      setGetCarType(false)
      let data = {
        road_id: parking_id,
        vehicle_type: value
      }
      ajax
        .getRuleBerth(data)
        .then((res) => {
          if (res.status === 20000) {
            res.data.left.map(item => {
              item.key = item.value
              return item
            })
            setAllBerthList(res.data.left);
          } else {
            message.error(res.message)
          }
        })
        .catch((err) => console.error(err));
    }
    if (value === void 0) {


      return;
    }
  }
  const [getCarTypeType, setGetCarTypeType] = useState({})
  useEffect(() => {
    if (selectedBerth.length != []) {
      setGetCarTypeType(0)
    }
  }, [selectedBerth])
  //新增或编辑计费规则
  function addOrEditRoadRule() {
    function addRule(data) {
      if (getCarTypeType === 1 && selectedBerth.length == []) {
        message.error('请选择对应的泊位号')
      } else {
        ajax
          .addOrEditRoadRule(data)
          .then((res) => {
            if (res.status === 20000) {
              setRuleModal(false);
              formRef.current.getList();
              setSelectedBerth([]);
              setGetCarType(true)
            } else {
              message.error(res.message);
            }
          })
          .catch((err) => console.error(err));
      }
    }


    function editRule(data) {
      console.log(data);

      data.berth_ids = selectedBerth;
      ajax
        .editRoadRule(data)
        .then((res) => {
          if (res.status === 20000) {
            setRuleModal(false);
            formRef.current.getList();
            setSelectedBerth([]);
          } else {
            message.error(res.message);
          }
        })
        .catch((err) => console.error(err));
    }

    ruleForm
      .validateFields()
      .then((res) => {
        const data = {
          road_id: parking_id,
          type: isRuleEdit ? "edit" : "add",
          id: isRuleEdit ? curRuleRecord.id : null,
          ...ruleForm.getFieldsValue(),
          berth_ids:
            ruleForm.getFieldsValue().is_select === 0 ? [] : selectedBerth,
        };
        switch (isRuleEdit) {
          case true:
            editRule(data);
            break;
          case false:
            addRule(data);
            break;
        }
      })
      .catch((err) => {
        message.error(err);
      });
  }
  //数据采集设备管理添加弹窗里面的Select数据
  async function getDataSelect() {
    const typeListAjax = ajax.getDeviceTypeList();
    const brandListAjax = ajax.getAllBrandNameList();
    const funcListAjax = ajax.getDeviceFuncList();
    const [typeList, brandList, funcList] = await Promise.all([
      typeListAjax,
      brandListAjax,
      funcListAjax,
    ]);
    setDataAcquistionSelect({
      typeList: typeList.data,
      brandList: brandList.data,
      funcList: funcList.data,
    });
  }
  //数据采集设备管理提交接口
  function handleDataAcquistionModal() {
    function addDevice(res) {
      ajax
        .addDevice({
          ...res,
          road_id: parking_id,
          berth_ids: dataAcquistionTargetKeys,
        })
        .then((res) => {
          if (res.status === 20000) {
            message.success(res.message);
            setDataAcquistionModal({
              ...dataAcquistionModal,
              visible: false,
            });
            formRef.current.getList();
            setModalBtnLoading(false)

          } else {
            message.error(res.message);
            setModalBtnLoading(false)
          }
        });
    }
    function editDevice(res) {
      console.log(res);
      ajax
        .editDevice({
          ...res,
          id: getIdValue,
          road_id: parking_id,
          berth_ids: selectedKeys,
        })
        .then((res) => {
          if (res.status === 20000) {
            message.success(res.message);
            setDataAcquistionModal({
              ...dataAcquistionModal,
              visible: false,
            });
            formRef.current.getList();
          } else {
            message.error(res.message);
          }
        });
    }
    dataAcquistionModal.form.validateFields().then(
      (res) => {
        switch (dataAcquistionModal.isEdit) {
          case 0:
            addDevice(res);
            break;
          case 1:
            editDevice(res);
            break;
        }
      },
      (err) => {
        console.error(err);
      }
    );
  }
  //数据采集设备上线下线删除接口
  function handleDataStatusChange() {
    const id = [dataStatusChangeModal.record.id];
    console.log(id);
    //上线
    function online(id) {
      ajax
        .onlineOrOffline({
          id,
        })
        .then((res) => {
          if (res.status === 20000) {
            message.success(res.message);
            setDataStatusChangeModal({
              ...dataStatusChangeModal,
              visible: false,
            });
            formRef.current.getList();
          } else {
            message.error(res.message);
          }
        });
    }
    //下线
    function offline(id) {
      ajax.offlineDevice({ id }).then((res) => {
        if (res.status === 20000) {
          message.success(res.message);
          setDataStatusChangeModal({
            ...dataStatusChangeModal,
            visible: false,
          });
          formRef.current.getList();
        } else {
          message.error(res.message);
        }
      });
    }
    //删除
    function deleteDevice(id) {
      ajax.delDataDevice({ id }).then((res) => {
        if (res.status === 20000) {
          message.success(res.message);
          setDataStatusChangeModal({
            ...dataStatusChangeModal,
            visible: false,
          });
          formRef.current.getList();
        } else {
          message.error(res.message);
        }
      });
    }

    switch (dataStatusChangeModal.type) {
      case 1:
        online(id);
        break;
      case 2:
        offline(id);
        break;
      case 3:
        deleteDevice(id);
        break;
      default:
        break;
    }
  }
  //获取所有泊位
  function getAllBerth() {
    ajax.getAllBerth({ road_id: parking_id, is_bind_device: 1 }).then((res) => {
      if (res.status === 20000) {
        let _data = res.data.map((item) => {
          item.key = item.value;
          return item;
        });
        setDataAcquistionBerth(_data);
      } else {
        message.error(res.message);
      }
    });
  }
  //获取视频设备
  function getRoadDevice(id) {
    ajax.getRoadDevice({ road_id: id }).then((res) => {
      if (res.status === 20000) {
        res.data.left.map((item) => {
          item.key = item.value;
          return item;
        });
        // console.log(res.data.left);
        setVideoDeviceList(res.data.left);
      } else {
        message.error(res.message);
      }
    });
  }
  const [getEditTarket, setGetEditTarket] = useState([])
  const [getLeftEditTarket, setGetLeftEditTarket] = useState([])
  const [getSelectedKeys, setGetSelectedKeyst] = useState([])
  function getEditRoadDevice(record) {
    let data = {
      road_id: parking_id,
      id: record.id
    }
    ajax.getRoadDevice(data).then((res) => {
      if (res.status === 20000) {
        res.data.left.map((item) => {
          item.key = item.value;
          return item;
        });
        setGetLeftEditTarket(res.data.left);
        setGetEditTarket(res.data.right);
      } else {
        message.error(res.message);
      }
    });
  }
  const onSelectRoadChange = (sourceSelectedKeys, targetSelectedKeys) => {
    console.log("sourceSelectedKeys:", sourceSelectedKeys);
    setGetSelectedKeyst([...sourceSelectedKeys, ...targetSelectedKeys]);
  };
  const onSelectChangeRoad = (nextTargetKeys, direction, moveKeys) => {
    setGetEditTarket(nextTargetKeys);
  };
  //获取监控设备
  function getRoadMonitorDevice(id) {
    ajax.getRoadMonitorDevice({ road_id: id }).then((res) => {
      if (res.status === 20000) {
        res.data.left.map((item) => {
          item.key = item.value;
          return item;
        });
        setMonitorDeviceList(res.data.left);
      } else {
        message.error(res.message);
      }
    });
  }
  const [getDeviceTarket, setGetDeviceTarket] = useState([])
  const [getLeftDeviceTarket, setGetLeftDeviceTarket] = useState([])
  const [getLeftDevicetargetKey, setGetLeftDevicetargetKey] = useState([])
  function getDevice(record) {
    let data = {
      road_id: parking_id,
      id: record.id
    }
    ajax.getRoadMonitorDevice(data).then((res) => {
      if (res.status === 20000) {
        res.data.left.map((item) => {
          item.key = item.value;
          return item;
        });
        setGetLeftDeviceTarket(res.data.left);
        setGetDeviceTarket(res.data.right);
      } else {
        message.error(res.message);
      }
    });
  }
  const onSelectDeviceChange = (sourceSelectedKeys, targetSelectedKeys) => {
    console.log("sourceSelectedKeys:", sourceSelectedKeys);
    setGetLeftDevicetargetKey([...sourceSelectedKeys, ...targetSelectedKeys]);
  };
  const onSelectChangeDevice = (nextTargetKeys, direction, moveKeys) => {
    setGetDeviceTarket(nextTargetKeys);
  };
  //获取计费规则
  const getBillRule = (operator_id) => {
    ajax
      .getBillRule({ operator_id })
      .then((res) => {
        if (res.status === 20000) {
          setBillRuleList(res.data);
          return Promise.resolve(res.data);
        } else {
          message.error(res.message);
        }
      })
      .then((res) => {
        billingRule.form[0].options = res;
        setCurrentObj(billingRule);
      });
  };

  const submitPole = () => {
    const isEdit = editPoleModal.isEdit;

    function addPole(params) {
      ajax.addPolePosition(params).then((res) => {
        if (res.status === 20000) {
          setEditPoleModal({ ...editPoleModal, visible: false });
          message.success(res.message);
          formRef.current.getList();
          seGetRoadData([])
          setGetMonitorData([])
        } else {
          message.error(res.message);
        }
      });
    }

    function editPole(params) {
      ajax.editPolePosition(params).then((res) => {
        if (res.status === 20000) {
          setEditPoleModal({ ...editPoleModal, visible: false });
          message.success(res.message);
          formRef.current.getList();
        } else {
          message.error(res.message);
        }
      });
    }

    editPoleForm
      .validateFields()
      .then((value) => {
        console.log(value);
        if (editPoleModal.isEdit) {
          value = { ...value, id: editPoleModal.record.id };
        } else {
          value = { ...value };
        }
        value = { ...value, lng_lat: lngLatModal.value, road_id: parking_id };
        switch (isEdit) {
          case 1:
            editPole(value);
            break;
          case 0:
            addPole(value);
            break;
        }
      })
      .catch((err) => {
        console.error(err);
      });
  };

  //删除杆位
  function delPolePosition(params) {
    ajax.delPolePosition(params).then((res) => {
      if (res.status === 20000) {
        message.success(res.message);
        setPoleModal({ ...poleModal, visible: false });
        formRef.current.getList();
      } else {
        message.error(res.message);
      }
    });
  }
  function confirmDelPole() {
    delPolePosition({ id: poleModal.id });
  }
  const beforeUpload = (file) => {
    const isExcel = file.type === 'application/vnd.ms-excel' || file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
    if (!isExcel) {
      message.error('你只能上传Excel文件!');
    }
    return isExcel || Upload.LIST_IGNORE;
  };
  useEffect(() => {
    switch (type) {
      case 1:
        setCurrentObj(berthManage);
        setRowKey(berthManage.key);
        setConfirmModalData({
          ...confirmModalData,
          func: (ids, status) =>
            ajax.editStatus({
              ids: ids,
              status,
            }).then(res => {
              if (res.status === 20000) {

                message.success(res.message)
              }
            }),
        });
        break;
      case 2:
        setCurrentObj(dataDevice);
        setRowKey(dataDevice.key);
        getDataSelect();
        getAllBerth();
        setConfirmModalData({
          ...confirmModalData,
          func: (ids, status) => {
            let func = null;
            switch (status) {
              case 1:
                func = ajax.onlineOrOffline({
                  id: ids,
                });
                break;
              case 2:
                func = ajax.offlineDevice({ id: ids });
                break;
              case 3:
                func = ajax.delDataDevice({ id: ids });
            }
            return func;
          },
        });
        break;
      case 3:
        setCurrentObj(poleManage);
        setRowKey(poleManage.key);
        setConfirmModalData({
          ...confirmModalData,
          func: (ids, status) => ajax.delPolePosition({ id: ids }),
        });
        break;
      case 4:
        getBillRule(operator_id);
        break;
      case 5:
        setCurrentObj(tollCollector);
        setRowKey(tollCollector.key);
        getRoadTollList();

        break;
      default:
        break;
    }
  }, [type]);
  return (
    <div className="ConfigRoad">
      <div className="left-search">
        <div className="title">{"查询条件"}</div>
        <div className="searchWrap">
          <SearchPart
            ref={formRef}
            road_id={parking_id}
            formData={currentObj.form}
            search={currentObj.search}
            initialValues={currentObj.initialValues}
            pageData={pageData}
            setSelectedRowKeys={setSelectedRowKeys}
            total={resultData.total_records}
            exporturl={currentObj.exporturl}
            closeConfirmModal={() => {
              setConfirmModalData({ ...confirmModalData, visible: false });
            }}
            confirmModalData={confirmModalData}
            delTollModal={delTollModal}
            isShowExportBtn={type !== 4 && type !== 5}
          />
        </div>
      </div>
      <div className="right-list">
        <div className="total-row-wrapper">
          <span className="number-wrapper">
            {/* <span>
              <Button
                type="primary"
                style={{ marginRight: "10px" }}
                onClick={() => {
                  navigate(-1);
                }}
              >
                返回
              </Button>
            </span> */}
            <span className="letter">共查询到</span>
            <span className="total-number"> {resultData.total_records}</span>
            <span className="letter">条结果</span>
          </span>
          <div>
            <Button
              style={{ margin: "0 10px" }}
              type="primary"
              onClick={currentObj.create}
            >
              添加
            </Button>
            {type === 4 || type === 5 ? (
              <></>
            ) : (
              <Button
                type="primary"
                onClick={() => {
                  setImportGroup({ ...importGroup, visible: true });
                }}
              >
                批量导入
              </Button>
            )}
          </div>
        </div>
        <div className="tabs-box">
          <Tabs
            activeKey={type}
            items={[
              {
                key: 1,
                label: "泊位管理",
              },
              {
                key: 2,
                label: "数据采集设备管理",
              },
              {
                key: 3,
                label: "杆位管理",
              },
              {
                key: 4,
                label: "计费规则",
              },
              {
                key: 5,
                label: "收费员管理",
              },
            ]}
            hideAdd={true}
            onChange={(type) => {
              setLoading(true)
              setType(type);
            }}
          />
        </div>
        <ResultFlow
          hasLoad={true}
          ajaxLoad={loading}
          resultData={resultData}
          message={"暂无数据"}
        >
          <div className="table-wrap">
            <Table
              rowKey={rowKey}
              // loading={loading}
              rowSelection={
                type === 4 || type === 5
                  ? false
                  : {
                    type: "checkbox",
                    ...rowSelection,
                  }
              }
              // className="yisa-table"
              columns={currentObj.columns}
              dataSource={resultData.data}
              pagination={false}
            />
          </div>
          <div className="page-part">
            {type === 4 || type === 5 ? (
              <></>
            ) : (
              <div className="button-part">
                {type === 3 ? (
                  <></>
                ) : (
                  <>
                    <Button
                      type="primary"
                      onClick={() => {
                        changeBerthManage(1);
                      }}
                    >
                      上线
                    </Button>
                    <Button
                      type="primary"
                      onClick={() => {
                        changeBerthManage(2);
                      }}
                    >
                      下线
                    </Button>
                  </>
                )}
                <Button
                  type="primary"
                  onClick={() => {
                    changeBerthManage(3);
                  }}
                >
                  删除
                </Button>
              </div>
            )}

            <Pagination
              className="pagination-common"
              showSizeChanger={true}
              showQuickJumper={true}
              // showTotal={() => `共 ${total_records} 条`}
              total={resultData.total_records}
              current={pageData.pn}
              pageSize={pageData.page_size}
              pageSizeOptions={dictionary?.pageSizeOptions}
              onChange={onShowSizeChange}
              onShowSizeChange={onShowSizeChange}
            />
          </div>
        </ResultFlow>
      </div>
      <Modal
        open={importGroup.visible}
        destroyOnClose={true}
        style={{ width: 88 }}
        onCancel={() => {
          setImportGroup({ ...importGroup, visible: false });
        }}
        title={"批量导入"}
        footer={null}
      >
        <div>
          <p>
            1.请先获取批量添加设备的Excel模板将需要添加的信息填写后进行上传该Excel文件，
            上传非规范文件可能造成数据错误，
            <ExportPMS
              url={currentObj.downloadUrl}
              data={{ road_id: parking_id }}
            >
              点击下载
            </ExportPMS>
            模板文件。
          </p>
          <p>2.请选择上传文件，并上传。</p>
          <Upload {...currentObj.importProps} beforeUpload={beforeUpload}>
            <Button type="primaryimport { pages } from '@/pages';" icon={<UploadOutlined />}>
              上传
            </Button>
          </Upload>
        </div>
      </Modal>
      <Modal
        open={berthModal.visible}
        title="查看泊位"
        onCancel={() => {
          setBerthModal({ ...berthModal, visible: false });
        }}
      >
        <Descriptions column={1}>
          <Descriptions.Item label="泊位号">
            {berthModal.record.berth_code}
          </Descriptions.Item>
          <Descriptions.Item label="经纬度">
            {berthModal.record.lng_lat}
          </Descriptions.Item>
          <Descriptions.Item label="服务属性">
            <Checkbox.Group
              defaultValue={berthModal.record.service_type}
              disabled={true}
              options={[
                {
                  label: "潮汐泊位",
                  value: 1,
                },
                {
                  label: "共享泊位",
                  value: 2,
                },
                {
                  label: "充电泊位",
                  value: 3,
                },
              ]}
            />
          </Descriptions.Item>
          <Descriptions.Item label="泊位类型">
            {sysConfig.berthType[berthModal.record.berth_type]?.label}
          </Descriptions.Item>
          <Descriptions.Item label="充电泊位">
            {berthModal.record.charge === 0 ? "否" : "是"}
          </Descriptions.Item>
          <Descriptions.Item label="ETC是否开启">
            {berthModal.record.etc_status_name}
          </Descriptions.Item>
          <Descriptions.Item label="计费规则">
            <TextArea disabled value={berthModal.record.rule_id} />
          </Descriptions.Item>
        </Descriptions>
      </Modal>
      {/* 编辑泊位 */}
      <Modal
        title={isEdit ? "编辑泊位" : "添加泊位"}
        open={editBerthModal}
        onCancel={() => {
          setEditBerthModal(false);
        }}
        onOk={() => {
          let reg = /^[2-9]\d*$|^[1-9]\d+\d*$/
          console.log(berthForm.getFieldsValue().berth_count);
          if (berthForm.getFieldsValue().berth_code === null) {
            message.error('请填写泊位号')
          } else if (berthForm.getFieldsValue().etc_status === null) {
            message.error('请选择ETC是开开启')
          } else if (berthForm.getFieldsValue().berth_type === null) {
            message.error('请选择泊位类型')
          } else if ((!reg.test(berthForm.getFieldsValue().berth_count) && berthForm.getFieldsValue().berth_count)) {
            message.error('添加泊位数为大于1的整数')
          } else {
            let arr = berthForm.getFieldsValue().etc_status
            let str = arr.toString()
            const params = {
              ...berthForm.getFieldsValue(),
              lng_lat: lngLat,
              road_id: parking_id,
              etc_status: Number(str),
            };
            console.log(params);
            function addBerth(params) {
              ajax
                .addBerth(params)
                .then((res) => {
                  if (res.status === 20000) {
                    message.success(res.message);
                    setEditBerthModal(false);
                    formRef.current.getList();
                    berthForm.resetFields();
                    setLngLat([]);
                  } else {
                    message.error(res.message);
                  }
                })
                .catch((err) => console.error(err));
            }
            function editBerth(params) {
              ajax
                .editBerth(params)
                .then((res) => {
                  if (res.status === 20000) {
                    message.success(res.message);
                    setEditBerthModal(false);
                    formRef.current.getList();
                    berthForm.resetFields();
                    setLngLat([]);
                  } else {
                    message.error(res.message);
                  }
                })
                .catch((err) => console.error(err));
            }
            switch (isEdit) {
              case true:
                editBerth(params);
                break;
              case false:
                addBerth(params);
                break;
            }
          }
        }}
      >
        <div
          style={{
            padding: "0 30px",
          }}
        >
          <Form
            form={berthForm}
            labelCol={{ span: 6 }}
            wrapperCol={{ span: 18 }}
            colon={false}
            initialValues={{
              berth_code: "",
              service_type: null,
              berth_type: null,
              etc_status: null,
            }}
          >
            <Form.Item label="泊位号" name="berth_code" required>
              <Input disabled={isEdit} />
            </Form.Item>
            {!isEdit && (
              <Form.Item label="批量添加泊位数" name="berth_count">
                <Input />
              </Form.Item>
            )}
            <Form.Item label="服务属性" name="service_type">
              <Checkbox.Group
                value={getEditData.service_type}
                options={[
                  {
                    label: "潮汐泊位",
                    value: 1,
                  },
                  {
                    label: "共享泊位",
                    value: 2,
                  },
                  {
                    label: "充电泊位",
                    value: 3,
                    disabled: false,
                  },
                ]}
              />
            </Form.Item>
            <Form.Item label="ETC是否开启" name="etc_status" required>
              <Radio.Group
                placeholder="请选择ETC是否开启"
                options={[
                  {
                    label: "否",
                    value: 0,
                  },
                  {
                    label: "是",
                    value: 1,
                  },
                ]}
              />
            </Form.Item>
            <Form.Item label="泊位类型" name="berth_type" required>
              <Select
                placeholder="请选择泊位类型"
                options={getDeviceType}
              />
            </Form.Item>
            <Form.Item label="经纬度">
              <Input
                value={lngLat}
                addonAfter={
                  <SelectGaodeLngLat
                    open={() => setLngLatVisible(true)}
                    lngLatVisible={lngLatVisible}
                    getLntLat={(value) => {
                      setLngLat(value);
                    }}
                    close={() => setLngLatVisible(false)}
                  />
                }
              />
            </Form.Item>
          </Form>
        </div>
      </Modal>
      {/* 收费员管理添加弹窗 */}
      <Modal
        open={tollModal}
        title="收费员配置"
        onCancel={() => {
          setTollModal(false);
        }}
        onOk={() => {
          const ids = hasSelectTollList;
          addToll(parking_id, ids);
          setTollModal(false);
        }}
        width={770}
      >
        <Transfer
          dataSource={canSelectTollList}
          targetKeys={hasSelectTollList}
          onChange={(nexTargetKeys) => {
            setHasSelectTollList(nexTargetKeys);
            console.log(nexTargetKeys);
          }}
          render={(item) => item.label}
        />
        {/* <TreeSelectGroup
          unSelectedList={canSelectTollList}
          onChange={(list) => {
            setHasSelectTollList(list);
          }}
        /> */}
      </Modal>
      {/* 计费规则添加弹窗 */}
      <Modal
        open={ruleModal}
        title={isRuleEdit ? '编辑' : '添加'}
        width={1000}
        onCancel={() => {
          setRuleModal(false);
          setSelectedBerth([]);
        }}
        style={{
          top: 2,
        }}
        onOk={addOrEditRoadRule}
      >
        <Form
          form={ruleForm}
          colon={false}
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 18 }}
        >
          <Form.Item
            rules={[{ required: true }]}
            label="车辆类型"
            name="vehicle_type"
          >
            <Select
              disabled={isRuleEdit}
              style={{ width: 300 }}
              onChange={handleCarTypeChange}
              options={[
                {
                  label: "小型车",
                  value: 1,
                },
                {
                  label: "中型车",
                  value: 2,
                },
                {
                  label: "大型车",
                  value: 3,
                },
              ]}
            />
          </Form.Item>
          <Form.Item rules={[{ required: true }]} label="计费规则" name="rule_id">
            <Select style={{ width: 300 }} options={billRuleList} />
          </Form.Item>
          <Form.Item rules={[{ required: true }]} label="是否按泊位计费" style={{ marginLeft: 51 }} name="is_select">
            <Radio.Group
              disabled={getCarType || isRuleEdit}
              onChange={(e) => {
                setGetCarTypeType(e.target.value)
                console.log(e.target.value);
                if (e.target.value === 1) {

                  setShowBerthSelect(true);
                } else {
                  setShowBerthSelect(false);
                  setSelectedBerth([])

                }
              }}
              options={[
                {
                  label: "否",
                  value: 0,
                },
                {
                  label: "是",
                  value: 1,
                },
              ]}
            />
          </Form.Item>
          {showBerthSelect ? (
            <Form.Item
              label="对应的泊位号"
              shouldUpdate={(preValue, curValue) => {
                return curValue.vehicle_type !== preValue.vehicle_type;
              }}
            >
              <Transfer
                dataSource={allBerthList}
                targetKeys={selectedBerth}
                onChange={(nextTargetKeys) => {
                  setSelectedBerth(nextTargetKeys);
                }}
                render={(item) => item.label}
              />
              {/* <TreeSelectGroup
                unSelectedList={allBerthList}
                onChange={(value) => {
                  setSelectedBerth(value);
                }}
              /> */}
            </Form.Item>
          ) : null}
        </Form>
      </Modal>
      {/* 计费规则查看弹窗 */}
      <Modal
        title="查看计费规则"
        open={ruleDetailModal}
        onCancel={() => {
          setRuleDetailModal(false);
        }}
      >
        <Descriptions column={1}>
          <Descriptions.Item label="车辆类型">
            {curRuleRecord.vehicle_type_name}
          </Descriptions.Item>
          <Descriptions.Item label="计费规则">
            {curRuleRecord.rule_name}
          </Descriptions.Item>
          <Descriptions.Item label="是否按泊位计费">
            {curRuleRecord.berth_ids === "" ? "否" : "是"}
          </Descriptions.Item>
        </Descriptions>
      </Modal>
      {/* 删除弹框 */}
      <Modal
        title="提示"
        open={ruleDelModal.visible}
        onOk={() => {
          ajax.delRoadRule({ rule_id: ruleDelModal.id }).then((res) => {
            if (res.status === 20000) {
              setRuleDelModal({ ...ruleDelModal, visible: false });
              formRef.current.getList();
              message.success(res.message);
            } else {
              message.error(res.message);
            }
          });
        }}
        onCancel={() => {
          setRuleDelModal({ ...ruleDelModal, visible: false });
        }}
      >
        <p>确定删除吗？</p>
      </Modal>
      {/* 杆位添加或修改弹窗 */}
      <Modal
        width={770}
        open={editPoleModal.visible}
        onCancel={() => {
          setEditPoleModal({ ...editPoleModal, visible: false });
          setGetMonitorData([])
          seGetRoadData([])
        }}
        title={editTitle ? "编辑杆位" : "添加杆位"}
        onOk={submitPole}
      >
        <Form
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 18 }}
          colon={false}
          form={editPoleModal.form}
        >
          <Form.Item
            label="杆位号"
            name="code"
            rules={[{ required: true }]}
            required
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="是否自有杆"
            name="has_pole"
            rules={[{ required: true }]}
            required
          >
            <Radio.Group
              options={[
                {
                  label: "自有杆",
                  value: 1,
                },
                {
                  label: "外部杆",
                  value: 2,
                },
              ]}
            />
          </Form.Item>
          <Form.Item label="经纬度">
            <Input.Group>
              <Row>
                <Col span={19}>
                  <Input value={lngLatModal.value} />
                </Col>
                <Col span={5}>
                  <SelectGaodeLngLat
                    open={() =>
                      setLngLatModal({ ...lngLatModal, visible: true })
                    }
                    lngLatVisible={lngLatModal.visible}
                    getLntLat={(value) => {
                      setLngLatModal({ ...lngLatModal, value: value });
                    }}
                    close={() =>
                      setLngLatModal({ ...lngLatModal, visible: false })
                    }
                  />
                </Col>
              </Row>
            </Input.Group>
          </Form.Item>
          {
            editTitle ? <>
              <Form.Item label="视频设备" name="video_device_ids">
                {/* <Select mode="multiple" options={videoDeviceList} /> */}
                <Transfer
                  dataSource={getLeftEditTarket}
                  titles={["未选择", "已选择"]}
                  targetKeys={getEditTarket}
                  onSelectChange={onSelectRoadChange}
                  onChange={onSelectChangeRoad}
                  selectedKeys={getSelectedKeys}
                  render={(item) => item.label}
                />
                {/* <label>视频设备</label> */}

                {/* <TreeSelectGroup
              unSelectedList={editPoleModal.video_device.left}
              selecedList={editPoleModal.video_device.right}
            /> */}
              </Form.Item>
              <Form.Item label="监控设备" name="monitor_device_ids">
                {/* <Select mode="multiple" options={monitorDeviceList} /> */}
                <Transfer
                  dataSource={getLeftDeviceTarket}
                  titles={["未选择", "已选择"]}
                  targetKeys={getDeviceTarket}
                  selectedKeys={getLeftDevicetargetKey}
                  onSelectChange={onSelectDeviceChange}
                  onChange={onSelectChangeDevice}
                  render={(item) => item.label}
                />
              </Form.Item>
            </> :
              <>
                <Form.Item label="视频设备" name="video_device_ids">
                  {/* <Select mode="multiple" options={videoDeviceList} /> */}
                  <Transfer
                    dataSource={videoDeviceList}
                    titles={["未选择", "已选择"]}
                    targetKeys={getMonitorData}
                    onChange={(nexTargetKeys) => {
                      setGetMonitorData(nexTargetKeys);
                    }}
                    render={(item) => item.label}
                  />
                  {/* <label>视频设备</label> */}

                  {/* <TreeSelectGroup
             unSelectedList={editPoleModal.video_device.left}
             selecedList={editPoleModal.video_device.right}
           /> */}
                </Form.Item>
                <Form.Item label="监控设备" name="monitor_device_ids">
                  {/* <Select mode="multiple" options={monitorDeviceList} /> */}
                  <Transfer
                    dataSource={monitorDeviceList}
                    titles={["未选择", "已选择"]}
                    targetKeys={getRoadData}
                    onChange={(nexTargetKeys) => {
                      seGetRoadData(nexTargetKeys);
                    }}
                    render={(item) => item.label}
                  />
                  {/* <label>监控设备</label> */}
                  {/* <TreeSelectGroup
             unSelectedList={editPoleModal.monitor_device.left}
             selecedList={editPoleModal.monitor_device.right}
           /> */}
                </Form.Item>
              </>
          }

        </Form>
      </Modal>
      {/* 杆位删除弹窗 */}
      <Modal
        open={poleModal.visible}
        onCancel={() => {
          setPoleModal({ ...poleModal, visible: false });
        }}
        title="提示"
        onOk={confirmDelPole}
      >
        <p>确定删除吗？</p>
      </Modal>
      {/* 杆位查看弹窗 */}
      <Modal
        open={checkPoleModal.visible}
        onCancel={() =>
          setCheckPoleModal({ ...checkPoleModal, visible: false })
        }
      >
        <Descriptions column={1}>
          <Descriptions.Item label="杆位号">
            {checkPoleModal.record.code}
          </Descriptions.Item>
          <Descriptions.Item label="经纬度">
            {checkPoleModal.record.lng_lat}
          </Descriptions.Item>
          <Descriptions.Item label="是否自由杆">
            {checkPoleModal.record.has_pole === 1 ? "是" : "否"}
          </Descriptions.Item>
          <Descriptions.Item label="视频设备">
            {checkPoleModal.record.video_device_codes}
          </Descriptions.Item>
          <Descriptions.Item label="监控设备">
            {checkPoleModal.record.monitor_device_codes}
          </Descriptions.Item>
        </Descriptions>
      </Modal>
      {/* 数据采集设备添加和编辑窗口 */}
      <Modal
        open={dataAcquistionModal.visible}
        onCancel={() => {
          setDataAcquistionModal({ ...dataAcquistionModal, visible: false });
        }}
        confirmLoading={modalBtnLoading}
        destroyOnClose
        onOk={handleDataAcquistionModal}
        title={dataAcquistionModal.isEdit ? "编辑设备" : "添加设备"}
        width={770}
      >
        <Form
          form={dataAcquistionModal.form}
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 12 }}
          colon={false}
        >
          <Row gutter={[30]}>
            <Col span={12}>
              <Form.Item
                label="设备名称"
                name="name"
                rules={[{ required: true }]}
              >
                <Input />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                label="硬件编码"
                name="code"
                rules={[{ required: true }]}
              >
                <Input
                  disabled={dataAcquistionModal.isEdit === 0 ? false : true}
                />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                label="设备类型"
                name="type"
                rules={[{ required: true }]}
              >
                <Select options={dataAcquistionSelect.typeList} />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                label="设备品牌"
                name="brand"
                rules={[{ required: true }]}
              >
                <Select options={dataAcquistionSelect.brandList} />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                label="设备功能"
                name="function"
                rules={[{ required: true }]}
              >
                <Select options={dataAcquistionSelect.funcList} />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="备注" name="note">
                <Input />
              </Form.Item>
            </Col>
            {dataAcquistionModal.isEdit === 0 ? (
              <Col span={12}>
                <Form.Item label="对应的泊位号" name="berth">
                  <Transfer
                    dataSource={dataAcquistionBerth}
                    titles={["未选择", "已选择"]}
                    targetKeys={dataAcquistionTargetKeys}
                    onChange={(nexTargetKeys) => {
                      setDataAcquistionTargetKeys(nexTargetKeys);
                    }}
                    render={(item) => item.label}
                  />
                </Form.Item>
              </Col>
            ) : (
              <Col span={12}>
                <Form.Item label="对应的泊位号" name="berth">
                  <Transfer
                    dataSource={getLeftBerth}
                    titles={["未选择", "已选择"]}
                    targetKeys={targetKeys}
                    onChange={onChangeSelect}
                    selectedKeys={selectedKeys}
                    onSelectChange={onSelectChange}
                    render={(item) => item.title}
                  />
                </Form.Item>
              </Col>
            )}
          </Row>
        </Form>
      </Modal>
      {/* 数据采集设备上线，下线，删除弹窗 */}
      <Modal
        open={dataStatusChangeModal.visible}
        onOk={handleDataStatusChange}
        title="提示"
        onCancel={() => {
          setDataStatusChangeModal({
            ...dataStatusChangeModal,
            visible: false,
          });
        }}
      >
        <p>
          确定
          {dataStatusChangeModal.type === 1
            ? "上线"
            : dataStatusChangeModal.type === 2
              ? "下线"
              : "删除"}
          吗？{" "}
        </p>
      </Modal>
      {/* 数据采集设备管理查看弹窗 */}
      <Modal
        open={dataAcquistionDetail.visible}
        onCancel={() => {
          setDataAcquistionDetail({ ...dataAcquistionDetail, visible: false });
        }}
        title="详情"
      >
        <Descriptions column={2}>
          <Descriptions.Item label="设备名称">
            {dataAcquistionDetail.record.name}
          </Descriptions.Item>
          <Descriptions.Item label="硬件编码">
            {dataAcquistionDetail.record.code}
          </Descriptions.Item>
          <Descriptions.Item label="设备类型">
            {dataAcquistionDetail.record.type_name}
          </Descriptions.Item>
          <Descriptions.Item label="设备品牌">
            {dataAcquistionDetail.record.brand_name}
          </Descriptions.Item>
          <Descriptions.Item label="设备功能">
            {dataAcquistionDetail.record.function}
          </Descriptions.Item>
          <Descriptions.Item label="备注">
            {dataAcquistionDetail.record.note}
          </Descriptions.Item>
          <Descriptions.Item label="对应泊位号">
            {dataAcquistionDetail.record.berth_code}
          </Descriptions.Item>
        </Descriptions>
      </Modal>
    </div>
  );
}
const SearchPart = forwardRef((props, ref) => {
  const {
    formData = [],
    search = () => { },
    initialValues = {},
    pageData,
    exporturl,
    total = 0,
    setSelectedRowKeys = () => { },
    road_id,
    closeConfirmModal = () => { },
    confirmModalData = {},
    delTollModal = {},
    isShowExportBtn = true,
  } = props;
  const confirmtype = confirmModalData.type;
  const [form] = Form.useForm();
  const [exportData, setExportData] = useState({});
  function getList(pndata = pageData) {
    const params = { ...form.getFieldsValue(), ...pndata, road_id };
    setExportData(params);
    search(params);
  }
  async function onOk() {
    setSelectedRowKeys([])

    const res = await confirmModalData.func(confirmModalData.ids, confirmtype);
    // if (res?.status === 20000) {
    //   closeConfirmModal();
    //   getList();
    // }
    closeConfirmModal();
    getList();
  }

  function handleDelToll() {
    delTollModal.delFunc(delTollModal.id);
    delTollModal.close();
    setTimeout(() => {
      getList();
    }, 5000);
  }
  useImperativeHandle(ref, () => {
    return { getList };
  }, [formData]);

  useEffect(() => {
    getList();
  }, [pageData, formData]);
  const reastBtn = () => {
    form.resetFields();
  };
  return (
    <>
      <Form
        form={form}
        labelCol={{ span: 6 }}
        wrapperCol={{ span: 18 }}
        colon={false}
        initialValues={initialValues}
      >
        <Row>
          {formData.map((item) => {
            let children = null;
            switch (item.type) {
              case "input":
                children = (
                  <Form.Item
                    label={item.label}
                    name={item.name}
                    key={item.name}
                  >
                    <Input placeholder={item.placeholder} />
                  </Form.Item>
                );
                break;
              case "select":
                children = (
                  <Form.Item
                    label={item.label}
                    name={item.name}
                    key={item.name}
                  >
                    <Select
                      options={item.options}
                      placeholder={item.placeholder}
                    />
                  </Form.Item>
                );
              default:
                break;
            }
            return <Col span={24}>{children}</Col>;
          })}
        </Row>
      </Form>
      <div className="bottomBox">
        <Button className="reset" onClick={reastBtn}>
          重置
        </Button>
        <Button
          type="primary"
          className="submit search-button"
          onClick={() => {
            getList((formData, { ...pageData, pn: 1 }));
          }}
        >
          查询
        </Button>
        {!isShowExportBtn ? (
          <div></div>
        ) : (
          <ExportPMS
            url={exporturl}
            data={exportData}
            style={{
              height: "36px",
            }}
          />
        )}
      </div>
      {/* 上线下线删除的确认框 */}
      <Modal
        open={confirmModalData.visible}
        onCancel={closeConfirmModal}
        onOk={onOk}
        title="提示"
      >
        <p>
          确认{confirmtype === 1 ? "上线" : confirmtype === 2 ? "下线" : "删除"}
          吗?
        </p>
      </Modal>
      <Modal
        open={delTollModal.visible}
        onCancel={delTollModal.close}
        onOk={handleDelToll}
        title="提示"
      >
        <p>确定删除吗？</p>
      </Modal>
    </>
  );
});

export default ConfigRoad;