import emitter from "@/utils/eventBus.js";
import { getImgUrl } from "@/utils/tools.js"
class MapUtils {
  constructor(props) {
    this.map = props;
  }
  allAreaList = []; //所有行政区域的点位实例化数据
  allAreaLabelList = []; //所有行政区域的弹窗实例化数据
  countyAllAreaList = []; //所有县级行政区域的点位实例化数据
  countyAllAreaLabelList = []; //所有县级行政区域的弹窗实例化数据
  /**
   * 添加点标记 或者 标记+弹窗（默认）
   * @param {*} lng 经度
   * @param {*} lat 维度
   * @param {*} icon 自定义标记图片
   * @param {*} isShowModel 是否点击展示模板
   * @param {*} html 模板内容
   */
  showMarker(lng, lat, isShowModel, html, icon) {
    const that = this;
    let myIcon;
    //如果没有自定义图标显示默认图标
    if (icon) myIcon = new BMap.Icon(icon, new BMap.Size(52, 62));
    //创建图标
    const point = new BMap.Point(lng, lat);
    let marker;
    if (myIcon) {
      marker = new BMap.Marker(point, { icon: myIcon });
    } else {
      marker = new BMap.Marker(point);
    }
    this.map.addOverlay(marker);
    if (isShowModel) {
      // const infoWindow = new BMap.InfoWindow(html.content, html.opts); // 创建信息窗口对象
      marker.addEventListener("click", function () {
        // that.map.openInfoWindow(infoWindow, point); //开启信息窗口
        that.countyAllAreaLabelList.forEach((item) => {
          that.map.removeOverlay(item);
        });
        that.countyAreaTotalModel(html);
      });
    }
  }
  /** */
  /**
   * 清除全部覆盖物
   */
  removeOverlay() {
    this.map.clearOverlays();
  }

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

