<template>
  <el-tabs v-model="activeTab">
    <el-tab-pane
      v-for="tab in tabs"
      :key="tab.name"
      :label="`${tab.label}(${resultCount[tab.name] || 0})`"
      :name="tab.name"
    >
      <SearchResults
        v-model:current-page="currentPage"
        :search-items="searchItems"
        :category="tab.name === 'all' ? undefined : tab.name"
      />
    </el-tab-pane>
  </el-tabs>
</template>

<script setup lang="ts">
  const props = defineProps<{
    // resultCount: Record<string, number>;
    searchItems: SearchItemView[];
  }>();

  const tabs = [
    { name: 'all', label: $t('all') },
    { name: 'product', label: $t('search.sections.product') },
    { name: 'solution', label: $t('search.sections.solution') },
    { name: 'question', label: $t('search.sections.faq') },
    { name: 'document', label: $t('search.sections.document') },
  ];

  const resultCount = computed(() => {
    const map: Record<string, number> = { all: props.searchItems.length };
    for (const item of props.searchItems) {
      map[item.sectionType] = (map[item.sectionType] ?? 0) + 1;
    }
    return map;
  });

  // 分类控制
  const activeTab = ref('all');

  // 分页控制
  const currentPage = ref(1);

  watch(activeTab, () => {
    currentPage.value = 1; // 重置页码
  });
</script>
