<template>
  <div class="container">
    <div id="container"></div>
  </div>
</template>

<script>
  import AMapLoader from "@amap/amap-jsapi-loader";
  var polyEditor = "";

  export default {
    name: "Map",
    data() {
      return {
        map: null,
        // polyEditor: null,
        coordList: "",
        timer: "",
      };
    },
    props: ["pathList", "dataId"],
    mounted() {
      this.echart();
      console.log("添加");
    },
    methods: {
      start() {
        this.timer = setInterval(this.echart, 1000); // 注意: 第一个参数为方法名的时候不要加括号;
      },
      async echart() {
        clearInterval(this.timer);
        console.log("接收参数", this.pathList);
        // console.log(typeof JSON.parse(this.pathList));
        await AMapLoader.load({
          key: "9a48843dd0ab33ca198ee67930cb124d", // 申请好的Web端开发者Key，首次调用 load 时必填
          version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
          plugins: [
            "AMap.ToolBar",
            "AMap.Driving",
            "AMap.PolygonEditor",
            "AMap.PlaceSearch",
          ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        }).then((AMap) => {
            this.map = new AMap.Map("container", {
              //设置地图容器id
              viewMode: "3D", //是否为3D地图模式
              zoom: 18, //初始化地图级别
              center: [120.356031,26.94088], //初始化地图中心点位置--大嵛山岛
            });
            this.map.setFitView();
          })
          .catch((e) => {
            console.log(e);
          });
        // this.initEditor();

      },
      // initEditor() {
      //   var path1 = []
      //   if (this.dataId) {
      //     path1 = JSON.parse(this.pathList) || [];
      //
      //   }
      //
      //   var polygon1 = new AMap.Polygon({
      //     path: path1,
      //   });
      //   this.map.add([polygon1]);
      //   polyEditor = new AMap.PolygonEditor(this.map);
      //   console.log(polyEditor);
      //   console.dir(polyEditor);
      //   polyEditor.on("add", (data) => {
      //     console.log(data);
      //     this.coordList = data.lnglat;
      //     var polygon = data.target;
      //     polygon.on("dblclick", () => {
      //       polyEditor.setTarget(polygon);
      //       polyEditor.open();
      //     });
      //   });
      //   polygon1.on("dblclick", () => {
      //     polyEditor.setTarget(polygon1);
      //     polyEditor.open();
      //   });
      //
      //   return polyEditor;
      // },
    },
    beforeDestroy() {
      clearInterval(this.timer);
    }
  };
</script>

<style lang="scss"  scoped>
  #container {
    width: 100%;
    height: 500px;
  }

  .container {
    position: relative;
    border: 1px solid rgb(204, 204, 204);

    .input-card {
      position: absolute;
      bottom: 15px;
      right: 15px;
    }
  }
</style>
