<template>
  <div>
    <div class="form-layer">
      <!--      <el-form label-width="100px" size="mini">-->
      <!--        <el-form-item label="当前纬度">-->
      <!--          <p>{{ latitude }}</p>-->
      <!--        </el-form-item>-->
      <!--        <el-form-item label="当前经度">-->
      <!--          <p>{{ longitude }}</p>-->
      <!--        </el-form-item>-->
      <!--        <el-form-item>-->
      <!--          <div class="f-a-c">-->
      <!--            <el-input-->
      <!--              v-model="keyWords"-->
      <!--              placeholder="请输入地区"-->
      <!--              style="width: 230px; margin-right: 6px"-->
      <!--            ></el-input>-->
      <!--            <el-button type="primary" @click="setPlace" :disabled="!keyWords">-->
      <!--              查询-->
      <!--            </el-button>-->
      <!--          </div>-->
      <!--        </el-form-item>-->
      <!--      </el-form>-->
      <div id="map"></div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'BdMap',
  emits: ['getLatAndLng'],
  data() {
    return {
      map: null,
      local: null,
      mk: null,
      keyWords: '',
      longitude: '',
      latitude: '',
    };
  },
  created() {
    if (this.longitude == '' || this.latitude == '') {
      this.initMap();
    }
  },
  methods: {
    initMap() {
      this.$nextTick(() => {
        this.map = new BMap.Map('map');
        const longitude = this.longitude == '' ? '118.802' : this.longitude;
        const latitude = this.latitude == '' ? '32.064' : this.latitude;
        const point = new BMap.Point(longitude, latitude);
        this.map.centerAndZoom(point, 18);
        this.map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
        this.map.addControl(new window.BMap.NavigationControl());
        if (longitude != '118.802' && latitude != '32.064') {
          this.handleMarker(this, point);
        } else {
          console.log('longitude=' + longitude);
          console.log('latitude=' + latitude);
          this.fixedPos();
        }
      });
    },
    showMap(row) {
      this.latitude = row.latitude;
      this.longitude = row.longitude;
      this.initMap();
    },
    // 点击定位-定位到当前位置
    fixedPos() {
      const _this = this;
      const geolocation = new BMap.Geolocation();
      this.confirmLoading = true;
      geolocation.getCurrentPosition(function (r) {
        if (this.getStatus() == window.BMAP_STATUS_SUCCESS) {
          _this.handleMarker(_this, r.point);
          _this.addListener(_this);
          const myGeo = new BMap.Geocoder();
          myGeo.getLocation(
            // new BMap.Point(r.point.lng, r.point.lat),
            function (result) {
              _this.confirmLoading = false;
              if (result) {
                _this.$emit('tellFatherName', result.point);
              }
            }
          );
        } else {
          _this.$message.error('failed' + this.getStatus());
        }
      });
    },
    // 搜索地址
    setPlace(data) {
      this.keyWords = data;
      this.local = new BMap.LocalSearch(this.map, {
        onSearchComplete: this.searchPlace,
      });
      this.local.search(this.keyWords);
    },
    searchPlace() {
      if (this.local.getResults() != undefined) {
        this.map.clearOverlays(); //清除地图上所有覆盖物
        if (this.local.getResults().getPoi(0)) {
          const point = this.local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
          this.map.centerAndZoom(point, 18);
          this.handleMarker(this, point);
          this.addListener(this, point);
          console.log('经度：' + point.lng + '--' + '纬度' + point.lat);
          this.$emit('tellFatherName', point);
        } else {
          this.$message.error('未匹配到地点!');
        }
      } else {
        this.$message.error('未找到搜索结果!');
      }
    },
    // 设置标注
    handleMarker(obj, point) {
      const that = this;
      obj.mk = new BMap.Marker(point);
      obj.map.addOverlay(obj.mk);
      obj.mk.enableDragging(); // 可拖拽
      obj.map.addEventListener('dragend', function (e) {
        // 监听标注的拖拽，获取拖拽后的经纬度
        that.$emit('tellFatherName', e.point);
      });
      obj.map.panTo(point);
    },
    addListener(obj) {
      const that = this;
      obj.map.addEventListener('click', function (e) {
        // 监听标注的拖拽，获取拖拽后的经纬度
        that.$emit('tellFatherName', e.point);
        that.map.clearOverlays();
        that.handleMarker(that, e.point);
      });
    },
  },
};
</script>
<style scoped>
.form-layer {
  width: 100%;
}
#map {
  margin-top: 30px;
  width: 1200px;
  height: 500px;
  border: 1px solid gray;
  box-sizing: border-box;
  overflow: hidden;
  margin-left: 100px;
}
/deep/ .el-dialog {
  min-width: 550px;
}
/deep/ .el-dialog__body {
  padding: 10px;
}
</style>
