import {Connect} from "@cqsjjb/jjb-dva-runtime";
import {Button, Form, message, Modal, Space, Descriptions} from "antd";
import {useEffect, useState} from "react";
import FormBuilder from "zy-react-library/components/FormBuilder";
import Search from "zy-react-library/components/Search";
import Table from "zy-react-library/components/Table";
import {FORM_ITEM_RENDER_ENUM} from "zy-react-library/enum/formItemRender";
import useTable from "zy-react-library/hooks/useTable";
import {NS_MKMJAREA} from "~/enumerate/namespace";
import AddIcon from "zy-react-library/components/Icon/AddIcon";
import DeleteIcon from "zy-react-library/components/Icon/DeleteIcon";
import LocationIcon from "zy-react-library/components/Icon/LocationIcon";
import DictionarySelect from "zy-react-library/components/Select/Dictionary";
import Map from "zy-react-library/components/Map";
import MapSelector from "zy-react-library/components/Map/MapSelector";

const AREA_TYPE = [
  {name: "人行口门", bianma: "1"},
  {name: "车行口门", bianma: "2"},
  {name: "综合口门", bianma: "3"},
]

const AREA_STATUS = [
  {name: "停用", bianma: "0"},
  {name: "正常", bianma: "1"},
  {name: "暂时关闭", bianma: "2"},
]

function MkmjArea(props) {
  const [addModalVisible, setAddModalVisible] = useState(false);
  const [infoModalVisible, setInfoModalVisible] = useState(false);
  const [currentId, setCurrentId] = useState("");
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const [form] = Form.useForm();
  const {tableProps, getData} = useTable(props["mkmjAreaList"], {
    form,
    params: {
      eqAreaLevel: 1,
    }
  });
  return (
    <div style={{padding: 10}}>
      <Search
        form={form}
        onFinish={getData}
        options={[
          {name: "likeAreaName", label: "口门名称"},
          {name: "eqAreaStatus", label: "口门状态",render: FORM_ITEM_RENDER_ENUM.SELECT, items: AREA_STATUS},
          {name: "eqAreaType", label: "口门类型",render: FORM_ITEM_RENDER_ENUM.SELECT, items: AREA_TYPE},
          {name: "eqAreaParentId", label: "所属区域",render: <DictionarySelect dictValue="primeport_area" />},
        ]}
      />
      <Table
        rowSelection={{
          selectedRowKeys,
          onChange: selectedRowKeys => setSelectedRowKeys(selectedRowKeys),
        }}
        toolBarRender={() => (
          <Space>
            <Button type="primary" icon={<AddIcon/>} onClick={() => setAddModalVisible(true)}>新增</Button>
            <Button
              icon={<DeleteIcon/>}
              type="primary"
              danger
              onClick={() => {
                if (!selectedRowKeys.length)
                  return message.warning("请选择要删除的行");
                Modal.confirm({
                  title: "确定删除吗？",
                  onOk: async () => {
                    await props["mkmjAreaBatchDelete"]({ids: selectedRowKeys});
                    message.success("删除成功");
                    getData();
                  },
                });
              }}
            >
              批量删除
            </Button>
          </Space>
        )}
        columns={[
          {dataIndex: "areaParentName", title: "所属区域"},
          {dataIndex: "areaName", title: "口门名称"},
          {dataIndex: "areaType", title: "口门类型",render:(_,record)=>{
            return record.areaType === 1 ? "人行口门" : record.areaType === 2 ? "车行口门" : "综合口门";
          }},
          {dataIndex: "location", title: "地理位置",render:(_,record)=>{
            return `${record.latitude || ""}--${record.longitude || ""}`;
          }},
          {dataIndex: "videoNum", title: "视频个数",render:(_,record)=>{
            return record.videoNum || 0;
          }},
          {
            title: "操作",
            align: "center",
            width: 200,
            render: (_, record) => (
              <Space>
                <Button
                  type="link"
                  onClick={() => {
                    setCurrentId(record.id);
                    setInfoModalVisible(true);
                  }}
                >
                  查看
                </Button>
                <Button
                  type="link"
                  onClick={() => {
                    setCurrentId(record.id);
                    setAddModalVisible(true);
                  }}
                >
                  编辑
                </Button>
                <Button
                  type="link"
                  danger
                  onClick={() => {
                    Modal.confirm({
                      title: "确定删除吗？",
                      onOk: async () => {
                        await props["mkmjAreaDelete"]({id: record.id});
                        message.success("删除成功");
                        getData();
                      },
                    });
                  }}
                >
                  删除
                </Button>
                <Button
                  type="link"
                  onClick={() => {
                    props.history.push(`./MkmjPassage?areaId=${record.areaId}`)
                  }}
                >
                  添加通道
                </Button>
                <Button
                  type="link"
                  onClick={() => {
                    props.history.push(`./MkmjGateVideo?areaGateId=${record.areaId}&deviceType=1`)
                  }}
                >
                  添加摄像头
                </Button>
              </Space>
            ),
          },
        ]}
        {...tableProps}
      />
      <AddModal
        visible={addModalVisible}
        currentId={currentId}
        onCancel={() => {
          setAddModalVisible(false);
          setCurrentId("");
        }}
        getData={getData}
      />

      <InfoModal
        visible={infoModalVisible}
        currentId={currentId}
        onCancel={() => {
          setInfoModalVisible(false);
          setCurrentId("");
        }}
        getData={getData}
      />
    </div>
  );
}

