<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"]),
  },
  beforeDestroy() {
    this.$store.commit('MMCFlightControlCenter/setState', {
      key: 'listCollapse',
      value: false
    })
    if (this.uav) {
      this.$store.dispatch("MMCFlightControlCenter/uav/unsubscribe");
    }
    if (this.hangar) {
      this.$store.dispatch("MMCFlightControlCenter/hangar/unsubscribe");
    }
    this.$store.dispatch('MMCFlightControlCenter/uav/end');
  },
};
</script>

<style>
</style>