import createPop from "./createPop";
import regulatorBox from "../components/PopWindow/regulatorBox.vue"
import valveWell from "../components/PopWindow/valveWell.vue"
import flowMeter from "../components/PopWindow/flowMeter.vue"
import dutyPerson from "../components/PopWindow/dutyPerson.vue"
let defaultCenter = "石家庄";
export let map;
export const DEVICE_TYPE = {
  PIPEPLINE : "1",
  REGEULATORBOX : "2",
  VALUEWELL : "3",
  FLOWMETER : "4",
  DUTYPERSON : "5"
}
  class gaodeMap {
  //构造函数中设置中央点默认值
  constructor(center) {
    this.markers = [];
    this.center = center?center:defaultCenter;
    map = new AMap.Map('container', {
      //mask: addMask(result.districtList[0].boundaries),
      center: [114.72995, 38.37417],
      // resizeEnable: true,
      disableSocket: true,
      viewMode: '3D',
      showLabel: true,
      // labelzIndex: 110,
      pitch: 8,
      zoom: 9,
      //mapStyle: 'amap://styles/darkblue',
      // mapStyle: 'amap://styles/3b679a15f448a4740ba2ff7524e1a4ae',
    });
    this.districtBoundaries();
  }

  /**
   * 获取map
   * @returns {AMap.Map}
   */
  get getMap(){
    return this.map;
  }

  /**
   * 重新设置中央点
   * @param value
   */
  set setCenter(value){
    this.center = value;
    this.districtBoundaries();
  }

  /**
   * 设置城市边界
   */
  districtBoundaries(){
   let that = this;
   let opts = {
     subdistrict: 0,
     extensions: 'all',
     level: 'city'
   };
   let district = new AMap.DistrictSearch(opts);
   district.search(that.center, function (status, result) {
     if(status == "complete"){
       let defaultCenter = [];
       defaultCenter.push(result.districtList[0].center.lng);
       defaultCenter.push(result.districtList[0].center.lat);
       map.setCenter(defaultCenter);
       let  bounds =result.districtList[0].boundaries;
       for (let i = 0; i < bounds.length; i += 1) {
         new AMap.Polyline({
           path: bounds[i],
           strokeColor: '#0088ff',
           strokeWeight: 5,
           strokeOpacity: 7,
           map: map,
         });
       }
     }
   })
 }

  /**
   * 添加Market
   * @param markerType
   * @param lnglats
   */
  addMarker(markerType,lnglats){
    let that = this;
    that.markerType = markerType;
    let infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(-13, -70)});
    for (let i = 0; i < lnglats.length; i++) {
      let marker = new AMap.Marker({
        position: lnglats[i],
        map: map,
        offset: new AMap.Pixel(-13, -30),
        cursor: 'move',
        // 设置拖拽效果
        raiseOnDrag: true
      });
      marker.content = this.getMarketContent("data");
      marker.on('mouseover', infoOpen);
      marker.on('mouseout', infoClose);
      that.deviceType = markerType;
      let editWindow = that.createInfowindow();
      marker.on('click', function(e){
        if("edit" == that.mapOperateType){
          editWindow.show();
        }else if("delete" == that.mapOperateType){
          if(confirm("确认删除")== true){
            map.remove(marker);
          }

        }else{
          map.setZoomAndCenter(13, e.target.getPosition());
          let infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(-13, -70)});
          infoWindow.setContent(e.target.content);
          infoWindow.open(map, e.target.getPosition());
        }
      });
      marker.on('dragend', function (e) {
        editWindow.editForm.longitude = e.lnglat.lng;
        editWindow.editForm.latitude = e.lnglat.lat;
        console.log(e.lnglat,"rrrr====");
      });
      this.markers.push(marker);
    }
    map.setFitView();

    function infoClose(e) {
      infoWindow.close(map, e.target.getPosition());
    }

    function infoOpen(e) {
      infoWindow.setContent(e.target.content);
      infoWindow.open(map, e.target.getPosition());
    }

  }

  /**
   * marker添加拖拽事件
   */
  addMarkerDragg(){
    for(var i = 0; i < this.markers.length; i++){
      this.markers[i].setDraggable(true);
    }
  }

  /**
   * marker移除拖拽事件
   */
  removeMarkerDragg(){
    for(var i = 0; i < this.markers.length; i++){
      this.markers[i].setDraggable(false);
    }
  }



