<template>
  <div>
    <el-autocomplete v-model="faNode[nodeKey]" v-bind="$attrs" v-on="$listeners" :disabled='disabled' :fetch-suggestions="querySearch" :placeholder="placeholder" style="width: 100%" :trigger-on-focus="false" @select="handleSelect" />
    <div style="margin: 5px">
      <baidu-map :center="mapCenter" :zoom="mapZoom" :scroll-wheel-zoom="true" ak="baidu-ak" @ready="handlerBMap">
        <bm-view  class="bm-view"></bm-view>
        <!-- <bm-control :offset="{width: '10px', height: '10px'}">
          <bm-auto-complete v-model="faNode[nodeKey]" :sugStyle="{zIndex: 1}"> -->
            <!-- <search-field placeholder="请输入地名关键字"></search-field> 这里指代一个自定义搜索框组件 -->
            <!-- <el-input placeholder="请输入地名关键字" v-model="faNode[nodeKey]"></el-input>
          </bm-auto-complete>
        </bm-control> -->
        <!-- <bm-local-search :keyword="faNode[nodeKey]" :auto-viewport="true"></bm-local-search> -->
      </baidu-map>
    </div>
  </div>

</template>

<script>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
import bmView from 'vue-baidu-map/components/map/MapView.vue'
import bmControl from 'vue-baidu-map/components/controls/Control.vue'
import bmAutoComplete from 'vue-baidu-map/components/others/AutoComplete.vue'
import bmLocalSearch from 'vue-baidu-map/components/search/LocalSearch.vue'

export default {
  name: "mgMap",
  components: {
    BaiduMap,
    bmView,
    bmAutoComplete,
    bmLocalSearch,
    bmControl
  },
  props: {
    item: {
      type: Object,
      required: true
    },
    faNode: {
      type: Object,
      required: true
    },
    nodeKey: {
      type: String,
      required: true
    },
    disabled: {
      type: Boolean,
      default: false
    },

    placeholder: {
      type: String,
      default() {
        return `请输入${this.item.label}`;
      }
    }
  },
  data() {
    return {
      keyword: "",
      mapZoom: 15,
      mapCenter: { lng: 0, lat: 0 },
      mapLocation: {
        address: undefined,
        coordinate: undefined
      }
    };
  },
  mounted() {

  },
  methods: {
    handlerBMap({ BMap, map }) {
      this.BMap = BMap
      this.map = map
      if (this.mapLocation.coordinate && this.mapLocation.coordinate.lng) {
        this.mapCenter.lng = this.mapLocation.coordinate.lng
        this.mapCenter.lat = this.mapLocation.coordinate.lat
        this.mapZoom = 18
        map.addOverlay(new this.BMap.Marker(this.mapLocation.coordinate))
      } else if (this.faNode[this.nodeKey]) {
        this.mapZoom = 18
        this.querySearch(this.faNode[this.nodeKey])
      } else {
        this.mapCenter.lng = 119.687441
        this.mapCenter.lat = 29.134988
        this.mapZoom = 18
      }
    },

    querySearch(queryString, cb) {
      var that = this
      var myGeo = new this.BMap.Geocoder()
      myGeo.getPoint(queryString, function (point) {
        if (point) {
          that.mapLocation.coordinate = point
          that.makerCenter(point)
        } else {
          that.mapLocation.coordinate = null
        }
      }, this.locationCity)
      var options = {
        onSearchComplete: function (results) {
          if (local.getStatus() === 0) {
            // 判断状态是否正确
            var s = []
            for (var i = 0; i < results.getCurrentNumPois(); i++) {
              var x = results.getPoi(i)
              var item = { city: x.province + x.city, value: x.address + x.title, point: x.point }
              s.push(item)
              cb && cb(s)
            }
          } else {
            cb && cb()
          }
        }
      }
      var local = new this.BMap.LocalSearch(this.map, options)
      local.search(queryString)
    },
    handleSelect(item) {
      var { point } = item
      this.mapLocation.coordinate = point
      if (this.item.city) {
        this.faNode[this.item.city] = item.city
      }
      this.makerCenter(point)
    },
    makerCenter(point) {
      if (this.map) {
        this.map.clearOverlays()
        this.map.addOverlay(new this.BMap.Marker(point))
        this.mapCenter.lng = point.lng
        this.mapCenter.lat = point.lat
        if (this.item.lng && this.item.lat) {
          this.faNode[this.item.lng] = point.lng
          this.faNode[this.item.lat] = point.lat
        }
        this.mapZoom = 15
      }
    }
  }
};
</script>
<style lang="less" scoped>
.bm-view {
  width: 100%;
  height: 500px;
}
</style>>

