<template>
    <el-dialog :visible="_visible" title="选择地址" @close="_visible = false">
        <div id="r-result">
        <p>请输入:</p>
        <input ref="input" size="mini" type="text" id="suggestId" :value="value"/>
      </div>
        <div id="l-map" ref="map" />
        <div 
        id="searchResultPanel" 
        style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;" 
      />
  
      <div class="flex-end" style="margin-top:10px">
        <el-button type="primary" size="mini" @click="save">保存</el-button>
      </div>
    </el-dialog>
  </template>
  
  <script>
  export default {
    name:'MapModal',
    props:['visible', 'toponym'],
    data(){
      return {
        isInit: true,
        value: "",
        point: []
      }
    },
    computed:{
      _visible:{
        get(){
          return this.visible
        },
        set(newVal){
          this.$emit('update:visible',newVal)
        }
      }
    },
    watch:{
      visible(newVal){
        if(!newVal) return
        this.$nextTick(() => {
          if(this.isInit){
            this.initMap()
            this.isInit = false
            return
          }
  
          this.initValue()
        })  
      }
    },
    methods:{
      initMap(){
        this.createMap()
        this.createAutoComplete()
        this.registerHightlightEvent()
        this.registerConfirmEvent()
        this.registerConfirmEvent()
      },
      createMap(){
        this.map = new BMap.Map('l-map')
        this.map.centerAndZoom('北京',28)
      },
      createAutoComplete(){
        this.ac = new BMap.Autocomplete({
          input:'suggestId',
          localtion: this.map
        })
      },
      registerHightlightEvent(){
        this.ac.addEventListener('onhighlight',(e) => {
           var str = "";
               var _value = e.fromitem.value;
               var value = "";
               if (e.fromitem.index > -1) {
                   value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
               }    
               str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
       
               value = "";
               if (e.toitem.index > -1) {
                   _value = e.toitem.value;
                   value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
               }    
               str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
               document.getElementById("searchResultPanel").innerHTML = str;
        })
      },
      registerConfirmEvent(){
        this.ac.addEventListener("onconfirm", (e) => {   //鼠标点击下拉列表后的事件
          var _value = e.item.value;
              this.value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
              document.getElementById("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + this.value;
              this.setPlace();
          });
      },
      setPlace(){
          this.map.clearOverlays();    //清除地图上所有覆盖物
          
        const onSearchComplete = () => {
          const { point} = local.getResults().getPoi(0)
  
          this.point = [point.lat , point.lng]
          // const pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
          
              this.map.centerAndZoom(point, 18);
              this.map.addOverlay(new BMap.Marker(point));    //添加标注
          }
  
          var local = new BMap.LocalSearch(this.map, { //智能搜索
            onSearchComplete
          });
  
          local.search(this.value);
      },
      initValue(){
        if(this.toponym) return
        this.value = this.toponym
        this.setPlace()
      },
      save(){
        console.log(this.point,this.value)
        if(this.point.length !== 2 || !this.value){
          this.$message.warning('请选择地址')
          return
        }
  
        this.$emit('save',{ point:this.point, name:this.value })
        this._visible = false
      }
    }
  }
  </script>
  
  <style scoped lang="scss">
  #l-map{
    width: 100%;
    height: 300px;
  }
  
  #r-result{
    width: 100%;
    height: 34px;
    margin-bottom: 20px;
    font-size: 16px;
    display: flex;
    align-items: center;
  
    p{
      width:60px;
    }
  
    input {
      border:1px solid #DCDFE6;
      width: 100%;
      height: 100%;
      border-radius: 5px;
      box-sizing: border-box;
      padding: 5px;
    }
  }
  </style>