<template>
  <div>
    <!-- 地图容器 -->
    <div id="map-container" style="width: 100%; height: 1300px;"></div>

    <!-- 工具栏 -->
    <el-row type="flex" justify="end" class="m_tools">
      <el-col style="width: auto;">
        <el-button-group size="small">
          <el-button
            type="default"
            title="绘制围栏"
            size="small"
            v-if="tools_show.place_show"
            v-show="!tools_show.oc_show"
            icon="el-icon-edit"
            @click="drawFence"
          ></el-button>
          <el-button
            type="default"
            title="保存围栏"
            size="small"
            v-if="tools_show.place_show"
            v-show="!tools_show.oc_show"
            icon="el-icon-check"
            @click="saveRectangle"
          ></el-button>
          <el-button
            type="default"
            title="清除"
            size="small"
            v-if="tools_show.place_show"
            v-show="!tools_show.oc_show"
            icon="el-icon-delete"
            @click="clearMap"
          ></el-button>
          <el-button
            type="default"
            title="展开/收起"
            size="small"
            v-if="tools_show.openclose_show"
            :icon="tools_show.oc_show ? 'el-icon-d-arrow-left' : 'el-icon-d-arrow-right'"
            @click="tools_show.oc_show = !tools_show.oc_show"
          ></el-button>
        </el-button-group>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "Map",
  data() {
    return {
      map: null,
      mouseTool: null,
      polygon: null,
      paths: [],
      tools_show: {
        place_show: true,
        openclose_show: true,
        oc_show: false,
      },
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    // 初始化地图
    initMap() {
      // 动态加载高德地图 SDK
      const script = document.createElement("script");
      script.src =
        "https://webapi.amap.com/maps?v=1.4.15&key=bee95ab1796ad6803492c1bf9da311ab";
      script.onload = () => {
        this.map = new AMap.Map("map-container", {
          zoom: 12,
          center: [116.404269, 39.916042],
        });

        // 添加插件
        AMap.plugin(["AMap.MouseTool"], () => {
          this.mouseTool = new AMap.MouseTool(this.map);
        });
      };
      document.head.appendChild(script);
    },

    // 绘制多边形
    drawFence() {
      if (this.polygon) {
        this.map.remove(this.polygon);
      }

      this.mouseTool.polygon({
        strokeColor: "red",
        strokeOpacity: 0.4,
        strokeWeight: 2,
        fillColor: "#1791fc",
        fillOpacity: 0.2,
      });

      this.mouseTool.on("draw", (event) => {
        this.polygon = event.obj;
        this.paths = this.polygon.getPath().map((point) => [point.lng, point.lat]);
        console.log("绘制完成的路径:", this.paths);
      });
    },

    // 保存围栏
    saveRectangle() {
      if (!this.paths.length) {
        this.$message.warning("请先绘制围栏！");
        return;
      }

      const polygonStr = this.paths
        .map((point) => point.join(" "))
        .join(",");
      const result = `POLYGON((${polygonStr}))`;
      console.log("保存的围栏数据:", result);

      // 发送请求保存围栏（示例）
      const id = this.$route.params.fenceId;
      const fencePolygon = { fenceId: id, fencePolygon: result };
      console.log("围栏对象:", fencePolygon);
    },

    // 清除地图
    clearMap() {
      if (this.polygon) {
        this.map.remove(this.polygon);
        this.polygon = null;
        this.paths = [];
      }
    },
  },
};
</script>

<style scoped>
.m_tools {
  position: absolute;
  z-index: 999;
  left: 85%;
  top: 1px;
  width: auto;
  color: #409eff;
  overflow: hidden;
}
</style>