<template>
  <div class="app-amap-search-point">
    <el-autocomplete v-show="isSearch" v-model="mapInput" style="width: 100%;" :fetch-suggestions="querySearch" placeholder="请输入地址搜素" prefix-icon="el-icon-search" @select="handleSelect">
      <template slot-scope="{ item }">
        <div style="text-overflow: ellipsis; overflow: hidden;">{{ item.name }}</div>
        <span style="font-size: 12px; color: #b4b4b4;">{{ item.district }}</span>
      </template>
    </el-autocomplete>
    <div id="amap_search_point_container" :style="{padding: 0,margin: 0,width: '100%',height: mapHeight}" />
  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader'

export default {
  name: 'AMapSearchPoint',
  props: {
    mapHeight: {
      type: String,
      default: () => { return '400px' }
    },
    isSearch: {
      type: Boolean,
      default: () => { return true }
    },
    point: {
      type: Array,
      default: () => { return null }
    }
  },
  data() {
    return {
      mapInput: '',
      lnglat: null,
      mapMarker: null
    }
  },
  computed: {},
  watch: {
    mapMarker(newValue, oldValue) {
      if (oldValue) {
        this.map.remove(oldValue)
      }
      if (newValue) {
        this.map.add(newValue)
      }
    },
    point() {
      if (this.map) {
        this.markPoint(this.point)
        this.point && this.map.panTo(this.point)
      }
    }
  },
  created() {
    this.initMap()
  },
  methods: {
    // 输入选择
    querySearch(queryString, callback) {
      this.autoComplete.search(queryString, (status, result) => {
        // result.tips[0].{name,district,location{lng,lat}}
        if (result && result.tips) {
          callback(result.tips.filter(tip => tip.location))
        } else {
          callback(null)
        }
      })
    },
    // 点选搜索结果
    handleSelect(amapTip) {
      if (amapTip.location.lng && amapTip.location.lat) {
        this.$emit('choosePoint', [amapTip.location.lng, amapTip.location.lat])
      } else {
        this.$message({
          message: '您所选的地点无法精确定位',
          type: 'warning'
        })
      }
    },
    // 选中点
    markPoint(lnglatArray) {
      if (lnglatArray && lnglatArray.length === 2) {
        this.mapMarker = new this.AMap.Marker({
          position: new this.AMap.LngLat(lnglatArray[0], lnglatArray[1])
        })
        this.lnglat = lnglatArray
      } else {
        this.mapMarker = null
      }
    },
    initMap() {
      AMapLoader.load({
        key: 'a0efee399e638b35211705625d786e83',
        version: '2.0',
        plugins: []
      }).then((AMap) => {
        this.AMap = AMap
        // 加载地图
        let center = [119.969873, 36.753901] // 平度市
        if (this.defaultPoint && this.defaultPoint.length === 2) {
          center = this.defaultPoint
        }
        this.map = new this.AMap.Map('amap_search_point_container', {
          resizeEnable: true,
          center: center,
          zoom: 12
        })
        if (this.defaultPoint && this.defaultPoint.length === 2) {
          this.markPoint(center)
        }
        // 点击选取
        this.map.on('click', res => {
          if (this.isSearch) {
            if (res && res.lnglat && res.lnglat.lng && res.lnglat.lat) {
              this.$emit('choosePoint', [res.lnglat.lng, res.lnglat.lat])
            }
          }
        })
        // 输入框选择位置
        this.AMap.plugin(['AMap.AutoComplete'], () => {
          this.autoComplete = new this.AMap.AutoComplete({
            city: '全国'
          })
        })
        // 初始化位置
        if (this.point) {
          this.markPoint(this.point)
          this.point && this.map.panTo(this.point)
        }
      }).catch(e => {
        console.error(e)
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>
