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

export default function MapContainerTow() {
  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("containerTow", {
      viewMode: "2D", // 是否为3D地图模式
      zoom: 17, // 初始化地图级别
      center: [103.87940594787575, 30.502048008027348], // 初始化地图中心点位置
      mapStyle: "amap://styles/darkblue",
      resizeEnable: true,
    });
    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();
    MapUtlTow.loadMap = Amap;
    MapUtlTow.amap = amap;
    setmaps(amap);
  };

  

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