<template>
  <div class="overview">
    <div class="top">
        <image-block class="block" v-for="(value,key,index) in data" :key="index" :data="value"/>
    </div>
    <leaflet-map class="map"/>
  </div>
</template>

<script>

import ImageBlock from "./components/imageBlock";
import LeafletMap from "./leafletMap";
import { getRobotList } from '@/api/robot'
export default {
  name: 'Overview',
  components: {LeafletMap, ImageBlock},
  data() {
    return {
      timer:'',
      data:[
        // {name:'1号',electric:'36%',distance: '20海里',lng:'116.876473',lat:'39.342181'},
        // {name:'2号',electric:'36%',distance: '20海里',lng:'116.876473',lat:'39.342181'},
        // {name:'3号',electric:'36%',distance: '20海里',lng:'116.876473',lat:'39.342181'},
        // {name:'4号',electric:'36%',distance: '20海里',lng:'116.876473',lat:'39.342181'},
        // {name:'5号',electric:'36%',distance: '20海里',lng:'116.876473',lat:'39.342181'},
        // {name:'6号',electric:'36%',distance: '20海里',lng:'116.876473',lat:'39.342181'},
        // {name:'7号',electric:'36%',distance: '20海里',lng:'116.876473',lat:'39.342181'},
        // {name:'8号',electric:'36%',distance: '20海里',lng:'116.876473',lat:'39.342181'}
      ]
    }
  },
  beforeDestroy() {
    clearTimeout(this.timer);
  },
  created() {
    this.initRobot()
    this.timer = setInterval(this.initRobot, 2000);
  },
  mounted() {
    // this.webSocket()
  },
  methods: {
    // webSocket() {
    //   this.$store.dispatch('initWebSocket')
    // },
    initRobot(){
      getRobotList().then(res => {
        if (res.code === 200) {
          this.data = res.data.map(item => {
            let distance = '-'
            if(item.targetDistance!=='') distance =  item.targetDistance.toFixed(2)
            return {name:item.robotId+'号',electric:item.powerE+'%',distance: distance+'海里',lng:Number(item.lng).toFixed(8),lat:Number(item.lat).toFixed(8)}
          })
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .overview{
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    padding-right: 30px;
    width: 100%;
    height: 100%;
    .map{
      width: 100%;
      flex: 1;
      background-color: white;
      margin: 10px 0px;
    }
  }
  .top{
    padding: 0px;
    margin: 0px;
    display: flex;
    flex-direction: row;
    .block{
      width: 190px;
      height: 45px;
    }
    height: 55px;
    width: 100%;
    overflow-x: auto;
  }
  .top::-webkit-scrollbar
  {
    /*滚动条整体样式*/
    width: 8px;
    /*高宽分别对应横竖滚动条的尺寸*/  height:7px;
  }
  .top::-webkit-scrollbar-thumb
  {
    /*滚动条里面小方块*/
    border-radius: 10px;  background: #1e2e4f;  box-shadow: inset 0 0 5px rgb(58, 98, 156);
  }
  //滚动条底层颜色!
  .top::-webkit-scrollbar-track
  {
    border-radius: 10px;  background: #4a8ad499;

    /*滚动条里面轨道*/
    box-shadow: inset 0 0 5px rgba( 0, 0, 0, .1);
  }
</style>