function AddModalComponent(props) {
  const [form] = Form.useForm();
  useEffect(() => {
    if (props.currentId) {
      props["mkmjAreaInfo"]({id: props.currentId}).then((res) => {
        form.setFieldsValue({...res.data,
          areaType: Number(res.data.areaType),
          areaStatus: Number(res.data.areaStatus),
        });
      });
    }
  }, [props.currentId]);
  const onCancel = () => {
    form.resetFields();
    props.onCancel();
  };
  const submit = async (values) => {
    await props[!props.currentId ? "mkmjAreaAdd" : "mkmjAreaEdit"]({...values, areaLevel:1, id: props.currentId});
    onCancel();
    props.getData();
  };
  return (
    <Modal
      open={props.visible}
      onCancel={onCancel}
      onOk={form.submit}
      title={props.currentId ? "编辑" : "新增"}
      loading={props.mkmjArea.loading}
      width={800}
    >
      <FormBuilder
        labelCol={{ span: 6 }}
        form={form}
        span={24}
        onFinish={submit}
        showActionButtons={false}
        options={[
          {name: "areaName", label: "口门名称"},
          {name: "areaType", label: "口门类型",render: FORM_ITEM_RENDER_ENUM.SELECT, items: AREA_TYPE},
          {name: "areaParentId", label: "所属区域",render: <DictionarySelect dictValue="primeport_area" onGetLabel={(label) => form.setFieldValue("areaParentName",label)}/>},
          {name: "areaParentName", label: "所属区域",onlyForLabel:true},
          {name: "areaRange", label: "口门位置"},
          {name: "areaStatus", label: "口门状态",render: FORM_ITEM_RENDER_ENUM.SELECT, items: AREA_STATUS},
          {key:"map",customizeRender:true,render:<Map/>}
          
        ]}
      />
    </Modal>
  );
}

function InfoModalComponent(props) {
  const [info, setInfo] = useState({});
  const [mapVisible, setMapVisible] = useState(false);

  useEffect(() => {
    if (props.currentId) {
      props["mkmjAreaInfo"]({id: props.currentId}).then((res) => {
        setInfo(res.data);
      });
    }
  }, [props.currentId]);

  return (
    <Modal
      open={props.visible}
      onCancel={props.onCancel}
      footer={<Button onClick={props.onCancel}>关闭</Button>}
      title="查看"
      loading={props.mkmjArea.loading}
    >
      <Descriptions
        labelStyle={{width: 200}}
        column={1}
        bordered
        items={[
          {children: info.areaParentName, label: "所属区域"},
          {children: info.areaName, label: "口门名称"},
          {children: info.areaRange, label: "口门位置"},
          {children: info.areaLevel===1?"一级":info.areaLevel===2?"二级":"三级", label: "区域级别"},
          {children: info.areaType===1?"人行口门":info.areaType===2?"车行口门":"综合口门", label: "口门类型"},
          {children: info.areaStatus===0?"停用":info.areaStatus===1?"正常":"暂时关闭", label: "区域状态"},
          {children: <LocationIcon onClick={() => {
            setMapVisible(true);
          }}/>, label: "位置"},
        ]}
      />

      <MapSelector
        visible={mapVisible}
        onClose={() => setMapVisible(false)}
        longitude={info.longitude}
        latitude={info.latitude}
        disable={true}
      />
    </Modal>
  );
}

const AddModal = Connect([NS_MKMJAREA], true)(AddModalComponent);
const InfoModal = Connect([NS_MKMJAREA], true)(InfoModalComponent);
export default Connect([NS_MKMJAREA], true)(MkmjArea);