<script lang="ts" setup>
import RightTabs from '@/components/RightTabs/RightTabs.vue';
import { securityMenu } from '@/apps/app-bmc/store/menu-list';
import { useRouter } 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 = [...securityMenu];

// 用户配置权限
const userConfig = checkPrivil(UserPrivil.userConfig);
if (!userConfig) {
  tabList.splice(2, 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);
  }
};
</script>

<template>
  <div class="securty-box">
    <!-- tab切换区域 -->
    <RightTabs
      :id="'securityTabs_list'"
      :check-tab-index="checkTabIndex"
      :tab-list="tabList"
      @handle-select="handleSelect"
    />
    <router-view />
  </div>
</template>

<style lang="scss" scoped>
.securty-box {
  flex: 1;
  padding-right: 24px;
  display: flex;
  flex-direction: column;
  :deep(.el-menu) {
    flex: 0 0 auto;
  }
}
</style>
