<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:[],
        hotellabels:[],
        markerIndex:-1,
        infoWin:'',
        currentLabel:''
      }
  },
  methods: {
    /*初始化地图*/
    getMapBox(){
      this.$nextTick(function() {
        var _this = this;
        Map().then(BMap => {
            _this.BMap=BMap;
          //在此调用api
          _this.zoom=5;
          _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(){
        var _this=this;
        var list=this.$parent.productList;
        _this.map.clearOverlays(); //删除当前覆盖物
        var city=list[0];
        _this.labels=[];
        var point = new BMap.Point(city.longitude,city.latitude);  // 创建点坐标
        _this.zoom=5;
        _this.map.centerAndZoom(point,5);

        for(var i=0;i<list.length;i++){
          var opts = {
            position : new BMap.Point(list[i].longitude,list[i].latitude),    // 指定文本标注所在的地理位置
            offset   : new BMap.Size(-5,-35),
          };
          var content = '<div class="labelDiv" id="cityCell_'+list[i].groupId+'"><p class="orange">￥'+list[i].lowPrice+'</p><span class="cityName">'+list[i].cityname+'</span></div>';
          var label = new BMap.Label(content,opts);  // 创建标注
//          label.setTitle(list[i].cityName);
          label.setZIndex=i;
          label.setCurrentCity=list[i];
          label.setId=list[i].groupId;
          label.setStyle({
            border:'none',
            cursor:'pointer',
          });
          _this.map.addOverlay(label);           // 将标注添加到地图中
          _this.labels.push(label);
          label.addEventListener("mouseover",e=>{
            for (var i =0; i<this.labels.length;i++){
              this.labels[i].setStyle({zIndex:i});
              if(this.labels[i].setId==e.target.setId){
                this.labels[i].setStyle({zIndex:100});
              }
            }
          });
          label.addEventListener("click", e =>{
            var cityDetail=e.target.setCurrentCity;
            _this.cityListClick(cityDetail,1);
          })
        }
    },
    /*城市hover*/
    cityMouseHoverFun(id,type){
        if(!document.getElementById("cityCell_"+id)){
            return false;
        }
        if(type=="hover"){
          document.getElementById("cityCell_"+id).className='labelDiv active';
        }else {
          document.getElementById("cityCell_"+id).className='labelDiv';
        }
        for (var i =0; i<this.labels.length;i++){
          this.labels[i].setStyle({zIndex:i});
          if(this.labels[i].setId==id){
            this.labels[i].setStyle({zIndex:100});
          }
        }
    },
    /*机加酒hover*/
    hotelMouseHoverFun(hotelId,type,str){
      if(!document.getElementById("label_"+hotelId)){
        return false;
      }
      if(str!="lab"){
        this.map.closeInfoWindow();
      }

      if(type=="hover"){
        document.getElementById("label_"+hotelId).className='marker_label active';
      }else {
        document.getElementById("label_"+hotelId).className='marker_label';
      }
      for (var i =0; i<this.hotellabels.length;i++){
        this.hotellabels[i].setStyle({zIndex:i});
        if(this.hotellabels[i].setId==hotelId){
          this.hotellabels[i].setStyle({zIndex:10});
        }else {
          document.getElementById("label_"+this.hotellabels[i].setId).className='marker_label';
        }
      }
    },
    /*机加酒Click*/
    hotelClickFunEvent(h){
      if(!h){
          return false;
      }
      var point = new BMap.Point(h.hotel.longitude,h.hotel.latitude);  // 创建点坐标
      this.map.panTo(point);  //setCenter
      for (var i =0; i<this.hotellabels.length;i++){
        this.hotellabels[i].setStyle({zIndex:i});
        if(this.hotellabels[i].setId==h.hotel.hotelId){
          this.hotellabels[i].setStyle({zIndex:10});
        }
      }
    },

    /*机加酒标记*/
    cityListClick(cityDetail,index){
      var _this=this;
      if(index==1){
        var point = new BMap.Point(cityDetail.location.geoCode.longitude,cityDetail.location.geoCode.latitude);  // 创建点坐标
        _this.$parent.unfoldList(cityDetail);
      }else {
        var hotel=this.$parent.hotelList[0];
        var point = new BMap.Point(hotel.hotel.longitude,hotel.hotel.latitude);  // 创建点坐标
      }
      _this.map.centerAndZoom(point,10); // 用城市名设置地图中心点
      _this.map.clearOverlays(); //删除当前覆盖物
      _this.$nextTick(function(){
        _this.getHotelMarker();
      });
    },

    /**获取城市机加酒列表*/
    getHotelMarker(){
      this.hotellabels=[];
      var hotelMarkers=this.$parent.hotelList;
      for(var i=0;i<hotelMarkers.length;i++){
        var areaArr=hotelMarkers[i];
        var marker = new BMap.Marker(new BMap.Point(areaArr.hotel.longitude,areaArr.hotel.latitude),{icon:new BMap.Icon(marker_icon, new BMap.Size(24, 24))});  // 创建标注
//        this.map.addOverlay(marker);
        marker.setTitle(areaArr.hotel.hotelName);
        marker.className="hMarker";
        marker.setIndex=i;
        marker.setTop(false);
        let price=showOnePrice ?  Math.ceil(areaArr.price.perPersonAmount) : Math.ceil(areaArr.price.amount);
        var label = new BMap.Label('<div class="marker_label" id="label_'+areaArr.hotel.hotelId+'">￥'+price+'</div>',{position:new BMap.Point(areaArr.hotel.longitude,areaArr.hotel.latitude),offset:new BMap.Size(-20,-10)});
        label.className='markerLabel';
        label.setStyle({
          border:'none',
          cursor:'pointer',
        });
        label.setTitle(areaArr.hotel.city);
        label.setId=areaArr.hotel.hotelId;
        this.map.addOverlay(label);

        this.hotellabels.push(label);
        this.ClickMarkerHandler(areaArr,label);
      }
    },
    ClickMarkerHandler(areaArr,label){
      var _this=this;
      label.addEventListener("mouseover",function(e){
        _this.openInfo(areaArr,e);   //打开信息框
        _this.hotelMouseHoverFun(e.target.setId,"hover","lab");
          if(_this.currentLabel==e.target.setId){
              return;
          }else {
            _this.currentLabel=e.target.setId;
          }
      });
    },
    openInfo(areaArr,e){
      var p = e.target;
      var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
      var opts = {
        position : point,    // 指定文本标注所在的地理位置
        offset   : new BMap.Size(0,5)
      };
      var obj='';
      for (var j=0;j<areaArr.hotel.category;j++){
        obj+='<i class="iconfont icon-xingxing infoWin_icon"></i>'
      }
      var detailObj=urlEncode(this.$parent.detailParams(areaArr)).substr(1);
      let priceText=showOnePrice ?  "<font>每人低至</font>￥"+Math.ceil(areaArr.price.perPersonAmount)  : "<font>总价</font>￥"+Math.ceil(areaArr.price.amount);
      var content ='<a href="javascript:void(0)" id="dateil_'+areaArr.hotel.hotelId+'" onclick="getId(&quot;'+detailObj+'&quot;)"><div class="flex-box"><div class="info-img"><img src="'+areaArr.image+'"></div><div class="flex"><p class="infoWin_name">'+areaArr.hotel.hotelName +'</p><p>'+obj+'</p><p class="infoWin_price">'+priceText+'</p></div></div></a>';
      var infoWindow = new BMap.InfoWindow(content,opts);  // 创建信息窗口对象
      infoWindow.setWidth(220);
      this.map.openInfoWindow(infoWindow,point); //开启信息窗口
    },
    /*清除地图覆盖物*/
    clearMapOverlays(){
      this.map.clearOverlays();
    },
  },
  mounted(){
    this.getMapBox();
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus">
#BmapContainer{
  .BMapLabel{
    background-color transparent!important
  }
  .BMap_shadow, .BMap_shadow img, .BMap_shadow div{
    display none
  }
    .marker_label{
      position absolute
      display inline-block
      border-radius: 25px;
      padding 3px 10px
      background-color: #effaff
      border: 1px solid #5392f9
      font-size 16px
      font-weight 700
      color #5593f6
      transition all .1s
      cursor pointer
      &.active{
        background-color: #5392f9
        color: #fff
        border: 1px solid #396fc6
        &:after{
          border-top: 8px solid #5392f9;
        }
      }
      &:hover{
        background-color: #5392f9
        color: #fff
        border: 1px solid #396fc6
        &:after{
          border-top: 8px solid #5392f9;
        }
      }
      &:before,&:after{
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        width: 0;
        height: 0;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        transform: translateX(-50%);
        border-top: 8px solid #5392f9;
        box-sizing border-box
        transition all .1s
      }
      &:after{
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        border-top: 7px solid #effaff;
      }
    }
  /*}*/
}
</style>
