<template>
  <div class="cpt-observe-nest-params">
    <div class="params-list">
      <div class="params-item" v-for="item in list" :key="item.id">
        <div class="v-box">
          <div class="v">
            {{
              props_obj[item.prop]
                ? item.prop === "flyTime"
                  ? parseInt(props_obj[item.prop])
                  : props_obj[item.prop].toFixed(2)
                : 0
            }}
          </div>
          <div class="unit" :class="{ degree: item.unit === '°' }">
            {{ item.unit }}
          </div>
        </div>
        <div class="k">{{ item.label }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    uavData: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      list: [
        { id: 1, label: "横滚", prop: "roll", unit: "°" },
        { id: 2, label: "俯仰", prop: "pitch", unit: "°" },
        { id: 3, label: "偏航", prop: "yaw", unit: "°" },
        { id: 4, label: "高度", prop: "altitude", unit: "M" },
        { id: 5, label: "飞行时间", prop: "flyTime", unit: "S" },
        { id: 6, label: "飞行里程", prop: "flyDistance", unit: "M" },
        { id: 7, label: "爬升率", prop: "velocityZ", unit: "M/S" },
        { id: 8, label: "速度", prop: "velocityX", unit: "M/S" },
        // { id: 6, label: "水平速度", prop: "xxx", unit: "M/S" },
        // { id: 7, label: "水平距离", prop: "xxx", unit: "KM" },
      ],
    };
  },
  computed: {
    props_obj() {
      let { uavData } = this;
      if (uavData && uavData.attitude && uavData.locationCoordinate3D) {
        return {
          ...uavData.attitude,
          ...uavData.locationCoordinate3D,
          flyDistance: uavData.flyDistance,
          flyTime: uavData.flyTime / 1000,
          velocityX: uavData.velocityX,
          velocityY: uavData.velocityY,
          velocityZ: uavData.velocityZ,
        };
      }
      return {};
    },
  },
};
</script>

<style lang="scss" scoped>
.cpt-observe-nest-params {
  width: 600px;
  height: 70px;
  background: rgba(0, 0, 0, 0.6);
  position: fixed;
  top: 88px;
  left: 50%;
  transform: translateX(-50%);
  .params-list {
    height: 100%;
    display: flex;
    .params-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .v-box {
        display: flex;
        align-items: center;
        margin-bottom: 3px;
        .v {
          font-family: UniDreamLED;
          font-size: 21px;
          color: #08ffff;
          letter-spacing: 0;
          text-align: right;
          font-weight: 400;
          margin-right: 4px;
        }
        .unit {
          font-family: Microsoft YaHei;
          font-size: 12px;
          color: #08ffff;
          letter-spacing: 0;
          text-align: center;
          font-weight: 400;
          margin-top: 3px;
          &.degree {
            margin-top: -18px;
          }
        }
      }
      .k {
        font-family: MicrosoftYaHei;
        font-size: 14px;
        color: #ccedff;
        letter-spacing: 0;
        text-align: center;
        font-weight: 400;
      }
    }
  }
}
</style>
