<template>
  <div>
    <MMCDataTransferPanel class="data-panel" :device="uav" :uav-data="uavRealTimeData"></MMCDataTransferPanel>
    <!-- 一键任务 返航 安全降落 手动 -->
    <ControlBottom></ControlBottom>
    <!-- 健康管理-挂载-警灯-无人机  -->
    <ControlRight></ControlRight>
    <!-- 任务 智能识别 -->
    <ControlLeft></ControlLeft>
    <!-- 顶部信息 -->
    <ControlTop></ControlTop>
  </div>
</template>

<script>
import { mapState } from "vuex";
import Moment from "moment";
import ControlBottom from "./components/controlBottom";
import ControlRight from "./components/controlRight";
import ControlLeft from "./components/controlLeft";
import ControlTop from "./components/controlTop";

export default {
  name: "ControlPanel",
  mixins: ["joystick"],
  components: {
    ControlBottom,
    ControlRight,
    ControlLeft,
    ControlTop,
  },
  data() {
    return {
      device: {
        cateName: "px4",
      },
      throttleValue: 500,
      battery: {
        voltage: 0,
        id: "",
      },
    };
  },
  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>