<template>
    <div id="BmapContainer">
    </div>
</template>
<script>
import marker_icon from '../../assets/images/icon.png'
import {Map,mapStyle} from '../../assets/js/map.js'
export default {
  name: '',
  inject:['reload'],
  data () {
      return {
        map:'',
        BMap:'',
        data_info:[],
        zoom:5,
        labels:[],
        currentLabel:'',
        markerIndex:-1
      }
  },
  methods: {
    getMapBox(){
      this.$nextTick(function() {
        var _this = this;
        Map().then(BMap => {
          _this.BMap=BMap;
          //在此调用api
          _this.zoom=3;
          _this.map = new BMap.Map("BmapContainer",{minZoom :5,enableMapClick:false});
          var point = new BMap.Point(116.400244,39.92556);  // 创建点坐标
          _this.map.centerAndZoom(point,_this.zoom);
          _this.map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
          _this.$parent.map=_this.map;
          /**设置地图样式*/
          _this.map.setMapStyle({styleJson:mapStyle()});
        });
      });
    },

    setCityMarker(list){
        var _this=this;
        var city=list[0];
        var point = new BMap.Point(city.longitude,city.latitude);  // 创建点坐标
        _this.zoom=3;
        _this.map.centerAndZoom(point,6);
        _this.map.clearOverlays(); //删除当前覆盖物
        for(var i=0;i<list.length;i++){
          var opts = {
            position : new BMap.Point(list[i].longitude,list[i].latitude),    // 指定文本标注所在的地理位置
            offset   : new BMap.Size(10,-40),
          };
          var content = '<div class="swipeLabel" id="label_'+list[i].hotelId+'"><p>'+list[i].price+'</p></div>';
          var label = new BMap.Label(content,opts);  // 创建标注
          label.setTitle(list[i].cityName);
          label.setZIndex=i;
          label.setId=list[i].hotelId;
          label.setStyle({
            border:'none',
            cursor:'pointer'
          });
          _this.map.addOverlay(label);           // 将标注添加到地图中
          _this.labels.push(label);

          label.addEventListener("click", e =>{
            var dId=document.getElementById("slide_"+e.target.setId).getAttribute("data-id");
            _this.$parent.toCurrentSlide(dId);
            _this.setCurrentLabel(e.target.setId,true);
          })
        }
        _this.map.addEventListener("zoomend", function() {
          _this.zoom = _this.map.getZoom();
          var bs = _this.map.getBounds();
          if(_this.zoom>8){
            _this.map.enableScrollWheelZoom(false);
          }else {
            _this.map.enableScrollWheelZoom(true);
          }
        });
    },

    setCurrentLabel(id){
      for (var i=0;i<this.labels.length;i++){
        this.labels[i].setStyle({zIndex:1000});
        if(this.labels[i].setId==id){
          this.labels[i].setStyle({zIndex:10000});
          this.currentLabel=this.labels[i];
        }
      }
      var labelList=document.getElementsByClassName("swipeLabel");
      for (var i=0;i<labelList.length;i++){
        labelList[i].className='swipeLabel';
      }
      if(document.getElementById("label_"+id)){
        document.getElementById("label_"+id).className='swipeLabel active';
      }
    },

    /*清除地图覆盖物*/
    clearMapOverlays(){
      this.map.clearOverlays();
    },
  },
  mounted(){
    this.getMapBox();
  },
}
</script>
<style lang="stylus">
  .swipeLabel{
    position absolute
    padding 5px 10px
    background #4691ee
    font-size 13px
    color #fff
    border-radius 20px
    border 1px solid #4691ee
    p{
      font-weight bold
    }
    &:before{
      content ''
      position absolute
      top: 100%
      left 50%
      border-width:0px 10px 0px 6px;
      border-style:solid;
      border-color:transparent transparent transparent #fff
      box-shadow -1px 1px 0px #ddd;
      background #4691ee
    }
    &.active{
      background #fff
      color #4691ee
      transform scale(1.3)
      transition all 0.5s
      &:before{
        border-color:transparent transparent transparent #f66356
      }
    }
    &:hover{
      background #fff
      color #4691ee
      &:before{
        border-color:transparent transparent transparent #f66356
      }
    }
  }
</style>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
#BmapContainer{
  height 100%

}
</style>
