<template>
  <drawer v-if="isMobile" v-model="drawerOpen">
    <side-menu
      :menu-data="defaultLayout.menuData"
      :theme="theme.mode"
      :collapsed="false"
      :collapsible="false"
      @menuSelect="onMenuSelect"
    />
  </drawer>
  <side-menu
    v-else-if="layout === 'side' || layout === 'mix'"
    :class="[fixedSideBar ? 'fixed-side' : '']"
    :menu-data="defaultLayout.sideMenuData"
    :collapsed="defaultLayout.collapsed"
    :theme="theme.mode"
    :collapsible="true"
  />
</template>

<script>
import { mapState, mapMutations, mapGetters } from "vuex";
import Drawer from "@/components/tool/Drawer";
import SideMenu from "./SideMenu";

export default {
  components: { SideMenu, Drawer },
  inject: ["defaultLayout"],
  data() {
    return {
      minHeight: window.innerHeight - 64,
      drawerOpen: false,
    };
  },
  computed: {
    ...mapState("setting", [
      "isMobile",
      "theme",
      "layout",
      "fixedHeader",
      "fixedSideBar",
      "fixedTabs",
      "hideSetting",
      "multiPage",
    ]),
  },
  watch: {
    isMobile(val) {
      if (!val) {
        this.drawerOpen = false;
      }
    },
    drawerOpen(val) {
      if (val && this.defaultLayout.collapsed) {
        this.defaultLayout.toggleCollapse(false);
      }
    },
  },
  methods: {
    ...mapMutations(["setActivatedFirst"]),
    onMenuSelect() {
      this.defaultLayout.toggleCollapse();
    },
  },
};
</script>

<style lang="less" scoped>
@import (optional, once) "@/theme";
.app {
  .side-menu {
    &.fixed-side {
      position: fixed;
      height: 100vh;
      left: 0;
      top: 0;
      z-index: 1;
    }
  }
}
</style>
