<template>
  <section>
    <nav-bar></nav-bar>
    <div class="clear site_container">
      <div class="fl left_side">
        <site-nav default_active="2" active="2-1"></site-nav>
      </div>
      <div class="fl right_side">
        <div class="right_side_box_1">
          <ul class="site_btn_box">
            <li class="site_btn">{{result.working_status}}</li>
          </ul>
          <ul class="site_btn_box">
            <li class="site_btn">{{result.vehicle_status}}</li>
          </ul>
          <ul class="site_btn_box site_btn_box_1">
            <li class="site_btn site_btn_1">X坐标：{{result.x}}</li>
            <li class="site_btn site_btn_1">Y坐标：{{result.y}}</li>
            <li class="site_btn site_btn_1">航向角：{{result.z}}</li>
            <li class="site_btn site_btn_1">下发速度：{{result.send_speed}}</li>
            <li class="site_btn site_btn_1">实际速度：{{result.real_speed}}</li>
            <li class="site_btn site_btn_1">舵轮角度：{{result.carrier}}</li>
            <li class="site_btn site_btn_1">横向偏差：{{result.landscape_deviation}}</li>
            <li class="site_btn site_btn_1">航向偏差：{{result.course_deviation}}</li>
          </ul>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import NavBar from '@components/NavBar.vue'
import SiteNav from '@components/SiteNav.vue'
import {queryVehicleStatus} from '@/config/getData2.js'
export default {
  name: 'CarrySite',
  components: {
    NavBar,
    SiteNav
  },
  data () {
    return {
      interTime: this.$store.getters.setTime,
      timer: null,
      result: {}
    }
  },
  created () {
    this.initData()
    this.refresh()
  },
  beforeDestroy () {
    clearInterval(this.timer)
  },
  methods: {
    refresh () {
      this.timer = setInterval(() => {
        this.initData()
      }, this.interTime)
    },
    async initData () {
      let res = await queryVehicleStatus()
      if (res.code === '1') {
        this.result = res.result
      } else {
        this.toast(res.desc)
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@style/mixin'
.right_side_box_1
  _wh(100%,100%)
  padding .26rem .34rem 0 .48rem
.site_btn_box
  _wh(100%,auto)
  overflow hidden
.site_btn_box_1
  margin-top .2rem
  _fj(flex-start)
  flex-wrap wrap
.site_btn
  float left
  _wh(2.6rem,1rem)
  background #FFFFFF
  border 1.6px solid #54C0B3
  box-shadow 2px 0px 5px 0px rgba(222,222,222,1)
  border-radius .16rem
  _font(.32rem,1rem,#54C0B3,,center)
  margin-right .3rem
  margin-bottom .2rem
.site_btn_1
  width 30%
  border 1.6px solid #8B90A6
  color: #696969
  margin-right 3%
  margin-bottom .24rem
</style>
