<template>
  <div>
    <baidu-map v-bind:style="mapStyle" class="bm-view" :ak="akey"
               :center="center"
               :zoom="zoom"
               :scroll-wheel-zoom="true"
               @click="getClickInfo"
               @moving="syncCenterAndZoom"
               @moveend="syncCenterAndZoom"
               @zoomend="syncCenterAndZoom">
      <bm-view style="width: 100%; height:100vh;"></bm-view>
      <bm-marker :position="{lng: center.lng, lat: center.lat}" :dragging="true" animation="BMAP_ANIMATION_BOUNCE"></bm-marker>
      <bm-control :offset="{width: '10px', height: '10px'}">
        <bm-auto-complete :sugStyle="{zIndex: 999999}">
          <input type="text" v-model="address" placeholder="请输入搜索关键字" class="serachinput">
        </bm-auto-complete>
      </bm-control>
      <bm-local-search :keyword="address" :auto-viewport="true" style="width:0px;height:0px;overflow: hidden;"></bm-local-search>
    </baidu-map>
    <div slot="footer" class="footer">
      <van-button plain type="info" @click="cancel" class="nt-info nt-btn-bottom">取消</van-button>
      <van-button type="info" class="nt-primary nt-btn-bottom" @click="confirm">确定位置</van-button>
    </div>
  </div>
</template>
<script>
import { BaiduMap, BmControl, BmView, BmAutoComplete, BmLocalSearch, BmMarker } from 'vue-baidu-map'
export default {
  name: 'MapPoint',
  components: {
    BaiduMap,
    BmControl,
    BmView,
    BmAutoComplete,
    BmLocalSearch,
    BmMarker
  },
  data: function () {
    return {
      address: this.addressKey,
      showMapComponent: this.value,
      mapStyle: {
        width: '100%',
        height: this.mapHeight + 'px'
      },
      center: { lng: 116.404, lat: 39.915 },
      zoom: 15
    }
  },
  watch: {},
  props: {
    addressKey: {
      type: String,
      default: ''
    },
    value: {
      type: Boolean
    },
    mapHeight: {
      type: Number,
      default: 280
    },
    akey: {
      type: String,
      default: 'dfhycORtYDMz78dNLo9oNiDO1ufI2TZS'
    }
  },
  methods: {
    /***
     * 地图点击事件。
     */
    getClickInfo (e) {
      this.center.lng = e.point.lng
      this.center.lat = e.point.lat
    },
    syncCenterAndZoom (e) {
      const { lng, lat } = e.target.getCenter()
      this.center.lng = lng
      this.center.lat = lat
      this.zoom = e.target.getZoom()
    },
    /** *确认 */
    confirm: function () {
      this.showMapComponent = false
      this.$emit('confirm', this.center)
    },
    /** *取消 */
    cancel: function () {
      this.showMapComponent = false
      this.$emit('cancel', this.showMapComponent)
    }
  }
}
</script>

<style lang="scss" scoped>
.serachinput{
  width: 375px;
  box-sizing: border-box;
  padding: 9px;
  border: 1px solid #dddee1;
  line-height: 12px;
  font-size: 12px;
  height: 40px;
  color: #333;
  outline-width: 0;
  outline-color: rgba(0, 0, 0, 0);
  position: relative;
  border-radius: 4px;
  -webkit-box-shadow: #666 0px 0px 10px;
  -moz-box-shadow: #666 0px 0px 10px;
  box-shadow: #666 0px 0px 10px;
}
.footer {
  position: absolute;
  padding-top: 10px;
  text-align: right;
  bottom: 30px;
  left: 50%;
  margin-left: -160px;
  .nt-btn-bottom {
    width: 150px;
    height: 35px;
    margin-left: 10px;
  }
}
</style>
