<template>
  <TypeLine
    scene="xm-tab"
    title=""
    storage-key="project-active-cat"
    default-category="info"
    :categories="xmCategories"
  />
</template>

<script setup lang="ts">
import { computed, defineAsyncComponent, markRaw } from 'vue'
import { useI18n } from 'vue-i18n'
import TypeLine from '@/layout/typeLine.vue'
const { t } = useI18n()
const infoView = markRaw(defineAsyncComponent(() => import('@/features/xm/components/info.vue')))
const scaleInfoView = markRaw(defineAsyncComponent(() => import('@/features/xm/components/xmInfo.vue')))
const htView = markRaw(defineAsyncComponent(() => import('@/features/ht/components/Ht.vue')))
const consultCategoryFactorView = markRaw(
  defineAsyncComponent(() => import('@/features/xm/components/XmConsultCategoryFactor.vue'))
)
const majorFactorView = markRaw(
  defineAsyncComponent(() => import('@/features/xm/components/XmMajorFactor.vue'))
)

const xmCategories = computed(() => [
  { key: 'info', label: t('xmCard.categories.info'), component: infoView },
  { key: 'scale-info', label: t('xmCard.categories.scaleInfo'), component: scaleInfoView },
  // { key: 'consult-category-factor', label: t('xmCard.categories.consultCategoryFactor'), component: consultCategoryFactorView },
  // { key: 'major-factor', label: t('xmCard.categories.majorFactor'), component: majorFactorView },
  { key: 'contract', label: t('xmCard.categories.contract'), component: htView }
])
</script>
