import './store/MouseTips'
import './store/MouseTips.css'

let map
// 标记点
let deleteIcon = L.icon({
  iconUrl: require('../../assets/map/close.png'),
  iconSize: [20, 20], // 图标大小
  iconAnchor: [0, 20], // 图标偏移量，否则无法居住显示
});

// 创建鼠标提示控件
let mouseTips = L.control.mouseTips({
  show: true,
  message: '鼠标单击左键加点，双击结束'
});
// 距离测量方法
let distanceMeasure = {
  points: [],
  color: "red",
  layers: L.layerGroup(),
  polyline: null,
  polylineGroup: [],
  marker: null,
  markerGroup: [],
  init: function () {
    distanceMeasure.points = [];
    distanceMeasure.polyline = null;
    distanceMeasure.marker = null;
    map.on('click', distanceMeasure.click);
    map.on('dblclick', distanceMeasure.dblclick);
  },
  click: function (e) {
    map.doubleClickZoom.disable();
    // 添加点信息
    distanceMeasure.points.push(e.latlng);
    // 添加线
    map.on('mousemove', distanceMeasure.mousemove);
  },
  mousemove: function (e) {
    distanceMeasure.points.push(e.latlng);
    if (distanceMeasure.polyline)
      map.removeLayer(distanceMeasure.polyline);
    distanceMeasure.polyline = L.polyline(distanceMeasure.points, {
      showMeasurements: true,
      color: distanceMeasure.color
    });
    distanceMeasure.polyline.addTo(distanceMeasure.layers);
    distanceMeasure.layers.addTo(map);
    distanceMeasure.points.pop();
  },
  dblclick: function (e) { // 双击结束
    // 移除鼠标绘制提示
    mouseTips.hide()
    distanceMeasure.polyline.addTo(distanceMeasure.layers);
    distanceMeasure.polylineGroup.push(distanceMeasure.polyline)
    map.off('click', distanceMeasure.click).off('mousemove', distanceMeasure.mousemove).off('dblclick', distanceMeasure.dblclick);
  },
  destory: function () {
    if (distanceMeasure.polyline) {
      // map.removeLayer(distanceMeasure.polyline);
      distanceMeasure.polylineGroup.forEach(element => {
        map.removeLayer(element);
      });
    }

    if (distanceMeasure.marker) {
      // distanceMeasure.marker.remove();
      distanceMeasure.markerGroup.forEach(element => {
        element.remove()
      })
    }

  }
}
// 面积测量方法
let areaMeasure = {
  points: [],
  color: "red",
  layers: L.layerGroup(),
  polygon: null,
  polygonGroup: [],
  marker: null,
  markerGroup: [],
  init: function () {
    areaMeasure.points = [];
    areaMeasure.polygon = null;
    areaMeasure.marker = null;
    map.on('click', areaMeasure.click);
    map.on('dblclick', areaMeasure.dblclick);
  },
  close: function (latlng) {
    areaMeasure.marker = L.marker(latlng, {
      icon: deleteIcon
    }).addTo(map).on("click", function (e) {
      if (areaMeasure.polygon)
        map.removeLayer(areaMeasure.polygon);

      if (areaMeasure.marker)
        areaMeasure.marker.remove();
    });
    areaMeasure.markerGroup.push(areaMeasure.marker);
  },
  click: function (e) {
    map.doubleClickZoom.disable();
    // 添加点信息
    areaMeasure.points.push(e.latlng);
    // 添加面
    map.on('mousemove', areaMeasure.mousemove);
  },
  mousemove: function (e) {
    areaMeasure.points.push(e.latlng);
    if (areaMeasure.polygon)
      map.removeLayer(areaMeasure.polygon);
    areaMeasure.polygon = L.polygon(areaMeasure.points, {
      showMeasurements: true,
      color: areaMeasure.color
    });
    areaMeasure.polygon.addTo(areaMeasure.layers);
    areaMeasure.layers.addTo(map);
    areaMeasure.points.pop();
  },
  dblclick: function (e) { // 双击结束
    // 移除鼠标绘制提示
    mouseTips.hide()
    areaMeasure.polygon.addTo(areaMeasure.layers);
    areaMeasure.polygonGroup.push(areaMeasure.polygon)
    // areaMeasure.close(e.latlng);
    map.off('click', areaMeasure.click).off('mousemove', areaMeasure.mousemove).off('dblclick', areaMeasure.dblclick);
  },
  destory: function () {
    if (areaMeasure.polygon) {
      areaMeasure.polygonGroup.forEach(element => {
        map.removeLayer(element);
      });
    }
    if (areaMeasure.marker) {
      areaMeasure.markerGroup.forEach(element => {
        element.remove()
      })
    }

  }
}
// 距离量测
const handMeasureDistance = (myMap) => {
  map = myMap
  // 鼠标绘制提示
  distanceMeasure.init(map)
  mouseTips.addTo(map).show();
}
// 面积量测
const handMeasureArea = (myMap) => {
  map = myMap
  // 鼠标绘制提示
  areaMeasure.init(map)
  mouseTips.addTo(map).show();
}
// 清空量测内容
const handMeasureClear = (myMap) => {
  map = myMap
  // 鼠标绘制提示
  mouseTips.addTo(map).hide();
  // 销毁测量组件
  distanceMeasure.destory()
  areaMeasure.destory(map)
}

export {
  handMeasureDistance,
  handMeasureArea,
  handMeasureClear
}