<template>
  <!-- <el-select v-model="keywords" filterable remote reserve-keyword placeholder="请输入地址" :remote-method="remoteMethod"
          :loading="loading" :clearable="true" size="mini" @change="currentSelect" style="width: 400px">
          <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item" class="one-text">
            <span style="float: left">{{ item.name }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">{{
              item.district
            }}</span>
          </el-option>
        </el-select> -->
  <!-- <el-button type="primary"  @click="searchForm(1)">
            绘制点</el-button>
            <el-button type="primary"  @click="searchForm(2)">
            清除点</el-button>
            <el-button type="primary"  @click="searchForm(2)">
            绘制面</el-button>
            <el-button type="primary"   @click="searchForm(3)">
            导入</el-button> -->

  <div class="input-card" style="width: 120px">
    <button class="btn" onclick="createPolygon" style="margin-bottom: 5px">
      新建
    </button>
    <button class="btn" onclick="polyEditor.open()" style="margin-bottom: 5px">
      开始编辑
    </button>
    <button class="btn" onclick="polyEditor.close()">结束编辑</button>
  </div>
  <div id="container" class="container"></div>
  <!-- <div class="info-box">
      纬度：{{ form.lat }}
      <br />
      经度：{{ form.lng }}
      <br />
      详细地址：{{ form.address }}
    </div> -->
  <!-- <div style="padding: 10px;text-align: center;">
      <el-button type="primary" @click="setMapMarkerC">确定</el-button>
    </div> -->
</template>

<script>
import bus from "@/bus";
import AMapLoader from "@amap/amap-jsapi-loader";
// import GaoDeMapUtils from './index.js';
window._AMapSecurityConfig = {
  // 安全密钥
  securityJsCode: "9e8b587057477eb91f455d4c0af6db63",
};
export default {
  name: "TestIndex",
  data() {
    return {
      // 地图实例
      gaode: "",
      map: null,
      // 标记点
      marker: "",
      // 地址逆解析
      geoCoder: null,
      // 搜索提示
      AutoComplete: null,
      // 搜索关键字
      keywords: "",
      // 位置信息
      form: {
        lng: "",
        lat: "",
        address: "",
        adcode: "", //地区编码
      },
      // 搜索节流阀
      loading: false,
      // 搜索提示信息
      options: [],
      polyEditor:null,
    };
  },
  methods: {
    // 绘制点
    searchForm(v) {
      switch (v) {
        case 1:
          break;
        case 2:
          this.removeMarker();
          break;
        default:
          break;
      }
    },
    initMap() {
      AMapLoader.load({
        // 你申请的Key
        key: "9b9c04d2714e93c08fd240ad35d0f20a",
        version: "2.0",
        // 需要用到的插件
        plugins: ["AMap.Geocoder", "AMap.AutoComplete"],
      })
        .then((AMap) => {
          this.map = new AMap.Map("container", {
            viewMode: "3D", //是否为3D地图模式
            zoom: 10, //初始化地图级别
            center: [107.4, 33.42], //初始化地图中心点位置
          });
          var 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],
          ];
          var path2 = [
            [116.474595, 40.001321],
            [116.473526, 39.999865],
            [116.476284, 40.000917],
          ];
          var polygon1 = new AMap.Polygon({
            path: path1,
          });
          var polygon2 = new AMap.Polygon({
            path: path2,
          });
          this.map.add([polygon1, polygon2]);
          this.map.setFitView();
          
          this.polyEditor = new AMap.PolygonEditor(this.map);
          this.polyEditor.addAdsorbPolygons([polygon1, polygon2]);
          this.polyEditor.on("add", function (data) {
            var polygon = data.target;
            this. polyEditor.addAdsorbPolygons(polygon);
            polygon.on("dblclick", () => {
              this.polyEditor.setTarget(polygon);
              this.polyEditor.open();
            });
          });
          polygon1.on("dblclick", () => {
            this.polyEditor.setTarget(polygon1);
            this.polyEditor.open();
          });
          polygon2.on("dblclick", () => {
            this.polyEditor.setTarget(polygon2);
            this.polyEditor.open();
          });
          this.polyEditor.setTarget(polygon2);
          this.polyEditor.open();
          //地址逆解析插件
          this.geoCoder = new AMap.Geocoder({
            city: "010", //城市设为北京，默认：“全国”
            radius: 1000, //范围，默认：500
          });
          // 搜索提示插件
          this.AutoComplete = new AMap.AutoComplete({ city: "全国" });
          //点击获取经纬度;
          this.map.on("click", (e) => {
            // 获取经纬度
            this.form.lng = e.lnglat.lng;
            this.form.lat = e.lnglat.lat;
            // 清除点
            this.removeMarker();
            // 标记点
            this.setMapMarker();
          });
        })
        .catch((err) => {
          // 错误
          console.log(err);
        });
    },
    setMapMarkerC() {
      bus.emit("mapPointClick", this.form);
    },
    // 标记点
    setMapMarker() {
      console.log(this.form, 99);
      // 自动适应显示想显示的范围区域
      this.map.setFitView();
      this.marker = new AMap.Marker({
        map: this.map,
        position: [this.form.lng, this.form.lat],
      });
      // 逆解析地址
      this.toGeoCoder();
      this.map.setFitView();
      this.map.add(this.marker);
    },
    // 清除点
    removeMarker() {
      if (this.marker) {
        this.map.remove(this.marker);
      }
    },
    // 逆解析地址
    toGeoCoder() {
      let lnglat = [this.form.lng, this.form.lat];
      this.geoCoder.getAddress(lnglat, (status, result) => {
        if (status === "complete" && result.regeocode) {
          this.form.address = result.regeocode.formattedAddress;
        }
      });
    },
    // 搜索
    remoteMethod(query) {
      console.log(query);
      if (query !== "") {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.AutoComplete.search(query, (status, result) => {
            this.options = result.tips;
          });
        }, 200);
      } else {
        this.options = [];
      }
    },
    // 选中提示
    currentSelect(val) {
      // 清空时不执行后面代码
      if (!val) {
        return;
      }
      this.form = {
        lng: val.location.lng,
        lat: val.location.lat,
        address: val.district + val.address,
        adcode: val.adcode,
      };
      // 清除点
      this.removeMarker();
      // 标记点
      this.setMapMarker();
    },
    createPolygon() {
      this.polyEditor.close();
      this.polyEditor.setTarget();
      this.polyEditor.open();
    },
  },
  mounted() {
    this.initMap();
  },
};
</script>

<style>
.container {
  width: 100%;
  height: 350px;
}
</style>