/**
 * 添加marker信息
 * @param data
 * @returns {string}
 */
  getMarketContent(data){
    let html = "<div>" +
        "<table>" +
          "<tr>" +
             "<td>所属燃气公司</td>" +
             "<td>正元</td>" +
          "</tr>" +
          "<tr>" +
          "<td>名称</td>" +
          "<td>1234</td>" +
          "</tr>" +
          "<tr>" +
          "<td>地址</td>" +
          "<td>石家庄市新华区</td>" +
          "</tr>" +
        "</table>" +
      "</div>";
    switch (this.markerType){
      case DEVICE_TYPE.REGEULATORBOX :{
        return html;
      }
      case DEVICE_TYPE.VALUEWELL :{
        return html;
      }
      case DEVICE_TYPE.FLOWMETER :{
        return html;
      }
      case DEVICE_TYPE.DUTYPERSON :{
        return html;
      }
    }
  }

  /**
   * 添加折线
   * @param path
   */
  addPolyline(path){
    let polylines = [];
    for(let i = 0;i< path.length; i++){
      let polyline = new AMap.Polyline({
        path: path[i],
        strokeColor: "green",
        strokeWeight: 8,
        strokeOpacity: 0.9,
        zIndex: 50,
        bubble: true,
      })
      polylines.push(polyline);
      let polyEditor = new AMap.PolyEditor(map, polyline);
      //创建右键菜单
      let contextMenu = new AMap.ContextMenu();
      //右键放大
      contextMenu.addItem("编辑Polyline", function () {
        polyEditor.setTarget(polyline);
        polyEditor.open();
      }, 0);
      contextMenu.addItem("结束编辑", function () {
        polyEditor.close();
      }, 0);
      //添加事件
      polyline.on("rightclick",function (e) {
        contextMenu.open(map, e.lnglat);
      })
    }
    map.add(polylines);
    // 缩放地图到合适的视野级别
    map.setFitView();
  }

  /**
   * 添加鼠标事件
   */
  addMouseTool(){
    this.mouseTool = new AMap.MouseTool(map);
    //监听draw事件可获取画好的覆盖物
    this.overlays = [];
    let that = this;
    this.mouseTool.on('draw',function(e){
      const device = that.createInfowindow();
      e.obj.on("click",function (aa) {
        let postion = aa.target._position;
        device.editForm.longitude = postion.lng;
        device.editForm.latitude = postion.lat;
        device.show();
      })
      that.overlays.push(e.obj);
      that.mouseTool.close();
    });
  }

  /**
   * 创建弹框事件
   */
  createInfowindow(){
    switch (this.deviceType){
      case DEVICE_TYPE.PIPEPLINE :{
        break;
      }
      case DEVICE_TYPE.REGEULATORBOX :{
        return createPop(regulatorBox, {
          title: '调压箱'
        });
      }
      case DEVICE_TYPE.VALUEWELL :{
        return createPop(valveWell, {
          title: '阀门井'
        });
      }
      case DEVICE_TYPE.FLOWMETER :{
        return createPop(flowMeter, {
          title: '流量计'
        });
      }
      case DEVICE_TYPE.DUTYPERSON :{
        return createPop(dutyPerson, {
          title: '值班人员'
        });
      }
    }

  }

  /**
   * 鼠标画图事件
   * @param deviceType 设备类型
   */
  draw(deviceType){
    let that = this;
    that.deviceType = deviceType;
    if(DEVICE_TYPE.REGEULATORBOX == deviceType || DEVICE_TYPE.VALUEWELL == deviceType || DEVICE_TYPE.FLOWMETER == deviceType || DEVICE_TYPE.DUTYPERSON == deviceType){
      that.mouseTool.marker({
        draggable: true
      });
    }
    if(DEVICE_TYPE.PIPEPLINE == deviceType){
      that.mouseTool.polyline({
        strokeWeight: 9,
        strokeColor:'#80d8ff'
        //同Polyline的Option设置
      });
    }
  }

  /**
   * 添加地图控件
   */
  addMapControl(){
    AMap.plugin([
      'AMap.ToolBar',
      'AMap.Scale',
      'AMap.HawkEye',
      'AMap.MapType',
      'AMap.Geolocation',
    ], function(){
      // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
      //map.addControl(new AMap.ToolBar());

      // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
      map.addControl(new AMap.Scale());

      // 在图面添加鹰眼控件，在地图右下角显示地图的缩略图
      map.addControl(new AMap.HawkEye({isOpen:true}));

      // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
      map.addControl(new AMap.MapType({position :{top: '10px',left: '100px'}}));

      // 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
     // map.addControl(new AMap.Geolocation());
    });
  }




}
export default gaodeMap;
