<template>
  <div>
    <UavList></UavList>
    <Player class="player" ref="player" v-if="showPlayer && uav" @close="onPlayerClose" />
    <ControlPanel v-if="uav && showPanel"></ControlPanel>
  </div>
</template>

<script>
import { mapState } from "vuex";
import UavList from "./components/uavList";
import Player from "./components/player";
import ControlPanel from "./components/controlPanel";
import linkFusion from "./mixins/linkFusion";

export default {
  name: "UavApplications",
  mixins: [linkFusion],
  components: {
    UavList,
    Player,
    ControlPanel,
  },
  inject: ["bus"],
  data() {
    return {
      isFlying: false,
    };
  },
  computed: {
    ...mapState("MMCFlightControlCenter/uav", [
      "uav",
      "showPlayer",
      "showPanel",
      "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);
      }
    },
  },
  created() {},
  mounted() {},
  beforeDestroy() {
    this.$store.commit("MMCFlightControlCenter/setState", {
      key: "listCollapse",
      value: false,
    });
  },
  methods: {
    onPlayerClose() {
      this.$store.commit("MMCFlightControlCenter/uav/setState", {
        key: "uav",
        value: {
          ...this.uav,
          showPlayer: false,
        },
      });
      this.$store.commit("MMCFlightControlCenter/uav/setState", {
        key: "showPlayer",
        value: false,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.player {
  z-index: 1 !important;
}
</style>
