<template lang="">
  <div class="nest_info_maxBox">
    <div class="infoBox cf">
      <div class="dib title">
        {{ _uavData.gps.relativeAlt }}
      </div>
      m
      <div class="cf infor">{{ $t('common.飞行高度') }}</div>
    </div>
    <div class="infoBox  cf">
      <div class="dib title">
        {{ _uavData.gps.absoluteAlt }}
      </div>
      m
      <div class="cf">{{ $t('common.海拔高度') }}</div>
    </div>
    <div class="infoBox cf">
      <div class="dib title">
        {{ _uavData.flyDistance }}
      </div>
      m
      <div class="cf">{{ $t('common.飞行里程') }}</div>
    </div>

    <div class="infoBox cf">
      <div class="dib title">
        {{ _uavData.distanceToHome }}
      </div>
      m
      <div class="cf">{{ $t('common.起点距离') }}</div>
    </div>
    <div class="infoBox cf">
      <div class="dib title">
        {{ flyTimeFormat  }}
      </div>
      <div class="cf">{{ $t('common.飞行时间') }}</div>
    </div>
    <div class="infoBox cf">
      <div class="dib title">
        {{_uavData.groundSpeed }}
      </div>
      m/s
      <div class="cf">{{ $t('common.飞行速度') }}</div>
    </div>
    <div class="infoBox cf">
      <div class="dib title" :style="up ? 'color: #ff2626':'color: #00f5ff'">
        {{ _uavData.velocityZ }}
      </div>
      m/s
      <div class="cf">{{ $t('common.爬升率') }}</div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    uavData: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      up: false,
    };
  },
  computed: {
    _uavData() {
      return {
        ...this.uavData,
        gps: {
          relativeAlt: Number(this.uavData?.gps?.relativeAlt || 0).toFixed(0),
          absoluteAlt: Number(this.uavData?.gps?.absoluteAlt || 0).toFixed(0),
        },
        flyDistance: Number(this.uavData?.flyDistance || 0).toFixed(0),
        distanceToHome: Number(this.uavData?.distanceToHome || 0).toFixed(0),
        flyTime: Number(this.uavData?.flyTime || 0).toFixed(0),
        groundSpeed: Number(this.uavData?.groundSpeed || 0).toFixed(0),
        velocityZ: Number(this.uavData?.velocityZ || 0).toFixed(0),
      };
    },
    flyTimeFormat() {
      return this.convertMillisecondsToTime(this._uavData.flyTime);
    },
  },
  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
  },
  methods: {
    convertMillisecondsToTime(ms) {
      const seconds = Math.floor((ms / 1000) % 60);
      const minutes = Math.floor((ms / (1000 * 60)) % 60);
      const hours = Math.floor((ms / (1000 * 60 * 60)) % 24);

      const formattedTime = `${hours.toString().padStart(2, "0")}:${minutes
        .toString()
        .padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;

      return formattedTime;
    },
  },
};
</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>
