<template>
  <div class="fwgl_container">
    <side-nav-bar
      :nav-list="navList"
      :title-path="navList[0] && navList[0].path"
    ></side-nav-bar>
    <div class="main_container">
      <router-view
        :key="'type_' + $route.params.level + '_' + $route.params.type"
      ></router-view>
    </div>
  </div>
</template>

<script>
import sideNavBar from "@/components/side-nav-bar";
import { mapState } from "vuex";

export default {
  components: {
    sideNavBar,
  },
  data: () => ({
    navList: [],
  }),
  computed: {
    ...mapState({
      fwglNav: "fwglNav",
    }),
  },
  watch: {
    "$route.fullPath"(path) {
      this.initNavList();
    },
  },
  methods: {
    initNavList() {
      let level = parseInt(this.$route.params.level);

      this.navList = this.fwglNav[level].map((item, index) => ({
        name: item,
        path: `/fwgl/${level}/${index}`,
      }));
    },
  },
  mounted() {
    this.initNavList();
  },
};
</script>

<style scoped>
.fwgl_container {
  height: calc(100vh - 84px);
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
}
.side_nav_bar {
  width: 180px;
  flex-shrink: 0;
}
.main_container {
  width: calc(100% - 180px);
  flex-grow: 1;
  flex-shrink: 1;
  background-color: #f6f7fb;
  overflow: auto;
}
</style>