  //撒点弹窗模板 暂时不用这个方法
  getModel(obj) {
    const that = this;
    const { point, orgObj, yhs, fxs, dcl } = obj;
    const p = new BMap.Point(point[0], point[1]);
    const marker = new BMap.Marker(p);
    let data = {};
    data.opts = {
      width: 200, // 信息窗口宽度
      height: 100, // 信息窗口高度
      title: orgObj.name // 信息窗口标题
    };
    // 创建图文信息窗口
    data.content = `
    <div>
      <p>隐患数：${yhs}</p>
      <p>隐患数：${fxs}</p>
      <p>待处理隐患：${dcl}</p>
    </div>
    `;
    that.map.addOverlay(marker);
    const infoWindow = new BMap.InfoWindow(data.content, data.opts); // 创建信息窗口对象
    that.map.openInfoWindow(infoWindow, p); //开启信息窗口
  }
  /**
   * 绘制行政区划轮廓
   * @param {*} areaCoords 行政区域数据
   * @param {*} colors 颜色
   * @param {*} name 行政区域名称
   * @param {*} point 中心点位
   * @param {*} icon 自定义标记图片
   */
  drawPolygon(areaCoords, colors) {
    var pointArray = [];
    var ply = new BMap.Polygon(areaCoords, {
      fillColor: colors,
      fillOpacity: 0.3,
      strokeWeight: 2,
      strokeColor: "#ce4848",
      fillOpacity: 0.3,
      selectedColor: "green",
      enableClicking: true,
      enableMassClear: false
    });
    this.map.addOverlay(ply);
    pointArray = pointArray.concat(ply.getPath());
    // this.map.setViewport(pointArray); //调整视野
  }
  /**
   * 添加点位标题  暂时不用这个方法
   * @param {*} name 名称
   * @param {*} poin 点位
   * @param {*} icon 自定义标记图片
   */
  addlabel(name, poin, icon) {
    var lng = poin[0];
    var lat = poin[1];
    var point = new BMap.Point(lng, lat);
    var pointArray = [point];
    var optsArray = [{}];
    var labelArray = [];
    var contentArray = [name];
    var myIcon = new BMap.Icon(icon, new BMap.Size(30, 50));
    if (icon) {
      var marker = new BMap.Marker(point, { icon: myIcon }); // 创建标注
    } else {
      var marker = new BMap.Marker(point);
    }
    for (var i = 0; i < pointArray.length; i++) {
      optsArray[i].position = pointArray[i];
      optsArray[i].offset = new BMap.Size(-20, -55);
      labelArray[i] = new BMap.Label(contentArray[i], optsArray[i]);
      labelArray[i].setStyle({
        color: "#001238",
        fontSize: "12px",
        linehight: "22px",
        height: "22px",
        fontFamily: "微软雅黑"
      });

      this.map.addOverlay(labelArray[i]);
    }
    this.map.addOverlay(marker);
    //信息窗口
    this.map.centerAndZoom(point, 8);
    var opts = {
      width: 50, // 信息窗口宽度
      height: 30, // 信息窗口高度
      title: name, // 信息窗口标题
      // enableMessage:true,//设置允许信息窗发送短息
      message: ""
    };
    var infoWindow = new BMap.InfoWindow("风险1:1258,隐患：123", opts); // 创建信息窗口对象
    marker.addEventListener("click", function () {
      this.map.openInfoWindow(infoWindow, point); //开启信息窗口
    });
  }
  //市级区域统计弹窗模板
  areaTotalModel(obj) {
    const that = this;
    //删除县级点位
    that.countyAllAreaList.forEach((item) => {
      that.map.removeOverlay(item);
    });
    that.countyAllAreaLabelList.forEach((item) => {
      that.map.removeOverlay(item);
    });
    //设置市级数据
    const { point, orgObj, bgColor, icon } = obj;
    const p = new BMap.Point(point[0], point[1]);
    var newicon = "";
    if (icon) {
      newicon = new BMap.Icon(icon, new BMap.Size(30, 50));
    }
    const marker = new BMap.Marker(p, { icon: newicon });
    const content = `<div class="fx_yh_model">${orgObj.name}</br>隐患数：${orgObj.yhsl}</br>风险数：${orgObj.fxsl}</br>待处理隐患:${orgObj.dclsl}</div>`;
    let label = new BMap.Label(content, {
      // 创建文本标注
      position: p, // 设置标注的地理位置
      offset: new BMap.Size(-55, -122) // 设置标注的偏移量
    });
    label.setStyle({
      // 设置label的样式
      color: "#fff",
      fontSize: "14px",
      background: bgColor
    });
    label.setZIndex(100);
    that.map.addOverlay(label);
    that.map.addOverlay(marker);
    that.allAreaList.push(marker);
    that.allAreaLabelList.push(label);
    marker.addEventListener("click", function (e) {
      emitter.emit("clickAreaPoint", orgObj);
      that.setCenterLevel(orgObj.centroid[0], orgObj.centroid[1], 9);
      that.allAreaList.forEach((item) => {
        that.map.removeOverlay(item);
      });
      that.allAreaLabelList.forEach((item) => {
        that.map.removeOverlay(item);
      });
    });
  }
  //县级区域统计弹窗模板
  countyAreaTotalModel(obj) {
    const { point, orgObj, bgColor, icon } = obj;
    const that = this;
    const p = new BMap.Point(point[0], point[1]);
    var newicon = "";
    if (icon) {
      newicon = new BMap.Icon(icon, new BMap.Size(30, 50));
    }
    const marker = new BMap.Marker(p, { icon: newicon });

    that.map.addOverlay(marker);
    that.countyAllAreaList.push(marker);
    //点击后只创建一个弹窗
    marker.addEventListener("click", function () {
      if (that.countyAllAreaLabelList.length > 0) {
        that.countyAllAreaLabelList.forEach((item) => {
          that.map.removeOverlay(item);
        });
      }
      // that.map.removeOverlay(item);
      const content = `<div class="fx_yh_model">${orgObj.placename}</br>隐患数：${orgObj.yhsl}</br>风险数：${orgObj.fxsl}</br>待处理隐患:${0}</div>`;
      let label = new BMap.Label(content, {
        // 创建文本标注
        position: p, // 设置标注的地理位置
        offset: new BMap.Size(-55, -122) // 设置标注的偏移量
      });
      label.setStyle({
        // 设置label的样式
        color: "#fff",
        fontSize: "14px",
        background: bgColor
      });
      label.setZIndex(100);
      that.map.addOverlay(label);
      that.countyAllAreaLabelList = [label];
    });
  }
  /**
   * 绘制轨迹数据
   * @param {*} data 坐标数据
   * @param {*} startIcon 起点图标
   * @param {*} endIcon 终点图标
   */
  drawRoutePlanning(data, startIcon, endIcon) {
    const icon = getImgUrl("map/Icon_road_green_arrow.png")
    let lineLayer;
    lineLayer = new BMap.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.map.addNormalLayer(lineLayer);
  }
}
export default MapUtils;
