<template>
    <div class="map-wrap" id="map"></div>
</template>

<script>
import busyCar from '../images/content/busy-status.png'; //以import的方式导入图片文件
import normalCar from '../images/content/normal-status.png'; //以import的方式导入图片文件
import idleCar from '../images/content/idle-status.png'; //以import的方式导入图片文件

export default {
  name: 'VMap',
  mounted(){
    this.drawMap()
  },
  methods:{
    drawMap(){
      let data =  [
          {Name:'万达停车场1',lonId:'111.742579',latId:'40.818675',status:0,free:30,total:1000},
          {Name:'万达停车场2',lonId:'111.622579',latId:'40.878675',status:1,free:40,total:800},
          {Name:'万达停车场333333',lonId:'111.782579',latId:'40.778675',status:2,free:300,total:500}
        ];
      var map = new BMap.Map('map', {enableMapClick: false})
      var point = new BMap.Point(data[0].lonId, data[0].latId)
      map.centerAndZoom(point, 15)
      var mapStyle={  style : "midnight" }
      map.enableScrollWheelZoom(false);
      map.setMapStyle(mapStyle);
      // var marker = new BMap.Marker(point)  // 创建标注
      // map.addOverlay(marker)              // 将标注添加到地图中

      map.clearOverlays();
      var i = 0;
      var points = [];
      for (var item in data) {
        (function (x) {
          var itemthat = item;
          //创建标注
          var pt = new BMap.Point(data[item].lonId, data[item].latId);
          points[i] = pt;
          if(data[item].freeBrethNum/data[item].plBerthNum == 0){
            var myIcon = new BMap.Icon(busyCar,
              new BMap.Size(29, 40), {
                offset: new BMap.Size(10, 40),
                textColor: '#fff'
              });
            var marker = new BMap.Marker(pt,{icon:myIcon});
          } else if(data[item].freeBrethNum/data[item].plBerthNum <= 0.3){
            var myIcon = new BMap.Icon(normalCar,
              new BMap.Size(29, 40), {
                offset: new BMap.Size(10, 40),
                textColor: '#fff'
              });
            var marker = new BMap.Marker(pt,{icon:myIcon});
          } else {
            var myIcon = new BMap.Icon(idleCar,
              new BMap.Size(29, 40), {
                offset: new BMap.Size(10, 40),
                textColor: '#fff'
              });
            var marker = new BMap.Marker(pt,{icon:myIcon});
          }
          var myIcon = new BMap.Icon(busyCar,
            new BMap.Size(29, 40), {
              offset: new BMap.Size(10, 40),
              textColor: '#fff'
            });

          marker.setTop(true,27000000);
          map.addOverlay(marker);
          var myLabel;

          marker.addEventListener("mouseover", (e)=> {
            map.removeOverlay(myLabel);
            var that = this;
            let tmpHtml = '';
            for(let i=0;i<JSON.parse(data[itemthat].plRate).length;i++){
              //console.log(data[itemthat].plRate)
              tmpHtml += "<li>"+JSON.parse(data[itemthat].plRate)[i].standard+"</li>"
            }


          });
          marker.addEventListener("mouseout", function (e) {
            map.removeOverlay(myLabel);
          });
          i++;
        })(i);
      }

    }

  }

}
</script>

<style scoped lang="scss">
    .map-wrap{
        width: 100%;
        height: 100%;
    }
</style>
