<template>

  <!-- 控制按钮组 -->
  <div class="main">
    <section class="section">
      <!-- 地图 -->
      <div id="map_container" style="width: 100%; height: 100vh;"></div>

      <!-- 控制按钮组 -->
      <div class="ebox">
        <el-button-group>
          <el-button type="info" icon="el-icon-circle-plus-outline" @click="drawRectangle">绘制围栏</el-button>
          <el-button type="primary" icon="el-icon-edit" @click="editRectangle">编辑围栏</el-button>
          <el-button type="warning" icon="el-icon-delete" @click="cancelRectangle">取消编辑</el-button>
          <el-button type="success" icon="el-icon-success" @click="saveRectangle">保存围栏</el-button>
          <el-button type="danger" icon="el-icon-delete" @click="deleRectangle">删除围栏</el-button>
        </el-button-group>
      </div>
    </section>
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import { geofenceList } from '@/api/manage/fenceAPI.js' //获取围栏数据
window._AMapSecurityConfig = {
  securityJsCode: "defb21facca687bad1bb8e956b7d67dd",
};

export default {
  name: "MapContainer",
  data() {
    return {
      formData: {
        carId: '',
        pageNum: 1,//当前页
        pageSize: 10,//页长
        pageTotal: 0,//总数
      },

      map: null,
      centerArr: [113.760234, 23.048884],//地图中心位置，不能为空数组【为空数组会报错】
      path: [],//以前绘制的数据
      paths: [], // 当前绘制的多边形经纬度数组
      polygonItem: [], // 地图上绘制的所有多边形对象
      polyEditors: [],// 新增数据=>所有编辑对象数组
      polyEditorsBefore: [],// 以前历史数据=>进入编辑对象数组
    };
  },
  mounted() {
    this.initAMap();
    this.init();
  },
  methods: {
    initAMap() {
      AMapLoader.load({
        key: "d617205580ad1f43884deefb6ea53eb2",
        version: "2.0",
        plugins: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar',
          'AMap.MapType', 'AMap.MouseTool', 'AMap.Polygon', 'AMap.PolyEditor', 'AMap.CircleEditor'],
      }).then((AMap) => {
        this.map = new AMap.Map("map_container", {
          resizeEnable: true,
          viewMode: '3D', // 注意这里的引号
          zoom: 17,
          // 移除 pitch 属性，如果不需要特殊倾斜角度
          // pitch: 55,
          showBuildingBlock: true, // 注意这个属性可能在某些版本中不起作用
        });
        // 添加工具栏
        this.map.plugin(['AMap.ToolBar', 'AMap.Scale'], () => {
          const toolbar = new AMap.ToolBar()// 工具条
          const scale = new AMap.Scale()// 比例尺
          this.map.addControl(toolbar)
          this.map.addControl(scale)
        })
      }).catch((e) => {
        console.error('地图加载失败:', e);
      });
    },
    // 绘制多边形
    drawRectangle() {
      const This = this;
      let mouseTool = new AMap.MouseTool(this.map);
      const polygon = mouseTool.polygon({
        //polygon：绘制多边形【线段：polyline;矩形：rectangle;圆：circle】
        strokeColor: 'red',
        strokeOpacity: 0.4,
        strokeWeight: 6,
        fillColor: '#1791fc',
        fillOpacity: 0.2,
        // strokeStyle还支持 solid
        strokeStyle: 'solid',
        // strokeDasharray: [30,10],
      });
      mouseTool.on('draw', function (event) {
        // event.obj 为绘制出来的覆盖物对象
        let polygonItem = event.obj;
        let paths = polygonItem.getPath();//取得绘制的多边形的每一个点坐标
        // console.log('覆盖物对象绘制完成各个点的坐标', paths, event);

        let path = [];  // 编辑的路径
        paths.forEach(v => {
          path.push([v.lng, v.lat])
        });
        This.paths = path //将新增数据放入paths数组里
        // This.editRectangle();//绘制完成,默认进入编辑状态
        This.polygonItem.push(event.obj);
        This.map.remove(event.obj); // 删除多边形
        console.log(polygon, '------polygon-----');
      });
    },
    // 编辑围栏
    editRectangle() {
      const pathq = this.paths;
      //新增的进入编辑状态
      let polygon = new AMap.Polygon({
        path: path,
        strokeColor: "#FF33FF",
        strokeWeight: 6,
        strokeOpacity: 0.2,
        fillOpacity: 0.2,
        fillColor: '#1791fc',
        zIndex: 50,
      });
      this.map.add(polygon);
      this.polygonItem.push(polygon);
      // 缩放地图到合适的视野级别
      this.map.setFitView([polygon]);

      this.polyEditor = new AMap.PolyEditor(this.map, polygon);
      this.polyEditor.open();
      this.polyEditors.push(this.polyEditor);

      //历史围栏的进入编辑状态
      let polygonBefore = new AMap.Polygon({
        path: this.path,
        strokeColor: "#FF33FF",
        strokeWeight: 6,
        strokeOpacity: 0.2,
        fillOpacity: 0.2,
        fillColor: '#1791fc',
        zIndex: 50,
      });
      this.map.add(polygonBefore);
      this.polygonItem.push(polygonBefore);
      // 缩放地图到合适的视野级别
      this.map.setFitView([polygonBefore]);

      this.polyEditorBefore = new AMap.PolyEditor(this.map, polygonBefore);
      this.polyEditorBefore.open();
      this.polyEditorsBefore.push(this.polyEditorBefore);

      // this.polyEditor.on('addnode', function (event) {
      //     console.info('触发事件：addnode', event)
      //     console.info('修改后的经纬度：', polygon.getPath())
      // });

      // this.polyEditor.on('adjust', function (event) {
      //     console.info('触发事件：adjust', event)
      //     console.info('修改后的经纬度：', polygon.getPath())
      // });

      // this.polyEditor.on('removenode', function (event) {
      //     console.info('触发事件：removenode', event)
      //     console.info('修改后的经纬度：', polygon.getPath())
      // });

      // this.polyEditor.on('end', function (event) {
      //     console.info('触发事件： end', event)
      //     console.info('end修改后的经纬度：', polygon.getPath())
      //     // event.target 即为编辑后的多边形对象
      // });
    },
    // 取消编辑状态
    cancelRectangle() {
      this.polyEditors.forEach(item => { item.close(); });//新增
      this.polyEditorsBefore.forEach(item => { item.close(); });//历史
    },
    //保存围栏
    saveRectangle() {
      // 取消编辑状态
      this.polyEditors.forEach(item => { item.close(); });
      this.polyEditorsBefore.forEach(item => { item.close(); });
      // 保存  console.log(this.paths,this.path)=>成功（重新刷新页面）
      // ...
    },
    // 删除围栏
    deleRectangle() {
      this.polyEditors.forEach(item => { item.close(); });// 取消编辑状态
      this.polyEditorsBefore.forEach(item => { item.close(); });// 取消编辑状态
      this.map.clearMap(); // 删除地图所有覆盖物
      //删除=>成功（重新刷新页面）
      // ...
    },
    //获取后台数据
    init() {
      const that = this
      let param = {
        carId: this.formData.carId,//string true carID
        pageNum: this.formData.pageNum,//string false 当前页数
        pageSize: this.formData.pageSize,//string false 每页条数
      }
      geofenceList({ param }).then(res => {
        if (res.data.code == 0) {
          if (res.data.data.list.length==0) {
            this.$message.error('没有围栏数据')
            return
          }
          that.path=[]
          that.map.clearMap(); // 删除地图所有覆盖物
          res.data.data.list.forEach((item, index) => { //同时展示多个围栏
            that.path.push(item.points)//编辑时，可以一起编辑
            // this.centerArr = that.path[0]
            // this.initMap()

            that.map.add(new AMap.Polygon({
              path: item.points,
              strokeColor: "#FF33FF",
              strokeWeight: 6,
              strokeOpacity: 0.2,
              fillOpacity: 0.4,
              fillColor: "#1791fc",
              zIndex: 50,
            }));
            that.map.setFitView();
          })
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },
  }
};
</script>

<style scoped>
#map_container {
  width: 100%;
  height: 100vh;
}
.ebox {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1000; /* 确保按钮在地图之上 */
}
</style>
