<template>
    <div>
      <ul class="title-wrap">
        <li>
          <img src="../assets/img/parkingtotal.svg">
          <div>
            <p>{{parkingtotal|formatNum}}</p>
            <p>停车场总数</p>
          </div>
        </li>
        <li>
          <img src="../assets/img/membertotal.svg">
          <div>
            <p>{{membertotal|formatNum}}</p>
            <p>会员总数</p>
          </div>
        </li>
        <li>
          <img src="../assets/img/incometotal.svg">
          <div>
            <p>{{incometotal|formatNum}}</p>
            <p>今日收入总数</p>
          </div>
        </li>
        <li>
          <img src="../assets/img/ordertotal.svg">
          <div>
            <p>{{ordertotal|formatNum}}</p>
            <p>今日订单数</p>
          </div>
        </li>
      </ul>
      <div class="allmap" id="allmap"></div>
      <ul class="type-wrap">
        <li>紧张</li>
        <li>正常</li>
        <li>空闲</li>
      </ul>
      <div class="park-wrap" ref="parkwrap">
          <ul class="content" ref="">
            <li v-for="(item, index) in parkList" :key="index" :title="item.name" :class="{'current-active':index===currentIndex}" @click="currentPark(item, index)">{{ item.name }}</li>
          </ul>
      </div>
      <div class="flexfm" ></div>
    </div>
</template>

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

