import { Button, DatePicker, message, Modal, Radio, Space } from "antd";
import { useEffect, useState } from "react";
import { inject, observer } from "mobx-react";
import { Store } from "antd/es/form/interface";
import MapUtl from "@/components/map/mapUtil";
import MapContainerTow from "@/components/map/MapComponentTow";
import MapUtlTow from "@/components/map/mapUtilTow";

const HomeCheck = (props: Store) => {
  const { homeStore ,usrStore} = props;
  const [size, changeSize] = useState("1");
  const [id, setId] = useState("");
  const { RangePicker } = DatePicker;
  const [isOpen, setOpen] = useState<boolean>(false);
  const [times, setTimes] = useState<string[]>([]);

  const handleSizeChange = (e: any) => {
    changeSize(e.target.value);
    getUlist(e.target.value);
  };
  useEffect(() => {
    setTimeout(() => {
      getUlist("1");
    }, 2000);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  const serchSD = () => {
    if (times.length === 0) {
      message.error("请选择时间区间");
      return;
    }
    usrStore
      .getSite({
        id: id,
        start_time: times[0],
        end_time: times[1],
      })
      .then((res) => {
        let data: any = [];
        if (res.data && res.data.record) {
          res.data.record.forEach((element) => {
            data.push([element.long, element.lat]);
          });
          if (data.length === 0) {
            message.info("暂无轨迹数据");
            return;
          }
          if (data.length > 0) {
            MapUtlTow.polyline(data);
          }
        }
      });
  };

  const getUlist = (type) => {
    let query = {};
    switch (type) {
      case "1":
        query = { militia: 1 };
        break;
      case "2":
        query = { grid_officer: 1 };
        break;
      case "3":
        query = { patrol_brigade: 1 };
        break;
    }
    let marks = MapUtlTow.makerList;
    if (marks.length) {
      marks.forEach((item) => {
        item?.marker.remove();
      });
    }
    homeStore.getContact(query).then((res) => {
      let list = res.data.record;
      list.forEach((element) => {
        if (!element.lat || !element.long) return;
        MapUtl.addMaker({ 
          lng: element.long,
          lat: element.lat,
          title: element.user_name,
          users: element,
          clicks: (v) => {
            setId(v)
            setOpen(true)
          },
        });
      });
    });
  };
  return (
    <>
      <Radio.Group value={size} onChange={handleSizeChange} >
        <Radio.Button style={{backgroundColor:"rgba(15,86,147, 0.4)",border:"0px",color:"#fff"}} value="1">民兵</Radio.Button>
        <Radio.Button style={{backgroundColor:"rgba(15,86,187, 0.4)",border:"0px",color:"#fff"}} value="2">网格员</Radio.Button>
        <Radio.Button style={{backgroundColor:"rgba(15,86,147, 0.4)",border:"0px",color:"#fff"}} value="3">巡防</Radio.Button>
      </Radio.Group>
      <Modal
        title={"轨迹回放"}
        width={"70%"}
        open={isOpen}
        centered
        okText="确定"
        cancelText="取消"
        footer={null}
        destroyOnClose={true}
        onCancel={() => {
          setOpen(false);
        }}
      >
        <div>
          <Space>
            <RangePicker
              onChange={(v, s) => {
                setTimes(s);
              }}
            />
            <Button
              type="dashed"
              size="small"
              onClick={() => {
                serchSD();
              }}
            >
              查看轨迹信息
            </Button>
          </Space>
          <div style={{ height: "10px" }}></div>
          <MapContainerTow />
        </div>
      </Modal>
    </>
  );
};

// export default HomeBottom;
export default inject("homeStore","usrStore")(observer(HomeCheck));
