<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',
  props:['mapdata'],
  data(){
    return{
      map:'',
      mapdataarr:[]
    }
  },
  mounted(){
    console.log(this.mapdata)
    this.map = new BMap.Map('map', {enableMapClick: false})

  },
  watch:{
    // mapdata:function (newVal) {
    //   console.log(newVal)
    // }
    mapdata:  {
      handler(){

        this.mapdataarr = this.mapdata.data
        //let mapData = this.mapdataarr
        // let map = this.map
        console.log(this.mapdata)
        // let data =  [
        //     {Name:'万达停车场1',lonId:'111.742579',latId:'40.818675',status:0,freeBrethNum:0,plBerthNum:1000,plName:'万达广场停车场1',plAddress:'北京万达广场1'},
        //     {Name:'万达停车场2',lonId:'111.622579',latId:'40.878675',status:1,freeBrethNum:100,plBerthNum:800,plName:'万达广场停车场2',plAddress:'北京万达广场2'},
        //     {Name:'万达停车场333333',lonId:'111.782579',latId:'40.778675',status:2,freeBrethNum:300,plBerthNum:500,plName:'万达广场停车场3',plAddress:'北京万达广场3'}
        //   ];
        // let data = this.data
        console.log(this.mapdata.lonId)
        console.log(this.mapdata.latId)
        var point = new BMap.Point(this.mapdata.lonId, this.mapdata.latId)
        this.map.centerAndZoom(point, 22)
        var mapStyle={  style : "midnight" }
        this.map.enableScrollWheelZoom(false);
        this.map.setMapStyle(mapStyle);

        this.drawMap()
      },
      deep:true

    },
  },
  methods:{
    initMap(){

    },
    drawMap(){

      this.map.clearOverlays();
      var i = 0;
      var points = [];
      let mapData = this.mapdata.data
      var that = this
      for (var item in mapData) {
        (function (x) {
          var itemthat = item;
          //创建标注
          var pt = new BMap.Point(mapData[item].lonId, mapData[item].latId);
          points[i] = pt;
          if(mapData[item].freeBrethNum/mapData[item].plBerthNum == 0|mapData[item].freeBrethNum==0){
            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});
          } else if(mapData[item].freeBrethNum/mapData[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(busyCar,
              new BMap.Size(29, 40), {
                offset: new BMap.Size(10, 40),
                textColor: '#fff'
              });
            var marker = new BMap.Marker(pt,{icon:myIcon});
          }


          marker.setTop(true,27000000);
          marker.addEventListener('click',function () {
            console.log(marker)
            var p = marker.getPosition();  //获取marker的位置
            alert("marker的位置是" + p.lng + "," + p.lat);
          })
          that.map.addOverlay(marker);
          var myLabel;
          that.map.removeOverlay(myLabel);

          // map.removeOverlay(myLabel);
          myLabel = new BMap.Label(
            `<div class="dialog-wrap">
                  <div class="dialog-header" title="${mapData[item].plAddress}">${mapData[item].plName}</div>
                  <div class="dialog-address" title="${mapData[item].plAddress}">${mapData[item].plAddress}</div>
                  <ul class="dislog-body">
                    <li><div>${mapData[item].freeBrethNum}</div><div>空闲</div></li>
                    <li></li>
                    <li><div>${mapData[item].plBerthNum}</div><div>总数</div></li>
                  </ul>
                  <div class="dislog-footer">停车场收入:${mapData[item].income}元</div>
                  <div class="dislog-footer">停车场欠费:${mapData[item].arreageincome}元</div>
                </div>`,
            {
              offset: new BMap.Size(-225, -55),   //label的偏移量，为了让label的中心显示在点上
              position: pt
            });
          myLabel.setStyle({
              padding: "0",
              backgroundColor: "",
              border: "0px",
              zIndex: "1000"
            }
          );
          marker.setLabel(myLabel)
          marker.setTop(true,27000000);
          i++;
        })(i);
      }

    }

  }

}
</script>

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


</style>
