<!-- 飞控新版鹰视1027 -->
<template>
  <div class="nest_controlBox">
    <throttleGauge :uavData="uavData" :throttleValue="throttleValue" style="transform: translateX(35px);"></throttleGauge>
    <div class="nest_control">
      <Info class="" :uav-data="uavData" :wsShow="wsShow" :isM300="device.goodsName == 'M300'"></Info>
      <div class="xian" v-if="!device.goodsName == 'M300'"></div>
      <battery v-if="uavBattery" :uav-battery="uavBattery" :device="device"></battery>
    </div>
    <obstacle :uav-data="uavData" style="transform: translateX(-35px);"></obstacle>
  </div>
</template>
<script>
import throttleGauge from './components/throttleGauge';
import Info from "./components/info/index";
import battery from "./components/battery/index";
import obstacle from "./components/obstacle";

export default {
  name: 'MMCDataTransferPanel',
  data() {
    return {};
  },
  props: {
    uavData: {
      type: Object,
      default: () => ({})
    },
    uavBattery: {
      type: Object,
      default: () => ({})
    },
    throttleValue: {
      type: Number,
      default: 0
    },
    device: {
      type: Object,
      default: () => ({})
    },
    wsShow: {
      type: Boolean,
      default: () => {
        false;
      }
    }
  },
  components: { Info, battery, obstacle, throttleGauge },
  mounted(){
  },
  computed: {
    props_obj() {
      let { data } = this;
    }
  }
};
</script>
<style scoped lang="scss">
.nest_controlBox {
  position: relative;
  height: 200px;
  display: flex;
  justify-content: start;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  .nest_control {
    display: flex;
    align-items: center;
    background: rgba(9, 32, 87, 0.7);
    padding: 0 50px;
  }
  
}
.xian {
  width: 0.3px;
  height: 72px;
  border: 0.5px solid;
  border-image: linear-gradient(
      180deg,
      rgba(112, 218, 249, 0),
      rgba(112, 218, 249, 1),
      rgba(112, 218, 249, 0)
    )
    2 2;
  margin: 10px 10px 0 0;
}
</style>