<template>
  <div>
    <List></List>
    <ControlPanel v-if="hangar && showPanel"></ControlPanel>
  </div>
</template>

<script>
import { mapState } from "vuex";
import List from "./components/list";
import ControlPanel from "./components/controlPanel";
import linkFusion from "./mixins/linkFusion";

export default {
  name: "Hangar",
  mixins: [linkFusion],
  components: {
    List,
    ControlPanel,
  },
  data() {
    return {};
  },
  computed: {
    ...mapState("MMCFlightControlCenter/hangar", ["showPanel", "hangar"]),
    ...mapState("MMCFlightControlCenter/uav", ["uav", "uavRealTimeData"]),
  },
  watch: {
    "uavRealTimeData.isFlying"(newVal, oldVal) {
      // 监听飞机降落然后进行任务结束的提示
      if (oldVal === true && newVal === false) {
        if (!this.uav.deviceId.includes("mock")) {
          this.$alert("当前任务已结束", "提示", {
            type: "success ",
            confirmButtonText: "确定",
            callback: (action) => {},
          });
          setTimeout(() => {
            const dialog = document.querySelector(".el-message-box__wrapper");
            if (dialog) {
              const closeButton = dialog.querySelector(".el-button");
              if (closeButton) {
                closeButton.click();
              }
            }
          }, 3000);
        }
      }
    },
  },
  beforeDestroy() {
    this.$store.commit("MMCFlightControlCenter/setState", {
      key: "listCollapse",
      value: false,
    });
  },
};
</script>

<style>
</style>