import { getImgUrl } from "@/utils/tools.js"
class MapUtils {
  constructor(props) {
    this.mapGL = props
  }
  /**
   * 添加点标记 或者 标记+弹窗（默认）
   * @param {*} lng 经度
   * @param {*} lat 维度
   * @param {*} val 展示内容
   */
  showMarker(lng, lat, icon, val) {
    const that = this
    let myIcon
    //如果没有自定义图标显示默认图标
    if (icon) myIcon = new BMapGL.Icon(icon, new BMapGL.Size(52, 62))
    //创建图标
    const point = new BMapGL.Point(lng, lat)
    let marker
    if (myIcon) {
      marker = new BMapGL.Marker(point, { icon: myIcon })
    } else {
      marker = new BMapGL.Marker(point)
    }
    this.mapGL.addOverlay(marker)
    // 将标注添加到地图
    this.mapGL.addOverlay(marker)
    if (!val) return false
    let html = this.getModel() //模拟的弹窗内容
    const infoWindow = new BMapGL.InfoWindow(html.content, html.opts) // 创建信息窗口对象
    marker.addEventListener("click", function () {
      that.mapGL.openInfoWindow(infoWindow, point) //开启信息窗口
    })
  }
  /** */
  /**
   * 清除全部覆盖物
   */
  removeOverlay() {
    this.mapGL.clearOverlays()
  }

  /**
   * 设置中心点位置以及层级
   * @param {*} lng 经度 116.404
   * @param {*} lat 维度 39.925
   * @param {*} lev 地图层级 15
   */
  setCenterLevel(lng, lat, lev) {
    const point = new BMapGL.Point(lng, lat)
    return this.mapGL.centerAndZoom(point, lev)
  }
  /**
   * 获取坐标点
   * @returns
   */
  getPoint(fun) {
    this.mapGL.addEventListener("click", function (e) {
      fun(e.latlng)
    })
  }

  //撒点弹窗模板
  getModel(item) {
    let data = {}
    data.opts = {
      width: 200, // 信息窗口宽度
      height: 100, // 信息窗口高度
      title: "故宫博物院", // 信息窗口标题
      message: "这里是故宫"
    }
    // 创建图文信息窗口
    data.content = `
        <h4 style='margin:0 0 5px 0;'>天安门</h4>
        <p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>
            天安门坐落在中国北京市中心,故宫的南侧,与天安门广场隔长安街相望,是清朝皇城的大门...
        </p>`
    return data
  }
  /**
   *某省某市行政区划
   * @param {*} cityJosn 城市数据 一般为省份数据
   * @param {*} colors 需要设置填充颜色的 城市数据 ["match",["get", "name"],"海淀区","#ce4848","朝阳区", "blue","通州区","blue","丰台区", "#6704ff","orange"]
   * @param {*} selectedColor 鼠标选中或者悬停的颜色
   * @param {*} strokeColor 区域边框颜色
   */
  drawRegion({ cityJosn, colors, selectedColor, strokeColor }) {
    let fillLayer
    const that = this
    fillLayer = new BMapGL.FillLayer({
      crs: "GCJ02",
      enablePicked: true,
      autoSelect: true,
      pickWidth: 30,
      pickHeight: 30,
      selectedColor, // 悬浮选中项颜色
      border: true,
      style: {
        fillColor: ["case", ["boolean", ["feature-state", "picked"], false], "red", colors],
        fillOpacity: 0.3,
        strokeWeight: 1,
        strokeColor
      }
    })
    fillLayer.addEventListener("click", function (e) {
      if (e.value.dataIndex !== -1 && e.value.dataItem) {
        that.areaTotalModel(e.value.dataItem.properties)
      }
    })
    // fillLayer.addEventListener("mousemove", function (e) {
    //   if (e.value.dataIndex !== -1 && e.value.dataItem) {
    //     that.areaTotalModel(e.value.dataItem.properties);
    //   }
    // });
    this.mapGL.addNormalLayer(fillLayer)
    fillLayer.setData(cityJosn)
  }
  //区域统计弹窗模板
  areaTotalModel(item) {
    this.mapGL.closeInfoWindow()
    let data = {}
    data.opts = {
      width: 200, // 信息窗口宽度
      height: 100, // 信息窗口高度
      title: item.name, // 信息窗口标题
      message: ""
    }
    // 创建图文信息窗口
    data.content = `
          <p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>
             风险1:1258
          </p>
          <p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>
             风险2:1258
          </p>
          <p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>
             风险3:1258
          </p>`
    const infoWindow = new BMapGL.InfoWindow(data.content, data.opts) // 创建信息窗口对象
    const point = new BMapGL.Point(item.center[0], item.center[1])
    this.mapGL.openInfoWindow(infoWindow, point) //开启信息窗口
  }
  /**
   * 绘制轨迹数据
   * @param {*} data 坐标数据
   * @param {*} startIcon 起点图标
   * @param {*} endIcon 终点图标
   */
  drawRoutePlanning(data, startIcon, endIcon) {
    const icon = getImgUrl("map/Icon_road_green_arrow.png")
    let lineLayer
    lineLayer = new BMapGL.LineLayer({
      enablePicked: true,
      autoSelect: true,
      pickWidth: 30,
      pickHeight: 30,
      opacity: 1,
      selectedColor: "blue", // 选中项颜色
      style: {
        marginLength: 8, // 间隔距离，默认16，单位像素
        borderColor: "#999",
        borderWeight: 0, // 描边宽度，可以设置负值
        strokeWeight: 10, // 描边线宽度，默认0
        strokeLineJoin: "miter", //描边线连接处类型, 可选'miter', 'round', 'bevel'
        strokeLineCap: "square", // 描边线端头类型，可选'round', 'butt', 'square'，默认round
        // 填充纹理图片地址，默认是空。图片需要是竖向表达，在填充时会自动横向处理。
        strokeTextureUrl: icon,
        strokeTextureWidth: 16,
        strokeTextureHeight: 64
      }
    })
    //加载初始点位
    const pointArr = data.features[0].geometry.coordinates
    const start = pointArr[0]
    const end = pointArr[pointArr.length - 1]
    this.showMarker(start[0], start[1], startIcon)
    this.showMarker(end[0], end[1], endIcon)
    //点击时间
    lineLayer.addEventListener("click", function (e) {
      if (e.value.dataIndex !== -1 && e.value.dataItem) {
      }
    })
    lineLayer.setData(data)
    this.mapGL.addNormalLayer(lineLayer)
  }
}
export default MapUtils
