<script setup>
import TabsCom from '@/components/Tabs/index.vue'
import List from './components/List/index.vue'
// import { useTextReport } from './hooks/text'

// import List1 from './components/List/index.vue'
// import List2 from './components/List/index.vue'
// import List3 from './components/List/index.vue'

// const tabs = [
//   { name: 'YH', component: List },
//   { name: 'SC', component: List },
//   { name: 'PS', component: List },
// ]
const props = defineProps({
  tabs: {
    type: Array,
    default: () => [],
  },
})

// const tabs = ref([])
// onMounted(() => {})
// const { getTextConfigs } = useTextReport()

const tabs = computed(() => {
  const tabConfig = props.tabs.map(tab => {
    const tabTitle = h(
      'div',
      {
        class: 'text-xl flex items-center gap-1 justify-center',
      },
      [
        h('img', {
          src: `/images/icons/text/${tab.name}.png`,
          style: {
            width: '16px',
            height: '16px',
            // marginLeft: '8px',
          },
        }),
        h('span', {}, tab.name),
      ]
    )

    return { ...tab, name: tabTitle, component: List }
  })
  return tabConfig
})
</script>

<template>
  <tabs-com :tabs="tabs"> </tabs-com>
  <!-- <n-tabs class="h-full w-full">
    <n-tab-pane
      class="overflow-auto"
      v-for="tab in tabs"
      :key="tab"
      :name="tab"
      :tab="tab"
    >
      <List :tab="tab" />
    </n-tab-pane>
  </n-tabs> -->
</template>

<style scoped lang="scss"></style>
