<template>
  <el-row class="m-15" type="flex" justify="space-between">
    <el-col :span="2">
      <PublicTag icon="icon-weixing" val="16.88" unit="颗" state="normal" />
    </el-col>
    <el-col :span="2">
      <PublicTag icon="icon-weixing" val="16.88" unit="颗" state="normal" />
    </el-col>
    <el-col :span="2">
      <PublicTag icon="icon-weixing" val="16.88" unit="颗" state="normal" />
    </el-col>
    <el-col :span="2">
      <PublicTag icon="icon-gaodu" val="50" unit="米" state="normal" />
    </el-col>
    <el-col :span="3">
      <HeartTag :heartBeat="planeState.heartBeat" :heartRandom="planeState.heartRandom"
        :getPlaneMode="planeState.getPlaneMode" />
    </el-col>
    <el-col :span="2">
      <PublicTag icon="icon-mianxingdiaogou" :val="planeState.state" unit="" state="normal" />
    </el-col>
    <el-col :span="2">
      <PublicTag icon="icon-gaodu" :val="planeState.groundSpeed" unit="米" state="normal" />
    </el-col>
    <el-col :span="2">
      <PublicTag icon="icon-gaodu" val="50" unit="米" state="danger" />
    </el-col>
    <el-col :span="2">
      <PublicTag icon="icon-gaodu" val="50" unit="米" state="danger" />
    </el-col>
  </el-row>
</template>

<script>
import HeartTag from '@/components/Tag/HeartTag'
import PublicTag from '@/components/Tag/PublicTag'

export default {
  name: 'PlaneStatus',
  data () {
    return {
      planesId: this.$route.params.id,
      planeState: {}
    }
  },
  components: {
    HeartTag,
    PublicTag
  },
  computed: {
    plane () {
      return this.$store.state.airList.find(plane => plane.id === this.planesId)
    }
  },
  watch: {
    plane: {
      handler (val) {
        this.planeState = val.planeState
      },
      deep: true
    }
  },
  methods: {},
  created () {
    if (this.plane) {
      this.planeState = this.plane.planeState
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/theme.scss";

.el-row {
  z-index: 90;
}
</style>
