<script setup lang="ts">
import { useRouter } from 'vue-router';
import RightTabs from '@/pages/System/Info/components/RightTabs.vue';
import { getStoreData } from '@/utils/composition';
import { ref, computed } from 'vue';
import { ITabList } from '@/model/System/power-interface';
import { ENERGY_PAGE_ENABLED } from '@/model/configure';
const $router = useRouter();
const powPreSupport = computed(() => getStoreData('loct', 'powprespt'));
const multihost = computed(() => getStoreData('loct', 'multihost'));
const powerSupplySupported = computed(() => getStoreData('loct', 'powerSupplySupported'));
const powerConverterSupported = computed(() => getStoreData('loct', 'powerConverterSupported'));
// tab信息
let tabList = [
  {
    index: '0',
    label: 'POWER_INFO',
    router: '/navigate/system/power/info',
    id: 'powerInfoTab',
  },
  {
    index: '1',
    label: 'POWER_CONVERTER',
    router: '/navigate/system/power/converter',
    id: 'powerConverterTab',
  },
  {
    index: '2',
    label: 'POWER_CAPPING',
    router: '/navigate/system/power/capping',
    id: 'powerCappingTab',
  },
  {
    index: '3',
    label: 'POWER_CONTORL',
    router: '/navigate/system/power/control',
    id: 'powerControlTab',
  },
];
let checkTabIndex = '';
const showTabList = ref<ITabList[]>([]);
function getInitTableList() {
  if (multihost.value) {
    let tab = tabList.find(v => v.id === 'powerControlTab');
    tab.id = 'multiControlTab';
    tab.router = '/navigate/system/power/multi-control';
  }
  const dynamicEnergySavingSupported = getStoreData('loct', 'dynamicEnergySavingSupported');
  if (powPreSupport.value && ENERGY_PAGE_ENABLED) {
    tabList.push({
      index: '4',
      label: 'POWER_ENERGY',
      router: '/navigate/system/power/energy',
      id: 'powerEnergyTab',
    });
  }
  if (dynamicEnergySavingSupported && ENERGY_PAGE_ENABLED) {
    tabList.push({
      index: '6',
      id: 'energySavingTab',
      label: 'BIOS_ENERGY_SAVING',
      router: '/navigate/system/power/energy-saving',
    });
  }
  if (getStoreData('loct', 'powerSourceSwitchSupported')) {
    tabList.push({ 
      index: '7',
      label: 'SYSTEM_POWER_SUPPLY_MODE',
      router: '/navigate/system/power/psumode',
      id: 'powerSupplyModeTab',
    });
  }
  if (!powerSupplySupported.value && !powerConverterSupported.value) {
    tabList.splice(0, 2);
  } else if (powerSupplySupported.value && !powerConverterSupported.value) {
    tabList.splice(1, 1);
  } else if (!powerSupplySupported.value && powerConverterSupported.value) {
    tabList.splice(0, 1);
  } else {
  }
  if (!ENERGY_PAGE_ENABLED) {
    let tabIndex = tabList.findIndex(v => v.id === 'powerCappingTab'); 
    if (tabIndex !== -1) {
      tabList.splice(tabIndex, 1);
    }
  }
  checkTabIndex = tabList[0].index;
  showTabList.value = tabList;
}

getInitTableList();
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="info-box">
    <!-- tab切换区域 -->
    <RightTabs
      id="powerTabs"
      :check-tab-index="checkTabIndex"
      :tab-list="showTabList"
      @handle-select="handleSelect"
    />
    <router-view />
  </div>
</template>

<style lang="scss" scoped>
.page-box {
  background-color: var(--o-bg-color-base);
  border-radius: 4px;
  padding: 8px 8px 24px 24px;
  margin-right: 24px;
}
</style>
