<template>
  <el-dialog
    title="拾取经纬度"
    append-to-body
    :visible.sync="dialogVisible"
    width="50%"
  >
    <div class="coordinateMap">
      <div class="coordinateMap_input">
        <el-form ref="form" :disabled="true" label-width="80px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="经度">
                <el-input
                  v-model="lng"
                  placeholder="点击地图获取"
                  @change="lnglatChange"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="纬度">
                <el-input
                  v-model="lat"
                  placeholder="点击地图获取"
                  @change="lnglatChange"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div id="container" class="map" style="width: 100%"></div>
    </div>
  </el-dialog>
</template>
<script>
var map;
var geocoder;
export default {
  props: {
    lnglat: Object
  },
  data() {
    return {
      dialogVisible: false,
      form: null,
      address: "",
      lastDot: "",
      marker: null,
      lng: "",
      lat: "",
    };
  },
  watch: {
    dialogVisible(curVal, oldVal) {
      if (curVal == true) {
        this.$nextTick(() => {
          this.initMap();
          //监听用户的点击事件
          map.on("click", (e) => {
            this.lng = e.lnglat.getLng();
            this.lat = e.lnglat.getLat();
            this.addDot();
          });
        });
      }
    },
    lnglat(curVal, oldVal) {
      this.form = curVal
      //console.log('curVal', curVal)
    }
  },
  created(){

  },
  mounted() {},
  methods: {
    initMap() {
      map = new AMap.Map("container", {
        resizeEnable: true, //是否监控地图容器尺寸变化
        zoom: 11, //初始化地图层级
        // center: [116.46, 39.92], //初始化地图中心点
      });


      // geocoder = new AMap.Geocoder({});
      // geocoder.getAddress(this.address, function (status, result) {
      //   if (status === "complete" && result.geocodes.length) {
      //     var lnglat = result.geocodes[0].location;
      //     console.log("lnglat", result);
      //   }
      // });

      AMap.plugin("AMap.Geolocation", function () {
        var geolocation = new AMap.Geolocation({
          enableHighAccuracy: true, //是否使用高精度定位，默认:true
          timeout: 10000, //超过10秒后停止定位，默认：5s
          buttonPosition: "RB", //定位按钮的停靠位置
          buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
          zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点
        });
        map.addControl(geolocation);
        geolocation.getCurrentPosition(function (status, result) {
          if (status == "complete") {
            console.log("获取成功")
          } else {
            console.log("获取失败")
          }
        });
      });

    },
    lnglatChange() {
      this.addDot();
      //自适应中心点
      map.setFitView();
    },
    //增加点标记
    addDot() {
      if (this.marker) {
        this.marker.setMap(null);
        this.marker = null;
      }
      this.marker = new AMap.Marker({
        position: new AMap.LngLat(this.lng, this.lat),
      });
      let lnglat = {};
      lnglat.lng = Number(this.lng);
      lnglat.lat = Number(this.lat);
      //console.log(lnglat)
      this.$emit("giveLnglat", lnglat);
      map.add(this.marker);
    },
    show() {
      this.dialogVisible = true;
    },
    dismiss() {
      this.dialogVisible = false;
    },
  },
};
</script>
<style scoped>
.coordinateMap {
}
.coordinateMap_input {
  display: flex;
  margin-bottom: 15px;
}
.map {
  width: 100%;
  height: 300px;
  border-radius: 6px;
}
</style>