<template>
  <div class="throttle-gauge">
    <PositionBall class="ball" :uav-data="uavData" />
    <ThrottleValue :value="throttleValue" style="position: absolute; left: -70px; top: -70px;"></ThrottleValue>
    <img class="img1" src="../../assets/ball2.png" />
    <img class="img2" src="../../assets/ball2.png" />
  </div>
</template>

<script>
import PositionBall from "../ball/index";
import ThrottleValue from "../throttleValue";

export default {
  name: "throttleGauge",
  components: {
    PositionBall,
    ThrottleValue,
  },
  props: {
    uavData: {
      type: Object,
      default() {
        return {};
      },
    },
    throttleValue: {
      type: Number,
      default: 0,
    },
  },
};
</script>

<style scoped>
.throttle-gauge {
  position: relative;
  z-index: 1;
}

.img1 {
  position: absolute;
  left: -11px;
  top: 34px;
  width: 8px;
  height: 9px;
  z-index: 9999;
  transform: rotate(110deg);
}
.img2 {
  position: absolute;
  left: -7px;
  top: 36px;
  width: 8px;
  height: 9px;
  z-index: 9999;
  transform: rotate(-67deg);
}
</style>