<!--
 * @Date: 2026-01-30
 * @Description: 资料列表页
-->
<template>
  <div class="min-h-screen bg-[#F9FAFB] pb-[calc(160rpx+env(safe-area-inset-bottom))]">
    <!-- Navigation Header -->
    <NavHeader title="资料列表" />

    <!-- Search Bar -->
    <div class="px-[32rpx] mt-[32rpx]">
      <div class="bg-white rounded-[12rpx] flex items-center px-[32rpx] py-[24rpx]">
        <IconFont name="Search" size="20" color="#9CA3AF" customClass="mr-[16rpx]" />
        <input
          v-model="searchValue"
          type="text"
          placeholder="搜索资料..."
          class="flex-1 text-[28rpx] text-[#1F2937] placeholder-gray-400 bg-transparent outline-none"
          @confirm="onSearch"
        />
      </div>
    </div>

    <!-- Material List -->
    <div class="px-[32rpx] mt-[40rpx]">
      <div class="bg-white rounded-[32rpx] p-[32rpx] shadow-sm">
        <div v-for="(item, index) in list" :key="index">
           <div class="flex justify-between items-start pt-[32rpx] first:pt-0">
              <div class="flex items-start flex-1 mr-[20rpx]">
                <div class="w-[80rpx] h-[88rpx] mr-[24rpx] flex-shrink-0 flex items-center justify-center bg-blue-50 rounded-[12rpx]">
                  <IconFont :name="item.iconName || 'Order'" size="32" :color="item.iconColor || '#2563EB'" />
                </div>
                <div class="flex flex-col">
                  <span class="text-[#1F2937] text-[28rpx] font-normal leading-[1.2] mb-[14rpx] line-clamp-2">
                    {{ item.title }}
                  </span>
                  <span class="text-[#6B7280] text-[24rpx] leading-[1.3] line-clamp-1">
                    {{ item.desc }}
                  </span>
                </div>
              </div>
              <!-- Action Icon (Download/Detail) -->
              <IconFont name="Download" size="20" color="#9CA3AF" />
            </div>

            <div class="flex items-center mt-[16rpx] ml-[104rpx] pb-[32rpx]">
              <span class="text-[#9CA3AF] text-[24rpx] mr-[40rpx]">{{ item.size }}</span>
              <div class="flex items-center" @click="toggleCollect(item)">
                <IconFont
                  :name="item.collected ? 'StarFill' : 'Star'"
                  size="12"
                  :color="item.collected ? '#F59E0B' : '#9CA3AF'"
                  customClass="mr-[8rpx]"
                />
                <span :class="['text-[24rpx]', item.collected ? 'text-[#F59E0B]' : 'text-[#9CA3AF]']">
                  {{ item.collected ? '已收藏' : '收藏' }}
                </span>
              </div>
            </div>

            <!-- Divider -->
            <div v-if="index < list.length - 1" class="h-[1px] bg-[#E5E7EB] w-full mb-[32rpx]"></div>
        </div>
      </div>
    </div>

    <!-- Tab Bar -->
    <TabBar />
  </div>
</template>

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

const searchValue = ref('')

const list = ref([
  {
    title: '2024年保险代理人考试大纲.pdf',
    desc: '最新考试范围与重点解析',
    size: '2.1MB',
    iconName: 'Order',
    iconColor: '#EF4444',
    collected: true
  },
  {
    title: '历年真题汇总及解析.pdf',
    desc: '2019-2023年真题完整版',
    size: '5.3MB',
    iconName: 'Order',
    iconColor: '#EF4444',
    collected: false
  },
  {
    title: '考试技巧与经验分享.pdf',
    desc: '高分学员备考心得',
    size: '1.8MB',
    iconName: 'Order',
    iconColor: '#EF4444',
    collected: false
  },
  {
    title: '保险基础知识速记手册.pdf',
    desc: '核心知识点快速记忆',
    size: '3.2MB',
    iconName: 'Order',
    iconColor: '#EF4444',
    collected: false
  },
  {
    title: '模拟试卷10套及答案.pdf',
    desc: '考前冲刺模拟练习',
    size: '4.5MB',
    iconName: 'Order',
    iconColor: '#EF4444',
    collected: true
  },
  {
    title: '法律法规重点条款解读.pdf',
    desc: '保险相关法规详解',
    size: '2.8MB',
    iconName: 'Order',
    iconColor: '#EF4444',
    collected: false
  },
  {
    title: '考试常见易错题分析.pdf',
    desc: '高频错题归纳总结',
    size: '1.5MB',
    iconName: 'Order',
    iconColor: '#EF4444',
    collected: false
  },
  {
    title: '案例分析题库及解答.pdf',
    desc: '实务案例精选练习',
    size: '3.9MB',
    iconName: 'Order',
    iconColor: '#EF4444',
    collected: false
  },
  {
    title: '考前冲刺复习资料.pdf',
    desc: '最后一周复习要点',
    size: '2.3MB',
    iconName: 'Order',
    iconColor: '#EF4444',
    collected: false
  },
  {
    title: '考场注意事项及答题技巧.pdf',
    desc: '应试策略与时间分配',
    size: '1.2MB',
    iconName: 'Order',
    iconColor: '#EF4444',
    collected: false
  }
])

/**
 * Search handler
 */
const onSearch = () => {
  console.log('Searching for:', searchValue.value)
}

/**
 * Toggle collect status
 * @param {Object} item
 */
const toggleCollect = (item) => {
  item.collected = !item.collected
}
</script>