import Dispath from "./dispath";
import WhichVideo from "./which_video";
import Ec from "./ec";
import Emr from "./emr";
import "./bot.less";
import { Radio } 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";

const HomeBottom = (props: Store) => {
  const { homeStore } = props;
  const [size, changeSize] = useState("1");
  const handleSizeChange = (e: any) => {
    changeSize(e.target.value);
    getUlist(e.target.value);
  };
  useEffect(() => {
    setTimeout(() => {
      getUlist("1");
    }, 2000);
  }, []);

  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 = MapUtl.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,
        });
      });
    });
  };
  return (
    <div className="bottom_container">
      <div className="bottom_content">
        <Dispath />
        <Emr />
        <Ec />
        <WhichVideo />
        {/* 切换marker查看 */}
        <Radio.Group value={size} onChange={handleSizeChange}>
          <Radio.Button value="1">民兵</Radio.Button>
          <Radio.Button value="2">网格员</Radio.Button>
          <Radio.Button value="3">巡防</Radio.Button>
        </Radio.Group>
      </div>
    </div>
  );
};

// export default HomeBottom;
export default inject("homeStore")(observer(HomeBottom));