<template>
  <div class="min-h-screen bg-[#F9FAFB] pb-[calc(160rpx+env(safe-area-inset-bottom))]">
    <!-- Navigation Header -->
    <NavHeader title="资料知识库" />

    <!-- Content Area -->
    <div class="px-[40rpx] mt-[40rpx]">

      <!-- Filter Tabs -->
      <div class="flex overflow-x-auto no-scrollbar mb-[40rpx] space-x-[24rpx]">
        <div v-for="(tab, index) in tabs" :key="index"
          class="px-[32rpx] py-[16rpx] rounded-full text-[28rpx] whitespace-nowrap transition-colors"
          :class="activeTab === index ? 'bg-[#2563EB] text-white' : 'bg-[#F3F4F6] text-[#6B7280]'"
          @click="activeTab = index">
          {{ tab }}
        </div>
      </div>

      <!-- Section Title -->
      <div class="text-[#1F2937] text-[32rpx] font-bold mb-[24rpx]">
        {{ tabs[activeTab] }}
      </div>

      <!-- Product Grid -->
      <div class="flex flex-wrap justify-between">
        <!-- Card Item -->
        <div v-for="(item, index) in filteredProducts" :key="index"
          class="w-[48%] bg-white rounded-[24rpx] overflow-hidden mb-[24rpx] shadow-sm flex flex-col">
          <!-- Image Container -->
          <div class="relative w-full h-[200rpx]">
            <img :src="item.image" class="w-full h-full object-cover bg-gray-100" referrerpolicy="no-referrer" />
            <!-- Tag -->
            <div v-if="item.tag"
              class="absolute top-[12rpx] right-[12rpx] bg-red-500 text-white text-[20rpx] px-[12rpx] py-[4rpx] rounded-full">
              {{ item.tag }}
            </div>
          </div>

          <!-- Content -->
          <div class="p-[20rpx] flex flex-col flex-1">
            <!-- Title -->
            <div class="text-[#1F2937] text-[28rpx] font-medium leading-[1.4] line-clamp-2 mb-[16rpx]">
              {{ item.title }}
            </div>

            <!-- Desc -->
            <div class="mt-auto self-start bg-[#F3F4F6] text-[#6B7280] text-[22rpx] px-[12rpx] py-[4rpx] rounded-full">
              {{ item.desc }}
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Tab Bar -->
    <!-- <TabBar current="home" /> -->
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import NavHeader from '@/components/NavHeader.vue'
import TabBar from '@/components/TabBar.vue'

const activeTab = ref(0)
const tabs = ['全部产品', '人寿保险', '医疗保险', '意外保险']

/**
 * Mock Data Generation
 * @returns {Array} List of products
 */
const generateProducts = () => {
  return [
    { title: '终身寿险尊享版', tag: '热卖', desc: '5年超值', image: `https://picsum.photos/seed/1/200/200` },
    { title: '百万医疗保险计划', desc: '收益率3.5%', image: `https://picsum.photos/seed/2/200/200` },
    { title: '意外伤害保障计划', desc: '保证收益万能', image: `https://picsum.photos/seed/3/200/200` },
    { title: '分红型年金保险', tag: '热卖', desc: '保证收益万能', image: `https://picsum.photos/seed/4/200/200` },
    { title: '重大疾病保险', desc: '收益率4.2%', image: `https://picsum.photos/seed/5/200/200` },
    { title: '少儿教育金保险', tag: '热卖', desc: '教育专属', image: `https://picsum.photos/seed/6/200/200` },
    { title: '高端医疗服务', desc: '尊享服务', image: `https://picsum.photos/seed/7/200/200` },
    { title: '家庭财产保险', desc: '全家无忧', image: `https://picsum.photos/seed/8/200/200` },
  ]
}

const products = ref(generateProducts())

const filteredProducts = computed(() => {
  if (activeTab.value === 0) return products.value
  // Mock filtering
  return products.value.filter((_, i) => (i + activeTab.value) % 2 === 0)
})
</script>

<style>
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
</style>