<template lang="">
  <div class="nest_info_maxBox">
    <div class="infoBox cf">
      <div class="dib title">
        {{ uavData.relativeAlt }}
      </div>
      m
      <div class="cf infor">飞行高度</div>
    </div>
    <div class="infoBox  cf">
      <div class="dib title">
        {{ uavData.absoluteAlt }}
      </div>
      m
      <div class="cf">海拔高度</div>
    </div>
    <div class="infoBox cf">
      <div class="dib title">
        {{ uavData.flyDistance }}
      </div>
      m
      <div class="cf">飞行里程</div>
    </div>

    <div class="infoBox cf">
      <div class="dib title">
        {{ uavData.distanceToHome }}
      </div>
      m
      <div class="cf">起点距离</div>
    </div>
    <div class="infoBox cf">
      <div class="dib title">
        {{ uavData.flyTime  }}
      </div>
      min
      <div class="cf">飞行时间</div>
    </div>
    <div class="infoBox cf">
      <div class="dib title">
        {{uavData.groundSpeed }}
      </div>
      m/s
      <div class="cf">飞行速度</div>
    </div>
    <div class="infoBox cf">
      <div class="dib title" :style="up ? 'color: #ff2626':'color: #00f5ff'">
        {{ uavData.velocityZ }}
      </div>
      m/s
      <div class="cf">爬升率</div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    uavData: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      // stationType:0
      up: false,
    };
  },
  watch: {
    uavData: function (val, old) {
      if (!val) {
        return;
      }
      // console.log(vla,'uavDatauavDatauavDatauavData');
      if (val.velocityZ > 0 || val.climbRate > 0) {
        this.up = true;
      } else {
        this.up = false;
      }
    },
    // device: function(val){
    //     this.stationType = val.stationType
    // }
  },
  mounted() {
    // this.stationType = this.device.stationType
  },
};
</script>
<style lang="scss" scoped>
.dib {
  display: inline-block;
}
.nest_info_maxBox {
  width: 550px;
  height: 78px;
  display: flex;
  justify-content: space-around;

  .infoBox {
    text-align: center;
    margin-top: 22px;
    width: 100px;
    color: #fff;
    line-height: 18.4px;

    .title {
      font-family: UniDreamLED;
      font-size: 20px;
      color: #00f5ff;
      letter-spacing: 0;
      font-weight: 400;
    }
  }
}
</style>
