<template>
  <div class="mainBox flex column no-select">
    <!-- 心跳 ps:黑色只网络通 绿色飞控有效心跳-->
    <div class="flex">
      <div class="tag flex mac mc iconfont" :class="[heartIconClass, usefulHeartClass]"></div>
    </div>
    <!-- 解锁状态 -->
    <div class="flex">
      <div class="tag flex mac mc iconfont" :class="isUnlock ? 'icon-jiesuo' : 'icon-suoding'"></div>
    </div>
    <!-- 飞机模式 -->
    <div class="flex">
      <div v-if="getPlaneMode" class="plane-mode p-l-5 p-r-5 mc mac">
        <font class="plane-mode-text">{{ getPlaneMode }}</font>
      </div>
      <div class="tag flex mac mc iconfont icon-moshixuanze">
      </div>
    </div>
    <!-- 卫星 -->
    <div class="flex">
      <div v-if="satCount" class="plane-mode p-l-5 p-r-5 mc mac">
        <font class="plane-mode-text">{{ fixType }} {{ satCount }}颗</font>
      </div>
      <div class="tag flex mac mc iconfont icon-weixing">
      </div>
    </div>
    <!-- 电池电压 -->
    <div class="flex">
      <div v-if="voltagBattery" class="plane-mode p-l-5 p-r-5 mc mac">
        <font class="plane-mode-text">{{ voltagBattery }}V</font>
      </div>
      <div class="tag flex mac mc iconfont icon-dianya1">
      </div>
    </div>
    <!-- 电池电流 -->
    <div class="flex">
      <div v-if="currentBattery" class="plane-mode p-l-5 p-r-5 mc mac">
        <font class="plane-mode-text">{{ currentBattery }}A</font>
      </div>
      <div class="tag flex mac mc iconfont icon-dianliu">
      </div>
    </div>
    <!-- 飞机高度 -->
    <div class="flex">
      <div v-if="positionAlt" class="plane-mode p-l-5 p-r-5 mc mac">
        <font class="plane-mode-text">{{ positionAlt }}米</font>
      </div>
      <div class="tag flex mac mc iconfont icon-gaodu">
      </div>
    </div>
    <!-- 飞机对地速度 -->
    <div class="flex">
      <div v-if="groundSpeed" class="plane-mode p-l-5 p-r-5 mc mac">
        <font class="plane-mode-text">{{ groundSpeed }}米/秒</font>
      </div>
      <div class="tag flex mac mc iconfont icon-sudu">
      </div>
    </div>
    <!-- 飞机载重 钩子状态 -->
    <div class="flex">
      <div v-if="loadweight" class="plane-mode p-l-5 p-r-5 mc mac">
        <font class="plane-mode-text" v-if="hookstatus || loadweight">
          {{ hookstatus || '' }} {{ loadweight ? loadweight + '克' : '' }}
        </font>
      </div>
      <div class="tag flex mac mc iconfont icon-mianxingdiaogou">
      </div>
    </div>
  </div>

</template>

<script>

export default {
  name: 'PlaneStatus',
  data () {
    return {
      /* 心跳 */
      heartAnimation: false // 控制心跳动画图标
    }
  },
  props: {
    plane: {
      type: Object,
      deep: true
    }
  },
  components: {
  },
  computed: {
    // 飞机在线状态
    online () {
      if (this.plane && this.plane.planeState) {
        return this.plane.planeState.online
      }
      return false
    },
    // 心跳随机数
    heartRandom () {
      if (this.plane && this.plane.planeState) {
        return this.plane.planeState.heartRandom
      }
      return null
    },
    heartIconClass () {
      if (!this.online) {
        return 'icon-xinsui offline'
      }
      return this.heartAnimation ? 'icon-heart online' : 'icon-heart1 online'
    },
    usefulHeartClass () {
      return this.online && this.plane.planeState.heartBeat ? 'useful-heart' : ''
    },
    // 解锁状态
    isUnlock () {
      if (this.plane && this.plane.planeState) {
        return this.plane.planeState.isUnlock
      }
      return false
    },
    // 飞机模式
    getPlaneMode () {
      if (this.plane && this.plane.planeState) {
        return this.plane.planeState.getPlaneMode
      }
      return null
    },
    // 卫星数
    satCount () {
      if (this.plane && this.plane.planeState) {
        return this.plane.planeState.satCount
      }
      return null
    },
    // 定位状态
    fixType () {
      if (this.plane && this.plane.planeState) {
        return this.plane.planeState.fixType
      }
      return null
    },
    // 电池电压
    voltagBattery () {
      if (this.plane && this.plane.planeState) {
        return this.plane.planeState.voltagBattery
      }
      return null
    },
    // 电池电流
    currentBattery () {
      if (this.plane && this.plane.planeState) {
        if (Number(this.plane.planeState.currentBattery) > 0) {
          return this.plane.planeState.currentBattery
        } else {
          return 0
        }
      }
      return null
    },
    // 飞机高度
    positionAlt () {
      if (this.plane && this.plane.planeState && this.plane.planeState.position.length > 0) {
        const posLen = this.plane.planeState.position.length
        return this.plane.planeState.position[posLen - 1][2]
      }
      return null
    },
    // 飞机对地速度
    groundSpeed () {
      if (this.plane && this.plane.planeState) {
        return this.plane.planeState.groundSpeed
      }
      return null
    },
    // 钩子状态
    hookstatus () {
      if (this.plane && this.plane.planeState) {
        return this.plane.planeState.hookstatus
      }
      return null
    },
    // 飞机载重
    loadweight () {
      if (this.plane && this.plane.planeState) {
        return this.plane.planeState.loadweight
      }
      return null
    }
  },
  watch: {
    heartRandom: {
      handler () {
        // 心跳动画
        this.heartAnimation = true
        setTimeout(() => {
          this.heartAnimation = false
        }, 500)
      }
    }
  },
  methods: {

  },
  created () {
  },
  destroyed () {
  }

}
</script>

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

.mainBox {
  position: absolute;
  width: 29px;
  top: 40px;
  left: 10px;
  z-index: 90;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  background-color: white;
  border-radius: 4px;
}

.mainBox .flex:not(:first-child) {
  border-top: 1px solid #ddd;
}

.tag {
  height: 29px;
  min-width: 29px;
  cursor: pointer;
  border: 0;
  font-size: 22px;
}

.plane-mode {
  position: absolute;
  left: 29px;
  height: 29px;
  display: flex;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  background-color: rgba(255, 255, 255, 0.5);
}

.plane-mode-text {
  display: inline-block;
  white-space: nowrap;
  /* 防止内容换行 */
}

.useful-heart {
  color: $success-color;
}
</style>
