<script lang="ts" setup>
import RightTabs from '@/pages/System/Info/components/RightTabs.vue';
import { reactive, computed } from 'vue';
import { useRouter } from 'vue-router';
import { getStoreData } from '@/utils/composition';

const $router = useRouter();
const unitsSupport = computed(() => getStoreData('loct', 'unitspt'));
const isMultihost = getStoreData('loct', 'multihost');

let checkTabIndex = '1';
let tabList = reactive([
  {
    index: '1',
    label: 'SYSINFO_ASSET_SUMMARY',
    router: '/navigate/system/info/product',
    id: 'systemInfoProduct',
  },
  {
    index: '2',
    label: 'HOME_PROCESSOR',
    router: '/navigate/system/info/processor',
    id: 'systemInfoProcessor',
  },
  {
    index: '3',
    label: 'SYSINFO_MEMORY',
    router: '/navigate/system/info/memory',
    id: 'systemInfoMemory',
  },
  {
    index: '4',
    label: 'COMMON_NETWORK',
    router: '/navigate/system/info/net',
    id: 'systemInfoNic',
  },
  {
    index: '5',
    label: 'THRESHOLD_SENSOR',
    router: '/navigate/system/info/sensor',
    id: 'systemInfoSensor',
  },
  {
    index: '6',
    label: 'SYSINFO_DISCRETE_SENSOR',
    router: '/navigate/system/info/discrete-sensors',
    id: 'discreteInfoSensor',
  },
]);
// 判断信息页面中，只有天池板才添加组件页签
function getInitTableList() {
  if (!isMultihost) {
    tabList.push({
      index: '9',
      label: 'FRU_INFO',
      router: '/navigate/system/info/fru-info',
      id: 'fruInfo'
    });
  }
  if (unitsSupport.value) {
    tabList.push(
      {
        index: '7',
        label: 'SYSINFO_ASSEMBLY',
        router: '/navigate/system/info/units',
        id: 'systemInfoUnits',
      },
      {
        index: '8',
        label: 'SYSINFO_OTHERS',
        router: '/navigate/system/info/others',
        id: 'systemInfoOthers',
      },
    );
  } else {
    tabList.push({
      index: '7',
      label: 'SYSINFO_OTHERS',
      router: '/navigate/system/info/others',
      id: 'systemInfoOthers',
    });
  }
}

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 :check-tab-index="checkTabIndex" :tab-list="tabList" @handle-select="handleSelect" />
    <router-view />
  </div>
</template>

<style lang="scss" scoped>
.info-box {
  height: calc(100% - 115px);
}
</style>
