import { useEffect, useState } from "react";
import AMapLoader from "@amap/amap-jsapi-loader";
import MapUtl from "./mapUtil";
import { mapArrs } from "@/store/map";

export default function MapContainer() {
  let [amap, setmaps] = useState<any>(null);
  useEffect(() => {
    loadMaps();
    return () => {
      amap?.destroy();
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const loadMaps = async () => {
    const Amap = await AMapLoader.load({
      key: "d58999d072ed7e5897d3900a769cfda0", // 申请好的Web端开发者Key，首次调用 load 时必填
      version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: ["AMap.Scale", "AMap.MoveAnimation", "AMap.Weather"],
    });

    amap = new Amap.Map("container", {
      viewMode: "2D", // 是否为3D地图模式
      zoom: 15, // 初始化地图级别
      center: [103.872802, 30.523876], // 初始化地图中心点位置
      mapStyle: "amap://styles/darkblue",
      resizeEnable: true,
    });
    // const bundler = result.districtList[0].boundaries;
    const polygon = new Amap.Polygon({
      map: amap,
      path: mapArrs,
      strokeColor: "red", //线颜色
      strokeOpacity: 0.8, //线透明度
      strokeWeight: 2, //线宽
      fillColor: "#85b0ec", //填充色
      fillOpacity: 0, //填充透明度
    });
    amap.add(polygon);
    amap.setFitView();

    setmaps(amap);
    // addMaket(Amap,amap);
    MapUtl.loadMap = Amap;
    MapUtl.amap = amap;
    [
      { title: "红桥微型消防站", po: [103.889435, 30.528084] },
      { title: "桃荚微型消防站", po: [103.89066, 30.506378] },
      { title: "文武微型消防站", po: [103.85076, 30.518194] },
      { title: "长沟微型消防站", po: [103.9063, 30.556198] },
      { title: "应天微型消防站", po: [103.90963, 30.530624] },
      { title: "花龙村微型消防站", po: [103.92564, 30.45827] },
      { title: "白塔小型消防站", po: [103.9049, 30.503006] },
    ].forEach((item) => {
      MapUtl.addMakerDis({
        lng: item.po[0],
        lat: item.po[1],
        title: item.title,
      });
    });

    var weather = new Amap.Weather();
    MapUtl.wecherInfo = weather;
    amap.setFitView();
  };

  return <div id="container" style={{ height: "100vh",width:"100%" }}></div>;
}
