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 HomeCheck = (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);
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  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 (
    <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>
  );
};

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