<script lang="ts" setup>
import RightTabs from '@/components/RightTabs/RightTabs.vue';
import { certificateListMenu } from '@/apps/app-bmc/store/menu-list';
import { useRouter, onBeforeRouteUpdate } from 'vue-router';
import { checkPrivil } from '@/apps/app-bmc/router/routes';
import { UserPrivil } from '@/model/base-enum';

const $router = useRouter();

let checkTabIndex = '1';
let tabList = [...certificateListMenu];

// 用户配置权限
const userConfig = checkPrivil(UserPrivil.userConfig);
if (!userConfig) {
  tabList.splice(3, 1);
}

let currentRoute = $router.currentRoute.value.fullPath;
const currentTabItem = tabList.find(item => {
  return item.router === currentRoute;
});
if (currentTabItem) {
  checkTabIndex = currentTabItem.index;
}

const handleSelect = (key: any) => {
  let res = tabList.find(item => {
    return item.index === key;
  });
  if (res) {
    $router.push(res.router);
  }
};

onBeforeRouteUpdate((to: any) => {
  tabList.forEach((item: any) => {
    if (item.router === to.path) {
      checkTabIndex = item.index;
      return;
    }
  });
});

</script>

<template>
  <div class="certificate-box">
    <!-- tab切换区域 -->
    <el-menu
      :default-active="checkTabIndex"
      class="el-menu-report"
      mode="horizontal"
      @select="handleSelect"
    >
      <el-menu-item v-for="item in tabList" :id="item.id" :key="item.label" :index="item.index">
        {{ $t(item.label) }}
      </el-menu-item>
    </el-menu>
    <router-view class="cerBox" />
  </div>
</template>

<style lang="scss" scoped>
.certificate-box {
  flex: 1;
  padding-right: 24px;
  display: flex;
  flex-direction: column;
}
.cerBox{
  height: calc(100% - 96px);
}
.el-menu-report {
  background-color: transparent;
  margin-bottom: 16px;
  height: 32px !important;
  .el-menu-item {
    color: var(--o-text-color-secondary);
    font-size: 14px;
    padding: 0;
    margin-right: 32px;
    background-color: rgba(0, 0, 0, 0) !important;
    font-weight: 600;
    &.is-active {
      color: var(--o-color-primary) !important;
      border-bottom: 2px solid var(--o-color-primary) !important;
    }

    &:hover {
      color: var(--o-color-primary-secondary) !important;
      background-color: rgba(0, 0, 0, 0);
    }
  }
}
</style>
