<template>
    <div>
      <baidu-map v-bind:style="mapStyle" class="bm-view" 
      ak="L5Qw0GlbbCIMwgR4Uug3ogM40Imkd3CV" 
      :center="center" :zoom="zoom" :scroll-wheel-zoom="true"
        @click="getClickInfo" @moving="syncCenterAndZoom" @moveend="syncCenterAndZoom" @zoomend="syncCenterAndZoom">
        <bm-view style="width: 100%; height:400px;"></bm-view>
        <bm-marker :position="{lng: center.lng, lat: center.lat}"
        :dragging="true"
        animation="BMAP_ANIMATION_BOUNCE">
          <bm-label v-if="radius>0" content="接送点范围" :position="center" :labelStyle="{color: 'red', fontSize : '16px','border':'0px','margin-top':'20px'}" title="Hover me"/>
        </bm-marker>
        <bm-control :offset="{width: '10px', height: '10px'}">
            <bm-auto-complete v-model="keyword" :sugStyle="{zIndex: 999999}">
                <input v-model="keyword" type="text" placeholder="请输入搜索关键字" class="serachinput">
            </bm-auto-complete>
            <button class="normalBtn" type="primary" @click="determineLngLat">
              确定
            </button>
        </bm-control>    
        <bm-local-search v-if="radius>0" :keyword="keyword" :nearby="nearby" :auto-viewport="true" :panel="false"
         style="width:0px;height:0px;overflow: hidden;"></bm-local-search>
        <bm-local-search v-else :keyword="keyword" :auto-viewport="true" :panel="false"
         style="width:0px;height:0px;overflow: hidden;"></bm-local-search>
         <template v-show="radius>0">
          <bm-circle :center="center" :radius="radius" stroke-color="red" :stroke-opacity="0.8" :stroke-weight="0.5"></bm-circle>
         </template>
      </baidu-map>
    </div>
  </template>
  
  <script>
    import {BaiduMap, BmControl, 
  BmView, BmAutoComplete,
   BmLocalSearch, BmMarker,BmPolygon,BmCircle,BmLabel} from 'vue-baidu-map'
  export default {
    props: ["Address", "type", "index","GetOff"],
    components: {
      BaiduMap,
      BmControl,
      BmView,
      BmAutoComplete,
      BmLocalSearch,
      BmMarker,
      BmPolygon,
      BmCircle,
      BmLabel
    },
    data() {
      return {
        radius:0,
        keyword: '',
        mapStyle: {
          width: '100%',
          height: '100%'
        },
        center: {lng: 116.404, lat: 39.915},
        newCenter: {lng: '', lat: ''},
        zoom: 20,
        nearby: {
          center: {
            lng: 116.404, 
            lat: 39.915
          },
          radius: 0
        }
      }
    },
    watch: {
      Address: {
        handler(newValue,onldValue) {
          this.keyword = newValue
        },
        deep:true,
        immediate: true
      },
      GetOff: {
        handler(newValue,onldValue) {
          if(this.GetOff){
            this.center.lng = this.GetOff.Lng
            this.center.lat = this.GetOff.Lat
            if(this.GetOff.Range){
              this.radius = this.GetOff.Range
            }
          }
          this.nearby = {
            center: {
              lng:this.center.lng, 
              lat:this.center.lat
            },
            radius: this.radius
          }
        },
        deep:true,
        immediate: true
      },
    },
    mounted() {
      if(this.GetOff){
        this.center.lng = this.GetOff.Lng
        this.center.lat = this.GetOff.Lat
        if(this.GetOff.Range){
          this.radius = this.GetOff.Range
        }
      }
      this.keyword = this.Address
      this.nearby = {
        center: {
          lng:this.center.lng, 
          lat:this.center.lat
        },
        radius: this.radius
      }
    },
    methods: {
      getClickInfo (e) {
        let that= this
        var gc = new BMap.Geocoder();
        gc.getLocation(e.point, function (rs) {
          if(rs.addressComponents){
            var addComp = rs.addressComponents;
            let address_detail = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber
            that.keyword = address_detail
          }
        })
        this.center.lng = e.point.lng
        this.center.lat = e.point.lat
        this.newCenter.lng = e.point.lng
        this.newCenter.lat = e.point.lat
      },
      syncCenterAndZoom (e) {
        if(this.GetOff) return
        const {lng, lat} = e.target.getCenter()
        this.center.lng = lng
        this.center.lat = lat
        this.newCenter.lng = lng
        this.newCenter.lat = lat
        this.zoom = e.target.getZoom()
      },
      // 经纬度
      determineLngLat(){
        if(this.newCenter.lng){
          this.$emit("headCallBack", this.newCenter, this.type, this.index, this.keyword);
          this.$emit("refList");
          this.newCenter = {lng: '', lat: ''}
        }else{
          this.Error("请搜索并选择您需要的地址");
        }
      },
    }
  }
  </script>
  
  <style scoped>
  .serachinput{
    margin-left: 10px;
    margin-top: 10px;
    width: 350px;
    height: 30px;
    margin-right: 10px;
  }
  </style>