<template>
  <div class="container">
    <div class="content block-flex" style="height: 70%">
      <div style="width: 100%;height: 40px;display: flex;">
        <el-image :src="img" style="width: 30px;height: 30px;"/>
        <div class="position">{{position.lng}},{{position.lat}}</div>
      </div>
      <div class="block" v-for="(value,key,index) in device" :key="index">
        <item :data="value"/>
      </div>
    </div>
    <div class="content" style="height: 30%">
      <item class="block" style="height: 40px" :data="task"/>
      <div class="block" style="height: 40px" v-for="(value,key,index) in list" :key="index">
        <item :data="value"/>
      </div>
      <div style="color: white;font-size: 15px">
        <div class="block" style="height: 25px">{{spend.name}}</div>
        <div class="block" style="height: 25px;font-weight: bold">{{spend.value}}</div>
      </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: 'Left',
  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'},
        {name:'历史最大深度',value:'****', unit:'m',color:'#ffffff'},
        {name:'探测目标距离',value:'****', unit:'m',color:'#ffffff'},
        {name:'目标方位',value:'****',unit:'°',color:'#ffffff'},
        {name:'目标频率',value:'****',unit:'Hz',color:'#ffffff'}
      ],
      timer: null, // 定时器
      clock: 1, // 定时时间
      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:'', unit:'',color:'#ffffff'},
      list:[]
    }
  },
  created() {
      // this.initTask()
  },
  beforeDestroy(){
    this.stopTimer()
  },
  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.device[7].value= val.targetDistance
          this.device[8].value= val.targetDirection
          this.device[9].value= val.targetHertz
    },
    setTime(createTime,endTime){
      var dateBegin = new Date(createTime.replace(/-/g, "/"))
      var dateEnd = new Date()
      if(endTime!==''){
        dateEnd = new Date(endTime.replace(/-/g, "/"))
      }
      var dateDiff = dateEnd.getTime() - dateBegin.getTime();//时间差的毫秒数
      var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000));//计算出相差天数
      var leave1=dateDiff%(24*3600*1000) //计算天数后剩余的毫秒数
      var hours=Math.floor(leave1/(3600*1000))//计算出小时数
      //计算相差分钟数
      var leave2=leave1%(3600*1000) //计算小时数后剩余的毫秒数
      var minutes=Math.floor(leave2/(60*1000))//计算相差分钟数
      //计算相差秒数
      var leave3=leave2%(60*1000) //计算分钟数后剩余的毫秒数
      var seconds=Math.round(leave3/1000)
      this.spend.value = dayDiff+"天 "+hours+"小时 "+minutes+"分钟 "+seconds+"秒 "
    },
    openTimer(createTime){
      let that = this
      this.timer = setInterval(function(){
        that.setTime(createTime,'')
      }, 1000);
    }, // 停止定时器
    stopTimer(){
      if (this.timer){
        clearTimeout(this.timer)
        this.timer = null
      }
    },
    initTask(val){
      this.stopTimer()
      if(val===''){
        this.list = []
        this.task = {name:'当前任务类型',value:'', unit:'',color:'#00DAE2'}
        this.spend.value = ''
      }
      this.setTime(val.createTime,val.endTime)
      if(val.endTime === ''){
        this.openTimer(val.createTime)
      }
      switch (val.taskType) {
        case '1':
          this.task.value='定向'
          let str = ''
          for(let i=0;i<val.directedTask.directCount;i++){
            str = str + val.directedTask.headingAngle[i] + '°;'
          }
          this.list = [
            {name:'任务深度',value:val.directedTask.taskDepth.toFixed(2), unit:'m',color:'#ffffff'},
            {name:'航向角',value:str, unit:'',color:'#ffffff'}
            ]
          break
        case '2':
          this.task.value='航路点'
          // const tmp = val.routeTask.robotRoutes.toString()
          this.list = [
            {name:'任务深度',value:val.routeTask.taskDepth, unit:'m',color:'#ffffff'},
            {name:'航路点',
              value: val.routeTask.routeCount,
              unit:'个',color:'#ffffff'},
          ]
          break
        case '3':
          this.task.value='定深直航'
          this.list = [
            {name:'任务深度',value:val.flightTask.taskDepth, unit:'m',color:'#ffffff'},
            {name:'航向角',value:val.flightTask.headingAngle.toFixed(2), unit:'°',color:'#ffffff'}
          ]
          break
        case '4':
          this.task.value='驻留'
          this.list = [
            {name:'驻留位置',value:Number(val.resideTask.lng).toFixed(6)+','+Number(val.resideTask.lat).toFixed(6), unit:'',color:'#ffffff'},
            {name:'驻留深度',value:val.resideTask.depth, unit:'m',color:'#ffffff'}
            ]
          break
        case '5':
          this.task.value='投放'
          this.list = [
            {name:'投放位置',value:Number(val.putTask.lng).toFixed(6)+','+Number(val.putTask.lat).toFixed(6), unit:'',color:'#ffffff'},
            {name:'投放时间',value:val.createTime, unit:'',color:'#ffffff'}
            ]
          break
        default:
          this.task.value='任务终止'
          this.list = []
          break
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .container{
    display: flex;
    flex-direction: column;
    .guage-title{
      color: #ffffff;
      height: 15px;
      text-align: center;
      line-height: 15px;
      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: 10px 0px;
      width: 100%;
      padding: 20px;
      background: url("../../assets/images/bg.png") no-repeat;
      -webkit-background-size: 100% 100%;
      background-size: 100% 100%;
      .block{
        width: 100%;
      }
    }
  }
</style>