<template>
  <div>
    <el-amap-search-box class="search-box" :search-option="mapSearchOption" :on-search-result="onSearchPoiResult"></el-amap-search-box>
    <el-amap vid="marker" :zoom="poiMapMarker.zoom" :center="poiMapMarker.position" :plugin="mapPlugin" :events="events" class="map">
      <el-amap-marker
          vid="poi-marker"
          :position="poiMapMarker.position"
          :events="poiMapMarker.events"
          :draggable="poiMapMarker.draggable"/>
    </el-amap>
  </div>
</template>

<script>
export default {
  name: "AMapPosition",
  props: {
    position: undefined,
  },
  data() {
    return {
      geocoder: undefined, // 编码器
      // 地图标点
      poiMapMarker: {
        position: [116.3975, 39.9092],
        events: {
          dragend: e => {
            console.log(this)
            this.poiMapMarker.position = [e.lnglat.lng, e.lnglat.lat];
            this.getAddress(e.lnglat.lng, e.lnglat.lat);
          }
        },
        draggable: true,
        zoom:14,
      },
      // 地图插件
      mapPlugin: [
        // {
        //     pName: 'ToolBar',
        //     events: {
        //         init(instance) {
        //             console.log(instance);
        //         }
        //     }
        // },
        {
          pName: 'Geolocation', // 定位
          enableHighAccuracy: true,// 是否使用高精度定位，默认:true
          timeout: 30000,          // 超过10秒后停止定位，默认：无穷大
          noIpLocate: 0,           // 禁止使用Ip定位
          maximumAge: 0,           // 定位结果缓存0毫秒，默认：0
          convert: true,           // 自动偏移坐标，偏移后的坐标为高德坐标，默认：true
          showButton: false,       // 显示定位按钮，默认：true
          buttonPosition: 'LB',    // 定位按钮停靠位置，默认：'LB'，左下角
          showMarker: true,        // 定位成功后在定位到的位置显示点标记，默认：true
          showCircle: true,        // 定位成功后用圆圈表示定位精度范围，默认：true
          panToLocation: true,     // 定位成功后将定位到的位置作为地图中心点，默认：true
          zoomToAccuracy: true,    // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
          extensions: 'all',
          events: {
            init: (instance) => {
              instance.getCurrentPosition((status, result) => {
                console.log(result);
                if (result && result.position && result.status) {
                  this.poiMapMarker.position = [result.position.lng, result.position.lat];
                  console.log(result.formattedAddress);
                } else {
                  this.$message("定位失败，请检查位置权限");
                }
              })
            },
            click(e) {
              console.log(e);
            }
          }
        },
        {
          pName: 'Geocoder', // 编码
          events: {
            init: (instance) => {
              this.geocoder = instance;
            }
          }
        }],
      // 搜索选项
      mapSearchOption: {
        city: "全国",
        citylimit: false
      },
      // 地图事件
      events: {
        init: (instance) => {
          console.log(instance);
        },
        // 点击获取地址的数据
        click: (e) => {
          this.poiMapMarker.position = [e.lnglat.lng, e.lnglat.lat];
          this.getAddress(e.lnglat.lng, e.lnglat.lat);
        }
      }
    }
  },


  watch: {
    position(value) {
      if (value && value[0] && value[1]) {
        this.poiMapMarker.position = value;
      }
    }
  },

  methods: {
    // 搜索结果处理
    onSearchPoiResult(pois) {
      let latSum = 0;
      let lngSum = 0;
      if (pois.length > 0) {
        pois.forEach(poi => {
          let {lng, lat} = poi;
          lngSum += lng;
          latSum += lat;
        });
        let center = {
          lng: lngSum / pois.length,
          lat: latSum / pois.length
        };
        this.poiMapMarker.position = [center.lng, center.lat];
        this.getAddress(center.lng, center.lat);
      }
    },

    // 根据经纬度获取地址
    getAddress(lng, lat) {
      if (this.geocoder) {
        this.geocoder.getAddress([lng, lat], (status, result) => {
          console.log(result);
          if (status === 'complete' && result.info === 'OK') {
            if (result && result.regeocode) {
              console.log(result.regeocode.formattedAddress);
              this.$emit("position", {lng, lat, address: result.regeocode.formattedAddress})
            }
          }
        })
      } else {
        this.$message("地图初始化中，请稍后");
      }
    },
  }
}
</script>

<style scoped lang="scss">
.search-box {
  z-index: 10;
  margin-bottom: 20px;
  left: 0;
  top: 0;
  position: absolute;
}

.map {
  height: 400px;
  width: 800px;
}
</style>
