<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", ["uavRealTimeData"]),
  },
  watch: {
    'uavRealTimeData.isFlying'(newVal, oldVal){
      // 监听飞机降落然后进行任务结束的提示
      if(oldVal === true && newVal === false){
        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>