<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";
  export default {
    name: "draw-area",
    props:{
      value: {
        type: Array,
        default: ()=>[],
      },
      height:{
        type: Number,
        default: 500
      }
    },
    data(){
        return{
          gaoMap: null,
          mouseTool: null,
          drawLayers: [],
          selectedLayerIndex: null,
          overlays: null,
          firstClick: 0,
          nowMouseTarget: null,
          currentPolygonId: 0,
          isClickPolygonFlag: false,
          opts:{
            fillColor:'#00b0ff',
            strokeColor:'#80d8ff'
          },
          searchinput: ""
        }
    },
    mounted(){
      this.initMap();
      this.$nextTick(() => {
        const input = this.$refs.input.$refs.input;
        this.gaoMap.positionSearch(input);
      });
    },
    methods:{
      //地图初始化
      initMap(){
        const path = eval(this.$store.state.user.systemSetting.map_center);
        this.gaoMap = new EditorMap("drawArea", {center:path}, this);
        this.initMapEvent();
        if(this.value.length > 0){
          this.loadArea();
        }else{
          this.initMouseEvent();
        }
      },
      initMapEvent(){
        let that = this;
        this.gaoMap.map.on("click", () => {
          if(that.nowMouseTarget && !that.isClickPolygonFlag){
            //that.$emit("input", []);
            that.mouseTool && that.mouseTool.close();
            that.nowMouseTarget.polygonEditor && that.nowMouseTarget.polygonEditor.close();
            //that.gaoMap.map.remove(that.nowMouseTarget);
            that.mouseTool && that.mouseTool.polygon(that.opts);
            if(!that.mouseTool){
              that.initMouseEvent();
            }
            that.isClickPolygonFlag = true;

            this.drawLayers.push('[' + that.nowMouseTarget + ']');
            that.nowMouseTarget.setMap(this.gaoMap.map);
            this.selectedLayerIndex = this.drawLayers.length - 1; // 设置当前选中的图层索引
            console.log("this.drawLayers = " + this.drawLayers)
            that.nowMouseTarget = null;
          }
        });
      },
      //初始化鼠标事件
      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){
            that.nowMouseTarget = e.obj;
            that.$emit("input", that.nowMouseTarget._opts.path);
            that.isClickPolygonFlag = false;
            if(that.nowMouseTarget._opts.path.length > 2){
              that.mouseTool.close();
              that.isClickPolygonFlag = true;
            }
            that.firstClick = 0;
            e.obj.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);
                  that.nowMouseTarget.polygonEditor = polygonEditor;
                  polygonEditor.on("removenode", (e) => {
                    that.$emit("input", e.target._opts.path);
                    that.isClickPolygonFlag = true;
                    if(that.nowMouseTarget._opts.path.length == 0){
                      setTimeout(() => {
                        that.mouseTool.polygon(that.opts);
                      }, 230);
                    }
                  });
                  polygonEditor.on("adjust",(e) =>{
                    that.$emit("input", e.target._opts.path);
                  })
                  polygonEditor.on("addnode",(e) =>{
                    that.$emit("input", e.target._opts.path);
                  })
                  polygonEditor.open();
                });
              }
            });
            e.obj.on("mouseout", (e) => {
              that.isClickPolygonFlag = false;
            })
            //右键关闭区域编辑
            e.obj.on("rightclick",() => {
              that.firstClick = 0;
              that.nowMouseTarget.polygonEditor.close();
            })
            //双击删除
            e.obj.on('dblclick',(e) => {
              console.log("this.e = " + e)
              that.$confirm("是否删除此区域", { type: "warning" })
              .then(() => {
                console.log("确实要删除了。")
                debugger;

                let point = new AMap.LngLat(e.lngLat.lng, e.lngLat.lat);

                for (let i = 0; i < this.drawLayers.length; i++) {

                  if (this.drawLayers[i].contains(point)){
                    console.log("第" + i + "个包含点击的坐标点，该删除");
                  }
                }
              }).catch(() => {});
            })
          }),
          that.mouseTool.on('click',()=>{
            if (!this.selectedLayerIndex) return;
            let layer = this.drawLayers[this.selectedLayerIndex];
            let point = new AMap.LngLat(e.lnglat.lng, e.lnglat.lat);

            if (layer.contains(point)) {
              // 点击点在区域内，则添加到区域中
              layer.getPath().push(point);
            } else {
              // 点击点不在区域内，则删除最近的一个点
              let path = layer.getPath();
              let lastPoint = path[path.length - 1];
              if (lastPoint.distance(point) > 50) {
                path.pop();
              }
            }
          })
        });
      },
      handleDrawEnd(e){
        let layer = e.layer;
        this.drawLayers.push(layer);
        layer.setMap(this.gaoMap.map);
        // 设置当前选中的图层索引
        this.selectedLayerIndex = this.drawLayers.length - 1;
      },
      handleClick(e){
        if (!this.selectedLayerIndex) return;

        let layer = this.drawLayers[this.selectedLayerIndex];
        let point = new Amap.lngLat(e.lnglat.lng,e.lnglat.lat);

        if (layer.contains(point)) {
          //点击点在区域内，则添加到区域内
          layer.getPath().push(point);
        } else {
          //点击点不在区域内，则删除最近的一个点
          let path = layer.getPath();
          let lastPoint = path[path.length - 1];
          if (lastPoint.distance(point) > 50) {
            path.pop();
          }
        }
      },
      selectLayer(index) {
        this.selectedLayerIndex = index;
      },
      deleteLayer(index){
        let layer = this.drawLayers[index];
        layer.setMap(null);
        this.drawLayers.splice(index,1);
        if (this.selectedLayerIndex >= index) {
          this.selectedLayerIndex = Math.max(0,this.selectedLayerIndex - 1);
        }
      },
      //区域回显
      loadArea(){
        const polygon = new AMap.Polygon({
          map:this.gaoMap.map,
          path: this.value,
          fillColor:'#00b0ff',
          strokeColor:'#80d8ff'
        });
        this.nowMouseTarget = polygon;
        this.firstClick = 0;
        polygon.on("click",(e) =>{
          this.isClickPolygonFlag = true;
          this.firstClick++;
          if(this.firstClick < 2){
            this.gaoMap.map.plugin(["AMap.PolygonEditor"],()=> {
              this.nowMouseTarget.polygonEditor = new AMap.PolygonEditor(this.gaoMap.map,e.target);
              this.nowMouseTarget.polygonEditor.on("removenode", (e) => {
                this.isClickPolygonFlag = true;
                this.$emit("input", e.target._opts.path);
              });
              this.nowMouseTarget.polygonEditor.on("adjust",(e) =>{
                this.$emit("input", e.target._opts.path);
              })
              this.nowMouseTarget.polygonEditor.on("addnode",(e) =>{
                this.$emit("input", e.target._opts.path);
              })
             this.nowMouseTarget.polygonEditor.open();
          })
          }
        });
        polygon.on("mouseout", (e) => {
          this.isClickPolygonFlag = false;
        })
        polygon.on("rightclick",() => {
          this.firstClick = 0;
          this.nowMouseTarget.polygonEditor && this.nowMouseTarget.polygonEditor.close();
        });
        this.gaoMap.setCenter(this.value[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>
