<template>
  <div style="position: relative">
    <div class="search-wrapper pos">
      <el-input
        v-model="searchinput"
        class="searchinput"
        placeholder="请输入内容"
        size="mini"
        style="width: 150px"
        ref="input"
      ></el-input>
    </div>
    <div
      id="drawArea"
      :style="{height: this.height + 'px'}"
    ></div>
  </div>

</template>

<script>
  import { EditorMap } from "@/utils/mapClass/getPath.js";
import { _ } from "core-js";
  export default {
    name: "draw-area",
    props:{
      value: {
        type: Array,
        default: ()=>[],
      },
      height:{
        type: Number,
        default: 500
      }
    },
    data(){
        return{
          gaoMap: null,
          mouseTool: null,
          drawLayers: [],
          overlays: null,
          firstClick: 0,
          nowMouseTarget: null,
          currentPolygonId: 0,
          isClickPolygonFlag: false,
          opts:{
            fillColor:'#00b0ff',
            strokeColor:'#80d8ff'
          },
          searchinput: ""
        }
    },
    mounted(){ 
      this.initMap();
    },
    methods:{
      //地图初始化
      initMap(){
        const path = eval(this.$store.state.user.systemSetting.map_center);
        this.gaoMap = new EditorMap("drawArea", {center:path}, this); 
        if(this.value.length > 0){
          this.loadArea();
        } 
        this.initMouseEvent();
      },
      //初始化鼠标事件
      initMouseEvent(){ 
        let that = this;
        this.gaoMap.map.plugin(["AMap.MouseTool"], () => {
          that.mouseTool = new AMap.MouseTool(this.gaoMap.map);
          that.mouseTool.polygon(that.opts);
          that.mouseTool.on('draw',function(e){   
            let nowMouseTargetObj = new Object();
            nowMouseTargetObj= e.obj;
                    // 如果只允许画一个则用这个方法 发数据
            // that.$emit("input", that.nowMouseTarget._opts.path);
            that.isClickPolygonFlag = false;
            if(nowMouseTargetObj._opts.path.length > 2){
              that.mouseTool.close();
              that.isClickPolygonFlag = true;
            }
            that.firstClick = 0;
            nowMouseTargetObj.on('click',function () {
              that.isClickPolygonFlag = true;
              that.firstClick++;
              // if(that.firstClick < 2){
                that.gaoMap.map.plugin(["AMap.PolygonEditor"],(n) => {
                  const polygonEditor = new AMap.PolygonEditor(that.gaoMap.map,e.obj);
                  nowMouseTargetObj.polygonEditor = polygonEditor;
                  polygonEditor.on("removenode", (e) => { 
                    that.isClickPolygonFlag = true;
                    if(nowMouseTargetObj._opts.path.length == 0){
                      setTimeout(() => {
                        that.mouseTool.polygon(that.opts);
                      }, 230);
                    }
                  });
                  polygonEditor.on("adjust",(e) =>{
                    that.$emit("update-path", that.drawLayers); 
                  })
                  polygonEditor.on("addnode",(e) =>{
                    that.$emit("update-path", that.drawLayers); 
                  })
                  polygonEditor.open();
                });
              // }
            });
            nowMouseTargetObj.on("mouseout", (e) => {
              that.isClickPolygonFlag = false;
              that.mouseTool.polygon(that.opts);
            })

            // 鼠标放到了这个上面
            nowMouseTargetObj.on("mouseover", (e) => { 
              that.mouseTool && that.mouseTool.close();
            })
            //右键关闭区域编辑
            nowMouseTargetObj.on("rightclick",(e) => {
              that.firstClick = 0;
              nowMouseTargetObj.polygonEditor.close();
            })

            // 双击删除
            nowMouseTargetObj.on("dblclick",(e) => {    
              that.$confirm("是否删除此区域", { type: "warning" })
                .then(() => { 
                  let deleteIndex = null;
                  for (let i = 0;i < that.drawLayers.length;i ++) {       
                    var isPointInRing = AMap.GeometryUtil.isPointInRing(e.lnglat,that.drawLayers[i]._opts.path);
                    if (isPointInRing) {
                      deleteIndex = i;
                    }
                  }
                  if (deleteIndex != null) {
                    that.drawLayers[deleteIndex].polygonEditor.close();
                    that.gaoMap.map.remove(that.drawLayers[deleteIndex]);
                    that.drawLayers.splice(deleteIndex, 1);
                  }
                }).catch(() => {});
                that.$emit("update-path", that.drawLayers); 
            })

            if (nowMouseTargetObj._opts.path.length > 2) {
              
              let haveObjNum = null;
              if (that.drawLayers.length > 0) {
                for (let i = 0; i < that.drawLayers.length; i++) {
                  let item  = that.drawLayers[i];
                  // 是后来新添加的
                  if (item._opts.path) {
                    let optsPathItem = item._opts.path;
                    if (JSON.stringify(optsPathItem) === JSON.stringify(nowMouseTargetObj._opts.path)) {
                      haveObjNum = i;
                    }
                  // 是之前回显的数据
                  } 
                  
                  if (item.getPath()) {
                    let pointsItem = item.getPath();
                    if (JSON.stringify(pointsItem) === JSON.stringify(nowMouseTargetObj._opts.path)) {
                      haveObjNum = i;
                    }
                  }
                }
              }
              if (haveObjNum == null) {
                that.$set(that.drawLayers, that.drawLayers.length, nowMouseTargetObj);
              }
            }
            that.$emit("update-path", that.drawLayers); 
            that.mouseTool.polygon(that.opts);
          })
        });
      },  
      initMapPolygon(value) {
        let that = this; 
        let haveObjNum = null; 
        if (that.drawLayers.length > 0) {
          for (let i = 0; i < that.drawLayers.length; i++) {
            let item  = that.drawLayers[i]; 
            // 是后来新添加的
            if (item._opts.path) {
              let optsPathItem = item._opts.path;
              if (JSON.stringify(optsPathItem) === JSON.stringify(value)) {
                haveObjNum = i;
              }
            // 是之前回显的数据
            } 
            
            if (item.getPath()) { 
              if (JSON.stringify(item.getPath()) === JSON.stringify(value)) {
                haveObjNum = i;
              }
            }
          }
        }
        if (haveObjNum != null) {
          return;
        }
 
        const polygon = new AMap.Polygon({
          map:that.gaoMap.map,
          path: value,
          fillColor:'#00b0ff',
          strokeColor:'#80d8ff',
          extData: {id: that.drawLayers.length}
        });
        let mouseTarget = new Object();
        mouseTarget = polygon;
        that.firstClick = 0;
        mouseTarget.on("click",(e) =>{
          that.isClickPolygonFlag = true;
          that.firstClick++;
          if(that.firstClick < 2){
            that.gaoMap.map.plugin(["AMap.PolygonEditor"],()=> {
              mouseTarget.polygonEditor = new AMap.PolygonEditor(that.gaoMap.map,e.target);
              mouseTarget.polygonEditor.on("removenode", (e) => {
                that.isClickPolygonFlag = true;
              });
              mouseTarget.polygonEditor.on("adjust",(e) =>{  
                that.$emit("update-path", that.drawLayers); 
              })
              mouseTarget.polygonEditor.on("addnode",(e) =>{
                that.$emit("update-path", that.drawLayers); 

              })
              mouseTarget.polygonEditor.open();
          })
          }
        });
        mouseTarget.on("mouseout", (e) => {
          that.isClickPolygonFlag = false;
        })
        mouseTarget.on("rightclick",() => {
          that.firstClick = 0;
          mouseTarget.polygonEditor && mouseTarget.polygonEditor.close();
        });
        mouseTarget.on("mouseout", (e) => {
          that.isClickPolygonFlag = false;
          that.mouseTool.polygon(that.opts);
        })

        // 鼠标放到了这个上面
        mouseTarget.on("mouseover", (e) => { 
          that.mouseTool && that.mouseTool.close();
        })
        // 双击删除
        mouseTarget.on("dblclick",(e) => {    
          that.firstClick = 0;
          that.$confirm("是否删除此区域", { type: "warning" })
            .then(() => { 
              let deleteIndex = null;
              for (let i = 0;i < that.drawLayers.length;i ++) {       
                if (that.drawLayers[i]._opts.path) {
                  var isPointInRing = AMap.GeometryUtil.isPointInRing(e.lnglat,that.drawLayers[i]._opts.path);
                  if (isPointInRing) {
                    deleteIndex = i;
                  }
                }
                if (that.drawLayers[i].getPath()) {
                  var isPointInRing = AMap.GeometryUtil.isPointInRing(e.lnglat,that.drawLayers[i].getPath());
                  if (isPointInRing) {
                    deleteIndex = i;
                  }
                }
              } 
              if (deleteIndex != null) { 

                if (that.drawLayers[deleteIndex].polygonEditor) {
                  that.drawLayers[deleteIndex].polygonEditor.close(); 
                }
                that.gaoMap.map.remove(that.drawLayers[deleteIndex]); 
                that.drawLayers.splice(deleteIndex, 1); 
              }
              that.$emit("update-path", that.drawLayers); 
            }).catch(() => {});
        })


        if (haveObjNum === null) {
          that.$set(that.drawLayers, that.drawLayers.length, mouseTarget); 
        }
      },
      //区域回显
      loadArea(){
        if (this.value.length > 1) {
          for (let i = 0;i < this.value.length;i++) { 
            this.initMapPolygon(this.value[i]);
          }
          this.gaoMap.map.setZoom(12) 
        } else if(this.value.length === 1) {
            this.initMapPolygon(this.value[0]);
            this.gaoMap.setCenter(this.value[0][0]);
            this.gaoMap.map.setZoom(12) 
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  .search-wrapper {
    left: 30px;
  }
  .positionBtn {
    right: 30px;
  }
  .pos {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 20;
  }
  #drawArea {
    width: 100%;
    border: 1px solid;
  }

</style>
