<template>
  <section class="mainContent">
    <ai-nav-tab :fixed="homePage" :routes="routes"/>
    <router-view v-if="refresh"/>
  </section>
</template>

<script>
import {mapState} from "vuex";

export default {
  name: "mainContent",
  computed: {
    ...mapState(['user', 'homePage']),
    routes: v => v.user.info?.menuSet?.map(e => ({...e, label: e.name, name: e.id}))
  },
  watch: {
    $route(v, old) {
      if (v.meta == old.meta && v.fullPath != old.fullPath) {
        this.refresh = false
        this.$nextTick(() => this.refresh = true)
      }
    }
  },
  data() {
    return {
      refresh: true
    }
  }
}
</script>

<style lang="scss" scoped>
.mainContent {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}
</style>
