<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 {
      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'}
      ]
    }
  },
  created() {
    this.initRobot()
  },
  methods: {
    initRobot(){
      getRobotList().then(res => {
        if (res.code === 200) {
          this.data = res.data.map(item => {
            return {name:item.robotId+'号',electric:item.powerE+'%',distance: item.targetDistance,lng:Number(item.lng).toFixed(6),lat:Number(item.lat).toFixed(6)}
          })
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .overview{
    display: flex;
    flex-direction: column;
    padding-right: 30px;
    width: 100%;
    height: 100%;
    .top{
      display: flex;
      flex-direction: row;
      .block{
        width: 12.5%;
        height: 45px;
        margin-right: 10px;
      }
    }
    .map{
      width: 100%;
      flex: 1;
      background-color: white;
      margin: 10px 0px;
    }
  }
</style>