<template>
  <div class="container">
    <div class="content block-flex" style="height: 100%;">
      <div style="height: 25%;width: 100%;" v-for="(value,key,index) in data" :key="index">
        <guage :rate="value.data" :title="value.title"/>
        <div class="guage-title">{{value.title}}</div>
      </div>
      <div style="height: 25%;width: 100%;" v-for="(value,key,index) in data0" :key="index">
        <guage1 :rate="value.data" :title="value.title" :max="value.max"/>
      </div>
      <!--<div class="block" v-for="(value,key,index) in data1" :key="index">-->
        <!--<item :data="value"/>-->
      <!--</div>-->
    </div>
  </div>
</template>

<script>

  import { getRobotDetail } from '@/api/robot'
  import Item from "./components/item";
  import Guage from "./components/guage";
  import Guage1 from "./components/guage1";
export default {
  name: 'Right',
  components: {Guage,Guage1, Item},
  data() {
    return {
      img:require('@/assets/images/local.png'),
      position:{
        lng:'*****',
        lat:'*****'
      },
      device:[
        {name:'航行状态',value:'*****', unit:'',color:'#ffffff'},
        {name:'浮力值',value:'*****', unit:'',color:'#ffffff'},
        {name:'滑块位置',value:'*****', unit:'',color:'#ffffff'},
        {name:'横滚角',value:'*****', unit:'°',color:'#00DAE2'},
        {name:'俯仰角',value:'*****', unit:'°',color:'#00DAE2'},
        {name:'航向角',value:'*****', unit:'°',color:'#00DAE2'},
      ],
      data:[
        {
          title:'仪表电容量',
          data: 100,
          color:'#ffffff'
        },
        {
          title:'动力电余量',
          data: 100,
          color:'#ffffff'
        },
        ],
      data0:[
        {
          title:'仪表电电压',
          data: 100,
          max:27,
          color:'#ffffff'
        },
        {
          title:'动力电电压',
          data: 100,
          max:260,
          color:'#ffffff'
        },
        ],
      data1:[
        {name:'历史最大深度',value:'****', unit:'m',color:'#ffffff'},
        {name:'探测目标距离',value:'****', unit:'m',color:'#00DAE2'},
        {name:'目标方位',value:'****',unit:'°',color:'#00DAE2'},
        {name:'目标频率',value:'****',unit:'Hz',color:'#00DAE2'}
      ],
      data2:[
        {name:'任务深度',value:'120', unit:'m',color:'#ffffff'},
        {name:'航向角',value:'93', unit:'°',color:'#ffffff'},
        {name:'驻留位置',value:'116.876473,39.342181', unit:'',color:'#ffffff'},
        {name:'驻留深度',value:'120', unit:'m',color:'#ffffff'},
        {name:'投放位置',value:'116.876473,39.342181', unit:'',color:'#ffffff'},
        {name:'投放深度',value:'120', unit:'m',color:'#ffffff'},
      ],
      task: {name:'当前任务类型',value:'定向', unit:'',color:'#00DAE2'},
      spend: {name:'当前剖面耗时(任务开始倒计时)',value:'5', unit:'h',color:'#ffffff'},
      list:[]
    }
  },
  created() {
      this.initTask()
  },
  methods: {
    init(val){
          this.position.lat = val.lat.toFixed(8)
          this.position.lng = val.lng.toFixed(8)
          this.device[0].value= val.navigateState
          this.device[1].value= val.buoyancy
          this.device[2].value= val.position
          this.device[3].value = val.rollAngle
          this.device[4].value = val.pitchAngle
          this.device[5].value = val.headingAngle

          this.data[0].data= val.instrumentE
          this.data[1].data= val.powerE

          this.data0[0].data= val.instrumentV
          this.data0[1].data= val.powerV
          // this.data1[0].value= val.powerV
          this.data1[1].value= val.targetDistance
          this.data1[2].value= val.targetDirection
          this.data1[3].value= val.targetHertz
    },
    initTask(){
      switch (this.task.value) {
        case '驻留':
          this.list = []
          this.list.push(this.data2[2])
          this.list.push(this.data2[3])
          break
        case '投放':
          this.list = []
          this.list.push(this.data2[4])
          this.list.push(this.data2[5])
          break
        case '航路点':
          this.list = []
          this.list.push(this.data2[0])
          break
        default:
          this.list.push(this.data2[0])
          this.list.push(this.data2[1])
          break
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .container{
    display: flex;
    flex-direction: column;
    /*padding-top: 10px;*/
    .guage-title{
      color: #ffffff;
      height: 10px;
      text-align: center;
      line-height: 10px;
      font-size: 15px;
      font-weight: bold;
      margin-top: -30px;
    }
    .position{
      color: #00DAE2;
      font-size: 18px;
      padding-left: 10px;
      line-height: 30px;
      text-align: center;
      font-weight: bold;
    }
    .block-flex{
      display: flex;
      flex-wrap: wrap;
    }
    .content{
      margin: 5px 0px;
      width: 100%;
      padding: 10px 0px;
      background: url("../../assets/images/bg.png") no-repeat;
      -webkit-background-size: 100% 100%;
      background-size: 100% 100%;
      .block{
        width: 100%;
      }
    }
  }
</style>