<template>
  <div class="api-reference-container">
    <!-- 顶部标题+搜索栏 -->
    <div class="header-bar">
      <div class="main-title">{{ mainTitle }}</div>
      <div v-if="showFilter" class="filter-wrap">
        <span class="filter-label">过滤</span>
        <input
            v-model="filterKeyword"
            class="filter-input"
            placeholder="搜索内容"
        />
      </div>
    </div>

    <!-- 各个大分组：全局API、组合式API -->
    <div class="group-wrapper" v-for="group in filteredGroupList" :key="group.groupTitle">
      <div class="group-title">{{ group.groupTitle }}</div>
      <div class="card-row">
        <!-- 子卡片 -->
        <div class="sub-card" v-for="card in group.list" :key="card.subTitle">
          <div class="sub-title">{{ card.subTitle }}</div>
          <RouteLink
              class="item-line"
              v-for="item in card.items"
              :key="item.link"
              :to="item.link"
          >
            {{ item.name }}
          </RouteLink>
        </div>
      </div>
      <hr class="group-divider" />
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { RouteLink } from 'vuepress/client'

const props = defineProps({
  mainTitle: {
    type: String,
    required: true,
    default: 'API 参考'
  },
  pageData: {
    type: Array,
    required: true,
    default: () => []
  },
  showFilter: {
    type: Boolean,
    default: false
  }
})

const filterKeyword = ref('')

// 搜索过滤逻辑：匹配分组标题、子卡片标题、条目名称
const filteredGroupList = computed(() => {
  if (!filterKeyword.value) return props.pageData
  const kw = filterKeyword.value.toLowerCase()
  return props.pageData
      .map(group => {
        const filteredCards = group.list
            .map(card => {
              const matchItems = card.items.filter(i => i.name.toLowerCase().includes(kw))
              const cardMatch = card.subTitle.toLowerCase().includes(kw)
              return {
                ...card,
                items: cardMatch ? card.items : matchItems
              }
            })
            .filter(card => card.items.length > 0 || card.subTitle.toLowerCase().includes(kw))
        return { ...group, list: filteredCards }
      })
      .filter(g => g.list.length > 0 || g.groupTitle.toLowerCase().includes(kw))
})
</script>

<style scoped>
.api-reference-container {
  width: 100%;
  margin: 16px 0;
}
.header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.main-title {
  width: 100%;
  font-size: 32px;
  font-weight: 600;
  color: #1f2937;
  padding-bottom: 40px;
  margin: 20px 0;
  border-bottom: 1px solid #e7e7e7;
}
.filter-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.filter-label {
  color: #6b7280;
  font-size: 15px;
}
.filter-input {
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 6px 10px;
  width: 180px;
  font-size: 15px;
}
.filter-input:focus {
  outline: none;
  border-color: #3eaf7c;
  box-shadow: 0 0 0 2px rgba(62, 175, 124, 0.15);
}

.group-title {
  font-size: 22px;
  font-weight: 600;
  color: #1f2937;
  margin: 24px 0 14px;
}
.card-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.sub-card {
  background: #f7f8f9;
  border-radius: 8px;
  padding: 18px 20px;
  min-width: 240px;
  flex: 1;
  max-width: calc(33% - 12px);
}
.sub-title {
  color: #3eaf7c;
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 12px;
}
.item-line {
  display: block;
  color: #334155;
  font-size: 15px;
  line-height: 1.7;
  margin: 4px 0;
  text-decoration: none;
}
.item-line:hover {
  color: #3eaf7c;
}
.group-divider {
  border: none;
  border-top: 1px solid #e5e7eb;
  margin: 28px 0;
}
</style>
