import React, { Component, useEffect, useState } from "react";
import {  message } from 'antd';
import { Box } from "./styled";
import api from "./api";
import icon from './assets/img.png'
import {useRouter} from 'next/router'
let MAP :any ;
let Amap:any;

interface UserInfoType {
  lat: number;
  lon: number;
  pageNo?:number,
  pageSize?:number
} 

export default function MapComponent() {
  const router = useRouter()
  const [mapItem, setMapItem] = useState(0);
  const [userPositioning, setUserPositioning] = useState<UserInfoType>();
  const [markerCol, setMarkerCol] = useState<any>([]);
  //初始化地图
  const init = async () => {
    try {
      const AMapLoader = await import(
        /* webpackChunkName: "amap" */ "@amap/amap-jsapi-loader"
      );
     await AMapLoader.load({
        key: "87b424e68754efc3ba9d11ae07475091", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [""], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then(async (AMap) => {
          Amap = AMap
          MAP = new AMap.Map("container", {
            // 设置地图容器id
            viewMode: "3D", // 是否为3D地图模式
            zoom: 9, // 初始化地图级别
            center: [113.93029, 22.53291], // 初始化地图中心点位置
          });
          //用户定位
          AMap.plugin('AMap.Geolocation', function() {
            const geolocation = new AMap.Geolocation({
                enableHighAccuracy: true,//是否使用高精度定位，默认:true
                timeout: 10000,          //超过10秒后停止定位，默认：5s
                position:'RB',    //定位按钮的停靠位置
                offset: [10, 20], //定位按钮与设置的停靠位置的偏移量，默认：[10, 20]
                zoomToAccuracy: true,   //定位成功后是否自动调整地图视野到定位点
            });
            MAP.addControl(geolocation);
            geolocation.getCurrentPosition(function(status:string,result:any){
                if(status=='complete'){
                    onComplete(result)
                }else{
                    onError(result)
                }
            });
        });
        //解析定位结果
       async function onComplete(data:any) {
            console.log('定位成功');
            setUserPositioning(data.position)
            // return await mapEntiy(0,data.position);
        }
        //解析定位错误信息
       async function onError(data:any) {
            // message.error(`定位失败
            // 失败原因排查信息：${data.message}
            // 浏览器返回信息：${data.originMessage}
            // `)
        }
          await mapEntiy(0)
        })
        .catch((e) => {
          console.log(e);
        });
    } catch (error) {
      console.log(error);
    }
  };
  const showPositioningInfo = async (index:number,data?:UserInfoType) => {
    const res = await api.listPositioningInfo({
      lon: userPositioning?.lon || data?.lon || 113.93029,
      lat: userPositioning?.lat || data?.lat || 22.53291,
    });
    const list = res.result
      ?.map((item) => item.locationList)
      .flat()
      .filter((item: { dizhi: string }) => item.dizhi.includes("省"));
    const markerList: any = [];
    if (list?.length) {
      list?.map((item) => {
        const EntiyValue = addEntiy(item.jd, item.wd, item.dizhi);
        markerList.push(EntiyValue);
      });
      if(markerList.length) MAP?.add(markerList);setMarkerCol([...markerList]);
    }
    //自适应显示多个点位
    MAP?.setFitView();
  }
  const showFlyerBitmap = async (index:number,data?:UserInfoType,pageSize?:number) => {
    const res = await api.listFlyerBitmap({
      lon: userPositioning?.lon || data?.lon ||  113.93029,
      lat: userPositioning?.lat || data?.lat ||  22.53291,
      pageNo:1,
      pageSize: pageSize || 40
    });
    const list = res.result?.list
    const markerList: any = [];
    if (list?.length) {
      list?.map((item) => {
        const EntiyValue = addEntiy(item.lon, item.lat, item.flyerName);
        markerList.push(EntiyValue);
      });
      if(markerList.length) MAP?.add(markerList);setMarkerCol(markerList)
    }
        //自适应显示多个点位
        MAP?.setFitView();
  }
  const showUavBitmap = async (index:number,data?:UserInfoType) => {
    const res = await api.listUavBitmap({
      lon: userPositioning?.lon || data?.lon ||  113.93029,
      lat: userPositioning?.lat || data?.lat ||  22.53291,
      pageNo:1,
      pageSize: 40
    });
    const list = res.result?.list
    const markerList: any = [];
    if (list?.length) {
      list?.map((item) => {
        const EntiyValue = addEntiy(item.lon, item.lat, item.uavName);
        markerList.push(EntiyValue);
      });
      if(markerList.length) MAP?.add(markerList);setMarkerCol(markerList)
    }
    //自适应显示多个点位
    MAP?.setFitView();
  }
    //添加点位
    const mapEntiy = async (index: number,data?:UserInfoType) => {
      MAP?.remove(markerCol);
      if (index === 0) {
        showPositioningInfo(index,data)
      }else if (index === 1) {
        showFlyerBitmap(index,data,30)
      } else if(index === 2) {
        showUavBitmap(index,data)
      }else{
        router.push('/home/waterfallFlowBody/components/map/moreServicePoints')
      }
      setMapItem(index);
    };
  
    const addEntiy = ( lon: any, lat: any, name: string) => {
      if (!Amap) return;
      const icons = new Amap.Icon({
        size: new Amap.Size(60, 60),    // 图标尺寸
        image: icon.src,  // Icon的图像
        imageSize: new Amap.Size(60, 60)   // 根据所设置的大小拉伸或压缩图片
    });
      const marker = new Amap.Marker({
        position: new Amap.LngLat(lon, lat),
        offset: new Amap.Pixel(-10, -10),
        icon: icons, // 添加 Icon 实例
        title: name,
        zoom: 13
      });
      return marker;
    };

  useEffect(() => {
    (async () => {
      await init();
    })();
    return MAP && MAP.destroy();
  }, []);



  return (
    <Box className="right-box-item">
      <div id="container" className="map"></div>
      <div className="map-dosome">
        <div
          className={`itemBox ${mapItem === 0 ? "active" : ""}`}
          onClick={() => mapEntiy(0)}
        >
          服务网点
        </div>
        <div
          className={`itemBox ${mapItem === 1 ? "active" : ""}`}
          onClick={() => mapEntiy(1)}
        >
          租赁网点
        </div>
        <div
          className={`itemBox ${mapItem === 2 ? "active" : ""}`}
          onClick={() => mapEntiy(2)}
        >
          培训网点
        </div>
        <div
          className={`${mapItem === 3 ? "active" : ""}`}
          onClick={() => mapEntiy(3)}
        >
          更多网点
        </div>
      </div>
    </Box>
  );
}
