import AMapLoader from '@amap/amap-jsapi-loader'
import { Router } from 'vue-router';

const AMAP_KEY = "89185d69e5c6c07eae0b0ce8099db302";
const AMAP_VERSION = "1.4.5"
const AMAP_LOCA_VERSION = "1.3.2"

// type LoadCallBack = (instance: MapService) => void;
// interface PointData {
//   marker?: any; // markData
//   mouseover?: () => void // 鼠标移入事件
//   mouseout?: () => void // 鼠标移出事件
//   click?: () => void // 点击事件
// }
// interface SimplePointData {
//   marker?: any; // markData
// }

export class AMapService {
  /**
   * 高德地图
   */
  amap;
  AMap;
  $router;
  loadedCallback;

  points = new Array();
  simplePoints = new Array();

  constructor($router,loadedCallback) {
    this.$router = $router
    // 初始化加载函数
    this.loadedCallback = loadedCallback;
  }

  addSimplePoint(payload) {
    this.callAmap((AMap, amap) => {
      const marker = new AMap.Marker({
        content: payload.content,
        position: new AMap.LngLat( payload.position[0], payload.position[1]),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        title: payload.name,
      });
      const simplePoint = {
        marker
      }
      this.simplePoints.push(simplePoint)
      this.amap.add(marker)
    })
  }

  addSimplePoints(payloads) {
    payloads.forEach(payload => this.addSimplePoint(payload));
  }
  
  loadMap(el) {
    AMapLoader.load({
      "key": AMAP_KEY,// 申请好的Web端开发者Key，首次调用 load 时必填
      "version": AMAP_VERSION,// 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      "plugins": [],
      "Loca":{ // 是否加载 Loca， 缺省不加载
        "version": AMAP_LOCA_VERSION // Loca 版本，缺省 1.3.2
      },
      }).then((AMap)=>{
          // 获取类
          this.AMap = AMap
          // 加载地图
          this.amap = new AMap.Map(el, {
              zoom: 13,//级别
              pitch: 30,
              center: [106.395593,29.805197],//中心点坐标
              viewMode:'3D',  //使用3D视图
          });
          // 设置地图样式
          this.amap.setMapStyle("amap://styles/dark")
          // 加载后的数据处理
          this.loadedCallback(this);
      }).catch(e => {
          console.log(e);
      })
  }

  addPoint(payload){
    const that = this
    this.callAmap((AMap, amap) => {
      // 1、创建信息窗口
      const infoWindow = new AMap.InfoWindow({
        anchor: 'bottom',
        content: payload.data.content(payload.data),
        offset: new AMap.Pixel(8, -40),
        position: payload.position
      });
      // 2、创建点位
      const marker = new AMap.Marker({
        content: payload.content,
        position: new AMap.LngLat( payload.position[0], payload.position[1]),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        title: payload.name,
      });
      const point =  {
        marker,
        mouseover: function () {
          infoWindow.open(amap);
          document.querySelector(".amap-info-content")?.classList.remove("amap-info-outer")
        },
        mouseout: function () {
          infoWindow.close();
          document.querySelector(".amap-info-content")?.classList.remove("amap-info-outer")
        },
        click: function () {
          that.$router.push('/detail/1')
        }
      }
      // 3、创建点击事件，绑定点位与信息窗口的关系
      marker.on("mouseover", point.mouseover)
      marker.on("mouseout", point.mouseout)
      marker.on("click", point.click)
      this.points.push(point);
      // 将点位添加到地图上
      amap.add(marker);
    })
  }

  /**
   * 加载多个节点
   * @param payloads 负载数据数组
   */
  addPoints(payloads) {
    payloads.forEach(payload => this.addPoint(payload));
  }


  clearPoint() {
    if(this.points && this.points.length > 0) {
      this.points.forEach(point => {
        this.removePoint(point)
      })
      this.points = new Array();
    }
  }



  /**
   * 移出点位
   * @param point 
   */
  removePoint(point){
    if (point) {
      point.marker.off('mouseover', point.mouseover)
      point.marker.off('mouseout', point.mouseout)
      point.marker.off('click', point.click)
      this.amap.remove(point)
    }
  }

  /**
   * 封装获取，处理操作
   * @param callback 
   */
  callAmap(callback) {
    const { AMap, amap } = this
    if (AMap && amap) {
      callback(AMap, amap)
    }
  }
}
