<template>
  <!-- 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 />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { onBeforeRouteUpdate, useRouter } from 'vue-router';
import { getStoreData } from '@/utils/composition';
import { computed } from 'vue';

const kvmSupported = computed(() => {
  return getStoreData('loct', 'kvmspt');
});
const customerType = ref(getStoreData('loct', 'customerType'));
const $router = useRouter();
let checkTabIndex = ref('');
let commonList = [
  {
    index: '1',
    label: 'ALARM_REPORT_SYSLOG',
    router: '/navigate/maintenance/report/syslog',
    id: 'syslogId',
    show: true,
  },
  {
    index: '2',
    label: 'ALARM_REPORT_EMAIL',
    router: '/navigate/maintenance/report/email',
    id: 'emailId',
    show: true,
  },
  {
    index: '3',
    label: 'ALARM_REPORT_TRAP',
    router: '/navigate/maintenance/report/trap',
    id: 'trapId',
    show: true,
  }
];

const dbTabList = [
    {
    index: '1',
    label: 'ALARM_REPORT_SYSLOG',
    router: '/navigate/maintenance/report/syslogdb',
    id: 'syslogDBId',
    show: true,
  },
  {
    index: '2',
    label: 'ALARM_REPORT_EMAIL',
    router: '/navigate/maintenance/report/email',
    id: 'emailId',
    show: true,
  },
  {
    index: '3',
    label: 'ALARM_REPORT_TRAP',
    router: '/navigate/maintenance/report/trap',
    id: 'trapId',
    show: true,
  }
];
const tabList = ref([] as any[]);

if (customerType.value === 'ByteDance') {
  tabList.value = kvmSupported.value ? dbTabList : dbTabList.splice(0,2);
} else {
  tabList.value = kvmSupported.value ? commonList : commonList.splice(0,2);
}

let currentRoute = $router.currentRoute.value.fullPath;
// 隐藏裁剪syslog页面
tabList.value = tabList.value.filter(item => item.show);
const currentTabItem = tabList.value.find(item => {
  return item.router === currentRoute;
});
if (currentTabItem) {
  checkTabIndex.value = currentTabItem.index;
}

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

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

<style lang="scss" scoped>
.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>
