<template>
  <div>
    <div id="container"></div>
    <div class="input-card" style="width: 120px">
      <button class="btn" @click="returnlist" style="margin-bottom: 5px">返回</button>
      <div v-show="open==1">
        <button class="btn" @click="startEditing" style="margin-bottom: 5px">开始编辑</button>
        <button class="btn" @click="endEditing" style="margin-bottom: 5px">结束编辑</button>
        <button class="btn" @click="createPolygon" style="margin-bottom: 5px">新建</button>
      </div>

    </div>
  </div>
</template>

<script>
import {setFenceWay} from "@/api/fence/fence";

export default {
  name: 'AmapPolygonEditor',
  data() {
    return {
      map: null,
      //展示操作
      open: 0,
      fenceWay: {
        id: null,
        longitudeLatitude: '',
      },
      polygonEcho: null,
      polygon1: null,
      polygon2: null,
      //回显围栏位置
      pathEcho: null,
      polyEditor: null,
    };
  },
  mounted() {
    this.initMap();
  },
  created() {
    this.fenceWay.id = this.$route.query.id;
    this.open = this.$route.query.open;
  },
  methods: {

    //初始化地图
    initMap() {
      this.pathEcho = this.$route.query.longitudeLatitude;
      console.log(this.pathEcho);
      // 初始化地图
      this.map = new AMap.Map('container', {
        center: [116.471354, 39.994257],
        zoom: 16.8,
      });

      //  创建多边形
      //   const path1 = [[116.475334, 39.997534], [116.476627, 39.998315], [116.478603, 39.99879], [116.478529, 40.000296], [116.475082, 40.000151], [116.473421, 39.998717]];
      //   const path2 = [[116.474595, 40.001321], [116.473526, 39.999865], [116.476284, 40.000917]];
      //
      //   this.polygon1 = new AMap.Polygon({
      //     path: path1
      //   });
      //   this.polygon2 = new AMap.Polygon({
      //     path: path2
      //   });

      if (this.pathEcho != null && this.pathEcho != undefined) {
        // 将字符串按分号分割
        const pointPairs = this.pathEcho.split(';');
        const points = [];

        for (const pair of pointPairs) {
          // 去除空格
          const trimmedPair = pair.trim();
          if (trimmedPair) {
            // 将每一对经纬度按逗号分割
            const [lng, lat] = trimmedPair.split(',').map(Number);
            points.push([lng, lat]);

          }
        }
        this.polygon1 = new AMap.Polygon({
          //points 是经纬度数组
          path: points
        });

        this.map.add([this.polygon1]);

        this.polygon1.on('dblclick', () => {
          this.polyEditor.setTarget(this.polygon1);
          this.polyEditor.open();
        });
      }

      this.map.setFitView();

      // 初始化多边形编辑器
      this.polyEditor = new AMap.PolygonEditor(this.map);
      //  this.polyEditor.addAdsorbPolygons([this.polygon1, this.polygon2]);

      // 监听添加事件
      this.polyEditor.on('add', (data) => {
        // event.obj 为绘制出来的覆盖物对象
        let path = data.obj.getPath(); // 获取多边形的路径
        let str = "";
        let pathArr = [];
        for (let i = 0; i < path.length; i++) {
          pathArr.push([path[i].getLng(), path[i].getLat()]);
          this.fenceWay.longitudeLatitude += path[i].getLng() + "," + path[i].getLat() + ";";
        }
        // 这个就是绘制的点的坐标数组
        // this.addForm.latlng = str;  // 转换为字符串
        console.log(this.fenceWay.longitudeLatitude)
        console.log(data);
        const polygon = data.target;

        this.polyEditor.addAdsorbPolygons(polygon);

        polygon.on('dblclick', () => {
          this.polyEditor.setTarget(polygon);
          this.polyEditor.open();
        });
      });

      // 双击多边形开始编辑
      //  this.polygon1.on('dblclick', () => {
      //    this.polyEditor.setTarget(this.polygon1);
      //    this.polyEditor.open();
      //  });
      //  this.polygon2.on('dblclick', () => {
      //    this.polyEditor.setTarget(this.polygon2);
      //    this.polyEditor.open();
      //  });
    },

    //返回围栏列表
    returnlist() {
      this.$router.push({
        path: 'list'
      })

    },
    createPolygon() {
      this.polyEditor.close();
      this.polyEditor.setTarget();
      this.polyEditor.open();
    },

    //开始编辑
    startEditing() {
      this.polyEditor.open();
    },
    //结束编辑
    endEditing() {
      this.polyEditor.close();
      console.log(this.longitudeLatitude)
      setFenceWay(this.fenceWay).then(res => {
        if (200 == res.code) {
          this.$modal.msgSuccess("设置位置成功");
          this.$router.push({
            path: 'list'
          })
        }
      })
    }
  }
};
</script>

<style scoped>
#container {
  width: 100%;
  height: 100vh;
}

.input-card {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1000;
}

.btn {
  display: block;
  margin-bottom: 5px;
}
</style>
