<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-9 flex-shrink-0 flex items-center justify-center"
      @click="handleClickOpen"
    >
      <div
        class="flex-grow ml-7 mr-2.5 border-b border-app-gray opacity-50"
      ></div>
      <a class="text-app-gray text-xs">浙ICP备2021029429号-1</a>
      <div
        class="flex-grow ml-2.5 mr-7 border-b border-app-gray opacity-50"
      ></div>
    </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() {},
  methods: {
    handleClickOpen() {
      window.open("https://beian.miit.gov.cn");
    },
  },
  computed: {
    activeTabRouteName() {
      return this.$route.meta.activeTab;
    },
    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>
