<template>
  <div>
    <MMCDataTransferPanel class="data-panel" :device="uav || {}" :uav-data="uavRealTimeData"></MMCDataTransferPanel>
    <ControlLeft></ControlLeft>
    <ControlBottom isHangar></ControlBottom>
    <ControlRight></ControlRight>
  </div>
</template>

<script>
import ControlLeft from "./components/controlLeft";
import ControlBottom from "../../../uavApplications/components/controlPanel/components/controlBottom";
import ControlRight from "./components/controlRight";
import { mapState } from "vuex";

export default {
  name: "HangarControlPanel",
  components: {
    ControlLeft,
    ControlBottom,
    ControlRight,
  },
  computed: {
    ...mapState("MMCFlightControlCenter/uav", ["uavRealTimeData", "uav"]),
  },
};
</script>

<style lang="scss" scoped>
.data-panel {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 100;
}
</style>