<template>
  <div class="h-screen bg-app-bg flex flex-col overflow-hidden">
    <div class="flex-grow overflow-auto">
      <router-view />
    </div>
    <TabBar :list="tabList" :activeTabRouteName="activeTabRouteName" class="flex-shrink-0" />
    <div class="h-4 flex-shrink-0"></div>
  </div>
</template>

<script lang="ts">
import { eRole } from "@/types/roleType";
import { getUserMsg } from "@/utils/userMsg";
import { isReviewMode } from "@/utils/vueAppEnv";
import { defineComponent } from "vue";
import TabBar from "./Components/TabBar/index.vue";
import tabList from "./tabList";

export default defineComponent({
  components: {
    TabBar,
  },
  mounted() { },
  computed: {
    activeTabRouteName() {
      return this.$route.name;
    },
    tabList() {
      const theTabList = tabList.filter(i => {
        if(isReviewMode()){
          return !i.hideInReviewMode
        }else{
          return true;
        }
      })
      const user = getUserMsg()
      return (user && theTabList.filter(i => i.roles.includes(user.role2))) || theTabList.filter(i => i.showNotLogin);
    },
  },
});
</script>

<style>
</style>