export default {
  name: 'mapsection',
  data() {
    return {
      parkingtotal: '7338',
      membertotal: '738',
      incometotal: '1156738',
      ordertotal: '6738',
      parkList: [
        {name:'西局街道办事处12321312312312',id:'1'},
        {name:'西局街道办事处',id:'2'},
        {name:'西局街道办事处',id:'3'},
        {name:'西局街道办事处',id:'4'},
        {name:'西局街道办事处',id:'5'},
        {name:'西局街道办事处',id:'6'},
        {name:'西局街道办事处',id:'7'},
        {name:'西局街道办事处',id:'8'},
        {name:'西局街道办事处',id:'9'},
        {name:'西局街道办事处',id:'10'},
        {name:'西局街道办事处',id:'11'},
        {name:'西局街道办事处',id:'12'},

      ],
      currentIndex:0
    }
  },
  created() {

  },
  mounted() {
    this.$nextTick(() => {
      this.scroll = new BScroll(this.$refs.parkwrap,{
        scrollbars:true,//显示滚动条（默认是false不显示）
        mouseWheel:true,//支持鼠标触发区域滚动
        bounce:true,//取消达到边界的缓冲效果
      })
    })
    let data = {
      nurseryInfo: [
        {Name:'万达停车场1',MapPointX:'111.742579',MapPointY:'40.818675',status:0,free:30,total:1000},
        {Name:'万达停车场2',MapPointX:'111.622579',MapPointY:'40.878675',status:1,free:40,total:800},
        {Name:'万达停车场333333',MapPointX:'111.782579',MapPointY:'40.778675',status:2,free:300,total:500}
      ]
    }
    this.baiduMap(data)
  },
  methods: {
    currentPark(item, index) {
      console.log(item)
      this.currentIndex = index
      let data = {
        nurseryInfo: [
          {Name:'万达停车场11111',MapPointX:'111.742579',MapPointY:'40.818675',status:2,free:300,total:500},
          {Name:'万达停车场22222',MapPointX:'111.622579',MapPointY:'40.878675',status:0,free:30,total:1000},
          {Name:'万达停车场333333',MapPointX:'111.782579',MapPointY:'40.818675',status:1,free:40,total:800}
        ]
      }
      this.baiduMap(data)
    },
    baiduMap (data) {
      var map = new BMap.Map('allmap', {enableMapClick: false})
      var point = new BMap.Point(111.742579, 40.818675)
      map.centerAndZoom(point, 12)
      var mapStyle={  style : "midnight" }
      map.setMapStyle(mapStyle);
      // var marker = new BMap.Marker(point)  // 创建标注
      // map.addOverlay(marker)              // 将标注添加到地图中

      map.clearOverlays();
      var i = 0;
      var points = [];
      for (var item in data.nurseryInfo) {
        (function (x) {
          var itemthat = item;
          //创建标注
          var pt = new BMap.Point(data.nurseryInfo[item].MapPointX, data.nurseryInfo[item].MapPointY);
          points[i] = pt;
          if(data.nurseryInfo[item].status === 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.nurseryInfo[item].status === 1){
            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});
          }
          console.log(data)
          marker.setTop(true,27000000);
          map.addOverlay(marker);
          var myLabel;

          marker.addEventListener("mouseover", (e)=> {
            var that = this;
            console.log(e)
              myLabel = new BMap.Label(
                `<div class="dislog-wrap">
                  <div class="dialog-header" title="${data.nurseryInfo[itemthat].Name}">${data.nurseryInfo[itemthat].Name}</div>
                  <ul class="dislog-body">
                    <li><div>${data.nurseryInfo[itemthat].free}</div><div>空闲</div></li>
                    <li><div>/</div><div></div></li>
                    <li><div>${data.nurseryInfo[itemthat].total}</div><div>总数</div></li>
                  </ul>
                </div>`,
              {
                offset: new BMap.Size(25, -35),   //label的偏移量，为了让label的中心显示在点上
                position: pt
              });

            myLabel.setStyle({
                // color: "#0f0",
                // fontSize: "12px",
                padding: "0",
                // whiteSpace: "normal",
                backgroundColor: "",
                border: "0px",
                zIndex: "1000"
              }
            );
            marker.setLabel(myLabel)
            marker.setTop(true,27000000);

          });

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

    }
  }
}
</script>

<style lang="scss" scoped>
  .allmap{
    position: absolute;
    top:80px;
    left: 0;
    right: 0;
    bottom: 0;
    .parkpop-content{
      background-color: black;
    }
  }

  .title-wrap{
    display: flex;
    padding-top: 17px;
    padding-bottom: 18px;
    background:rgba(0,45,140,.6);
      li{
      flex: 1;
      height: 45px;
      text-align: center;
      overflow: hidden;
      font-size: 0;
        img{
          display: inline-block;
          width: 45px;
          height: 45px;
          margin-right: 14px;
        }
        div{
          display: inline-block;
          vertical-align: top;
          text-align: left;
          max-width: 100px;
          overflow: hidden;
          p{
            &:nth-of-type(1){
              font-size:24px;
              font-weight:500;
              color:rgba(255,255,255,1);
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
            &:nth-of-type(2){
              font-size:14px;
              font-weight:bold;
              color:rgba(0,207,254,.7);
              margin-top: 7px;
            }
          }
        }
    }
  }
  .type-wrap{
    padding-left: 10px;
    position: absolute;
    left: 11px;
    bottom: 11px;
    background-color: rgba(10,52,140,.8);
    li{
      float: left;
      height: 20px;
      line-height: 20px;
      margin-right: 10px;
      padding-left: 12px;
      font-size: 12px;
      color:rgba(255,255,255,.7);
      background-repeat: no-repeat;
      background-position: 0 center;
      &:nth-of-type(1){
        background-image: url("../assets/img/busy-type.png");
      }
      &:nth-of-type(2){
        background-image: url("../assets/img/nomal-type.png");
      }
      &:nth-of-type(3){
        background-image: url("../assets/img/idle-type.png");
      }
    }
  }
  .park-wrap{
    width: 120px;
    max-height: 124px;
    position: absolute;
    right: 11px;
    bottom: 11px;
    background-color: #0D3689;
    font-size: 12px;
    overflow: hidden;

    .content{
      height:100%;
      li{
        padding-left: 26px;
        height: 20px;
        line-height: 20px;
        color:rgba(255,255,255,.7);
        background-image:url("../assets/img/office-icon.png");
        background-repeat: no-repeat;
        background-position: 9px center;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        cursor: pointer;
      }
      .current-active{
        color:rgba(255,255,255,1);
        background-image:url("../assets/img/officeactive-icon.png");
      }
    }

  }
</style>
