<!-- pages/mall/consumer/category.uvue -->
<template>
    <view class="category-page">
        <!-- 顶部搜索栏 -->
        <view class="search-bar" :style="{ paddingTop: statusBarHeight + 'px' }">
            <view class="search-container">
                <view class="search-box" @click="navigateToSearch">
                    <text class="search-icon">🔍</text>
                    <text class="search-placeholder">症状/药品/品牌智能搜索</text>
                </view>
            </view>
        </view>
        
        <!-- 分类内容区 -->
        <view class="category-content">
            <!-- 左侧一级分类 -->
            <scroll-view scroll-y class="primary-category">
                <view 
                    v-for="item in primaryCategories" 
                    :key="item.id"
                    :class="['primary-item', { active: activePrimary === item.id }]"
                    @click="selectPrimaryCategory(item.id)"
                    :style="{ backgroundColor: activePrimary === item.id ? item.color : 'transparent' }"
                >
                    <text class="primary-icon">{{ item.icon }}</text>
                    <text class="primary-name">{{ item.name }}</text>
                </view>
            </scroll-view>
            
            <!-- 右侧商品列表 -->
            <scroll-view scroll-y class="product-content">
                <!-- 分类标题 -->
                <view class="category-header">
                    <text class="category-title">{{ currentCategoryName }}</text>
                    <text class="category-desc">{{ currentCategoryDesc }}</text>
                </view>
                
                <!-- 商品网格 -->
                <view v-if="productList.length > 0" class="product-grid">
                    <view 
                        v-for="product in productList" 
                        :key="product.id"
                        class="product-card"
                        @click="navigateToProduct(product)"
                    >
                        <view class="product-badge" v-if="product.badge">{{ product.badge }}</view>
                        <image 
                            class="product-image" 
                            :src="product.image" 
                            mode="aspectFill"
                        />
                        <view class="product-info">
                            <text class="product-name">{{ product.name }}</text>
                            <text class="product-spec">{{ product.specification }}</text>
                            
                            <view class="price-section">
                                <view class="current-price">
                                    <text class="price-symbol">¥</text>
                                    <text class="price-value">{{ product.price }}</text>
                                </view>
                                <text class="original-price" v-if="product.originalPrice > product.price">
                                    ¥{{ product.originalPrice }}
                                </text>
                            </view>
                            
                            <view class="product-meta">
                                <text class="manufacturer">{{ product.manufacturer }}</text>
                                <view class="sales-info">
                                    <text class="sales-count">已售{{ product.sales }}</text>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
                
                <!-- 空状态 -->
                <view v-else class="empty-state">
                    <text class="empty-icon">💊</text>
                    <text class="empty-text">暂无相关药品</text>
                    <text class="empty-desc">该分类下暂无商品，敬请期待</text>
                </view>
                
                <!-- 加载更多提示 -->
                <view v-if="hasMore" class="load-more">
                    <text class="load-text">上拉加载更多</text>
                </view>
            </scroll-view>
        </view>
    </view>
</template>

<script setup lang="uts">
import { ref, onMounted } from 'vue'

// 响应式数据
const statusBarHeight = ref(0)
const primaryCategories = ref<any[]>([])
const productList = ref<any[]>([])
const activePrimary = ref<string>('cold')
const cartCount = ref(3)
const hasMore = ref(true)

// 获取当前分类信息
const currentCategoryName = ref('感冒发烧')
const currentCategoryDesc = ref('解热镇痛')

// 页面参数
const pageParams = ref<any>({})

// 医药分类数据（与主页一致）
const medicineCategories = [
    { id: 'cold', name: '感冒发烧', icon: '🤧', desc: '解热镇痛', color: '#2196F3' },
    { id: 'stomach', name: '肠胃用药', icon: '🤢', desc: '消化系统', color: '#4CAF50' },
    { id: 'pain', name: '止痛消炎', icon: '💊', desc: '镇痛消炎', color: '#F44336' },
    { id: 'skin', name: '皮肤用药', icon: '🤕', desc: '皮肤护理', color: '#9C27B0' },
    { id: 'vitamin', name: '维生素', icon: '🍊', desc: '营养补充', color: '#FF9800' },
    { id: 'chronic', name: '慢性病', icon: '🫀', desc: '长期管理', color: '#795548' },
    { id: 'child', name: '儿童用药', icon: '👶', desc: '儿童专用', color: '#00BCD4' },
    { id: 'external', name: '外用药品', icon: '🧴', desc: '外用制剂', color: '#8BC34A' },
    { id: 'device', name: '医疗器械', icon: '🩺', desc: '医疗设备', color: '#607D8B' },
    { id: 'health', name: '健康食品', icon: '🥗', desc: '保健食品', color: '#FFC107' }
]

// Mock 商品数据 - 使用本地图片避免网络请求
const mockProducts = {
    cold: [
        {
            id: 'cold1',
            name: '布洛芬缓释胶囊',
            specification: '0.3g*24粒',
            price: 18.5,
            originalPrice: 25.8,
            image: '/static/images/default-product.png',
            manufacturer: '修正药业',
            sales: 2560,
            badge: '热销'
        },
        {
            id: 'cold2',
            name: '板蓝根颗粒',
            specification: '10g*20袋',
            price: 22.8,
            originalPrice: 29.9,
            image: '/static/images/default-product.png',
            manufacturer: '白云山',
            sales: 1890,
            badge: '推荐'
        },
        {
            id: 'cold3',
            name: '连花清瘟胶囊',
            specification: '0.35g*36粒',
            price: 42.8,
            originalPrice: 48.0,
            image: '/static/images/default-product.png',
            manufacturer: '以岭药业',
            sales: 3200,
            badge: '爆款'
        },
        {
            id: 'cold4',
            name: '对乙酰氨基酚片',
            specification: '0.5g*12片',
            price: 8.9,
            originalPrice: 12.0,
            image: '/static/images/default-product.png',
            manufacturer: '强生制药',
            sales: 1420,
            badge: '特价'
        },
        {
            id: 'cold5',
            name: '感冒清热颗粒',
            specification: '3g*10袋',
            price: 16.5,
            originalPrice: 19.9,
            image: '/static/images/default-product.png',
            manufacturer: '同仁堂',
            sales: 980,
            badge: '新品'
        },
        {
            id: 'cold6',
            name: '复方氨酚烷胺片',
            specification: '10片/盒',
            price: 12.8,
            originalPrice: 15.0,
            image: '/static/images/default-product.png',
            manufacturer: '三九医药',
            sales: 1650,
            badge: '家庭装'
        }
    ],
    
    stomach: [
        {
            id: 'stomach1',
            name: '胃康灵胶囊',
            specification: '0.4g*24粒',
            price: 32.8,
            originalPrice: 38.5,
            image: '/static/images/default-product.png',
            manufacturer: '三九医药',
            sales: 890,
            badge: '热销'
        },
        {
            id: 'stomach2',
            name: '奥美拉唑肠溶胶囊',
            specification: '20mg*14粒',
            price: 28.5,
            originalPrice: 35.0,
            image: '/static/images/default-product.png',
            manufacturer: '阿斯利康',
            sales: 1250,
            badge: '处方药'
        },
        {
            id: 'stomach3',
            name: '健胃消食片',
            specification: '0.8g*32片',
            price: 15.9,
            originalPrice: 19.9,
            image: '/static/images/default-product.png',
            manufacturer: '江中制药',
            sales: 2100,
            badge: '推荐'
        },
        {
            id: 'stomach4',
            name: '蒙脱石散',
            specification: '3g*10袋',
            price: 18.6,
            originalPrice: 22.0,
            image: '/static/images/default-product.png',
            manufacturer: '益普生',
            sales: 1780,
            badge: '止泻'
        },
        {
            id: 'stomach5',
            name: '多潘立酮片',
            specification: '10mg*30片',
            price: 22.8,
            originalPrice: 26.5,
            image: '/static/images/default-product.png',
            manufacturer: '西安杨森',
            sales: 950,
            badge: '促消化'
        },
        {
            id: 'stomach6',
            name: '铝碳酸镁咀嚼片',
            specification: '0.5g*20片',
            price: 25.9,
            originalPrice: 29.9,
            image: '/static/images/default-product.png',
            manufacturer: '拜耳',
            sales: 1320,
            badge: '护胃'
        }
    ],
    
    pain: [
        {
            id: 'pain1',
            name: '阿莫西林胶囊',
            specification: '0.25g*24粒',
            price: 28.5,
            originalPrice: 35.0,
            image: '/static/images/default-product.png',
            manufacturer: '华北制药',
            sales: 1560,
            badge: '处方药'
        },
        {
            id: 'pain2',
            name: '双氯芬酸钠缓释片',
            specification: '75mg*10片',
            price: 19.8,
            originalPrice: 24.0,
            image: '/static/images/default-product.png',
            manufacturer: '诺华制药',
            sales: 1280,
            badge: '止痛'
        },
        {
            id: 'pain3',
            name: '云南白药胶囊',
            specification: '0.25g*32粒',
            price: 35.9,
            originalPrice: 42.0,
            image: '/static/images/default-product.png',
            manufacturer: '云南白药',
            sales: 2350,
            badge: '经典'
        },
        {
            id: 'pain4',
            name: '塞来昔布胶囊',
            specification: '0.2g*10粒',
            price: 48.6,
            originalPrice: 55.0,
            image: '/static/images/default-product.png',
            manufacturer: '辉瑞',
            sales: 890,
            badge: '抗炎'
        },
        {
            id: 'pain5',
            name: '布洛芬片',
            specification: '0.1g*24片',
            price: 12.5,
            originalPrice: 15.0,
            image: '/static/images/default-product.png',
            manufacturer: '中美史克',
            sales: 1680,
            badge: '经济装'
        },
        {
            id: 'pain6',
            name: '头孢克肟胶囊',
            specification: '0.1g*6粒',
            price: 32.8,
            originalPrice: 38.0,
            image: '/static/images/default-product.png',
            manufacturer: '广州白云山',
            sales: 1120,
            badge: '抗生素'
        }
    ]
}

// 补充其他分类的默认数据（简化版）
const generateDefaultProducts = (categoryId: string) => {
    const baseProducts = [
        { name: '通用药品1', price: 25.8, manufacturer: '知名药企', sales: 1200 },
        { name: '通用药品2', price: 18.5, manufacturer: '知名药企', sales: 950 },
        { name: '通用药品3', price: 32.0, manufacturer: '知名药企', sales: 1450 },
        { name: '通用药品4', price: 22.8, manufacturer: '知名药企', sales: 880 },
        { name: '通用药品5', price: 28.9, manufacturer: '知名药企', sales: 1100 },
        { name: '通用药品6', price: 19.9, manufacturer: '知名药企', sales: 920 }
    ]
    
    return baseProducts.map((product, index) => ({
        id: `${categoryId}${index + 1}`,
        ...product,
        specification: '规格待定',
        originalPrice: product.price * 1.2,
        image: '/static/images/default-product.png',
        badge: index === 0 ? '热销' : index === 1 ? '推荐' : ''
    }))
}

// 生命周期
onMounted(() => {
    initPage()
    
    console.log('=== category页面onMounted被调用 ===')
    
    // 在onMounted中只初始化页面，不处理分类参数
    // 分类参数的处理交给onLoad函数，因为onLoad在页面加载时执行
    console.log('onMounted中不处理分类参数，等待onLoad处理')
    
    // 注意：这里不再默认选择分类，让onLoad函数处理分类选择
    // 如果onLoad没有设置分类，则保持默认状态
})

// 页面加载时处理参数 - 这是处理分类切换的主要入口
onLoad((options: any) => {
	console.log('=== category页面onLoad被调用 ===')
	console.log('页面加载时间:', Date.now())
	console.log('传入的options参数:', options)
	console.log('当前活动分类:', activePrimary.value)
	
	let categoryId = ''
	let categoryName = ''
	
	// 首先检查传入的options参数
	if (options && options.categoryId) {
		categoryId = options.categoryId
		categoryName = options.name || ''
		console.log('✅ onLoad中找到分类参数:', categoryId, categoryName)
	}
	
	// 如果options中没有，尝试从getCurrentPages()获取
	if (!categoryId) {
		const pages = getCurrentPages()
		if (pages.length > 0) {
			const currentPage = pages[pages.length - 1]
			const pageOptions = currentPage.options || {}
			console.log('从getCurrentPages()获取参数:', pageOptions)
			
			if (pageOptions.categoryId) {
				categoryId = pageOptions.categoryId
				categoryName = pageOptions.name || ''
				console.log('✅ 从getCurrentPages()找到分类参数:', categoryId, categoryName)
			}
		}
	}
	
	// 如果有找到分类ID，则选中对应的分类
	if (categoryId) {
		console.log('✅ 准备选中分类:', categoryId)
		console.log('分类名称:', categoryName || '未指定')
		
		// 检查是否需要更新分类
		if (activePrimary.value !== categoryId) {
			console.log('当前分类:', activePrimary.value, '与目标分类:', categoryId, '不同，需要更新')
			console.log('准备调用selectPrimaryCategory函数...')
			selectPrimaryCategory(categoryId)
		} else {
			console.log('当前分类已经是目标分类，但可能用户想要刷新页面')
			console.log('当前分类:', activePrimary.value, '目标分类:', categoryId)
			// 即使分类相同，也重新加载数据，确保数据是最新的
			// 添加一个小的延迟，确保页面完全显示后再更新数据
			setTimeout(() => {
				selectPrimaryCategory(categoryId)
			}, 100)
		}
	} else {
		console.log('⚠️ onLoad中未找到分类参数')
		console.log('保持当前分类显示:', activePrimary.value)
	}
	
	console.log('=== category页面onLoad执行完成 ===')
})

// 页面显示时也检查参数，确保从其他页面返回时能正确显示
onShow(() => {
	console.log('=== category页面onShow被调用 ===')
	console.log('页面显示时间:', Date.now())
	console.log('当前活动分类:', activePrimary.value)
	
	// 在onShow中，我们也需要检查是否有新的参数
	// 因为当从主页再次点击分类跳转过来时，可能不会触发onLoad
	// 而是触发onShow
	
	// 获取当前页面实例和参数
	const pages = getCurrentPages()
	if (pages.length > 0) {
		const currentPage = pages[pages.length - 1]
		const pageOptions = currentPage.options || {}
		console.log('onShow中获取参数:', pageOptions)
		
		// 检查是否有分类参数
		if (pageOptions.categoryId) {
			const categoryId = pageOptions.categoryId
			const categoryName = pageOptions.name || ''
			
			console.log('✅ onShow中找到分类参数:', categoryId, categoryName)
			console.log('URL中的时间戳参数:', pageOptions.timestamp)
			console.log('URL中的随机参数:', pageOptions.random)
			
			// 检查是否需要更新分类
			if (activePrimary.value !== categoryId) {
				console.log('当前分类:', activePrimary.value, '与目标分类:', categoryId, '不同，需要更新')
				console.log('准备调用selectPrimaryCategory函数...')
				selectPrimaryCategory(categoryId)
			} else {
				console.log('当前分类已经是目标分类，但可能用户想要刷新页面')
				console.log('当前分类:', activePrimary.value, '目标分类:', categoryId)
				// 即使分类相同，也重新加载数据，确保数据是最新的
				// 添加一个小的延迟，确保页面完全显示后再更新数据
				setTimeout(() => {
					selectPrimaryCategory(categoryId)
				}, 100)
			}
		} else {
			console.log('⚠️ onShow中未找到分类参数')
			console.log('尝试从URL中解析参数...')
			
			// 尝试从当前页面的URL中解析参数
			const currentUrl = currentPage.route || ''
			console.log('当前页面路由:', currentUrl)
			
			// 如果URL中有查询参数，尝试解析
			if (currentPage.$page && currentPage.$page.fullPath) {
				const fullPath = currentPage.$page.fullPath
				console.log('完整路径:', fullPath)
				
				// 尝试解析查询参数
				const queryIndex = fullPath.indexOf('?')
				if (queryIndex > -1) {
					const queryString = fullPath.substring(queryIndex + 1)
					console.log('查询字符串:', queryString)
					
					// 简单解析查询参数
					const params = new URLSearchParams(queryString)
					const urlCategoryId = params.get('categoryId')
					if (urlCategoryId) {
						console.log('✅ 从URL解析到分类参数:', urlCategoryId)
						selectPrimaryCategory(urlCategoryId)
					}
				}
			}
		}
	}
	
	console.log('=== category页面onShow执行完成 ===')
})

// 初始化页面
const initPage = () => {
    const systemInfo = uni.getSystemInfoSync()
    statusBarHeight.value = systemInfo.statusBarHeight || 0
    
    // 获取页面参数
    const pages = getCurrentPages()
    if (pages.length > 0) {
        const currentPage = pages[pages.length - 1]
        pageParams.value = currentPage.options || {}
    }
    
    // 加载分类数据
    primaryCategories.value = medicineCategories
}

// 选择一级分类
const selectPrimaryCategory = (categoryId: string) => {
    console.log('=== selectPrimaryCategory函数开始执行 ===')
    console.log('传入的categoryId:', categoryId)
    console.log('当前时间:', Date.now())
    
    // 验证categoryId是否有效
    if (!categoryId) {
        console.error('categoryId为空，使用默认分类')
        categoryId = 'cold'
    }
    
    console.log('验证后的categoryId:', categoryId)
    console.log('当前activePrimary的值:', activePrimary.value)
    
    // 更新活动分类
    activePrimary.value = categoryId
    console.log('更新后的activePrimary:', activePrimary.value)
    
    // 更新当前分类信息
    const category = medicineCategories.find(cat => cat.id === categoryId)
    if (category) {
        currentCategoryName.value = category.name
        currentCategoryDesc.value = category.desc
        console.log('✅ 找到分类:', category.name, '描述:', category.desc)
    } else {
        console.error('❌ 未找到分类ID:', categoryId, '，使用默认分类')
        // 如果找不到对应的分类，使用第一个分类
        if (medicineCategories.length > 0) {
            const firstCategory = medicineCategories[0]
            currentCategoryName.value = firstCategory.name
            currentCategoryDesc.value = firstCategory.desc
            activePrimary.value = firstCategory.id
            categoryId = firstCategory.id
            console.log('使用默认分类:', firstCategory.name)
        }
    }
    
    console.log('准备加载商品数据...')
    
    // 加载对应商品
    if (mockProducts[categoryId]) {
        productList.value = mockProducts[categoryId]
        console.log('✅ 加载mock商品数据成功')
        console.log('分类:', categoryId)
        console.log('商品数量:', mockProducts[categoryId].length)
        console.log('商品列表:', mockProducts[categoryId])
    } else {
        productList.value = generateDefaultProducts(categoryId)
        console.log('✅ 加载默认商品数据成功')
        console.log('分类:', categoryId)
        console.log('商品数量:', productList.value.length)
        console.log('商品列表:', productList.value)
    }
    
    hasMore.value = true
    
    // 验证数据是否已正确更新
    console.log('数据更新验证:')
    console.log('activePrimary:', activePrimary.value)
    console.log('currentCategoryName:', currentCategoryName.value)
    console.log('currentCategoryDesc:', currentCategoryDesc.value)
    console.log('productList长度:', productList.value.length)
    
    console.log('=== selectPrimaryCategory函数执行完成 ===')
}

// 添加到购物车
const addToCart = (product: any) => {
    uni.showToast({
        title: '已添加到购物车',
        icon: 'success'
    })
    cartCount.value++
}

// 导航函数
const navigateToSearch = () => uni.navigateTo({ url: '/pages/medicine/search' })
const navigateToCart = () => uni.navigateTo({ url: '/pages/medicine/cart' })
const navigateToProduct = (product: any) => {
    uni.navigateTo({
        url: `/pages/medicine/detail?id=${product.id}`
    })
}
</script>

<style>
.category-page {
    width: 100%;
    min-height: 100vh;
    background-color: #f8fafc;
    display: flex;
    flex-direction: column;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
}

/* 搜索栏 */
.search-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%);
    z-index: 1000;
    box-shadow: 0 2px 12px rgba(76, 175, 80, 0.15);
}

.search-container {
    height: 60px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

.search-box {
    flex: 1;
    max-width: 600px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 25px;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.search-box:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

.search-icon {
    font-size: 18px;
    color: #4CAF50;
    margin-right: 12px;
}

.search-placeholder {
    font-size: 15px;
    color: #666;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.icon {
    font-size: 22px;
    color: white;
}

.cart-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #FF5722;
    color: white;
    font-size: 10px;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 2px solid #4CAF50;
}

/* 分类内容区 */
.category-content {
    display: flex;
    margin-top: 60px;
    padding: 0 16px;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    gap: 20px;
}

/* 左侧一级分类 */
.primary-category {
    width: 120px;
    background: white;
    border-radius: 12px;
    padding: 12px 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
}

.primary-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    margin: 4px 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #666;
}

.primary-item:hover {
    transform: translateX(2px);
}

.primary-item.active {
    color: white !important;
    font-weight: bold;
}

.primary-icon {
    font-size: 18px;
    margin-right: 8px;
    min-width: 24px;
    text-align: center;
}

.primary-name {
    font-size: 14px;
    line-height: 1.4;
}

/* 右侧内容区 */
.product-content {
    flex: 1;
    padding: 16px 0;
}

.category-header {
    margin-bottom: 20px;
    padding: 0 8px;
}

.category-title {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    margin-bottom: 4px;
}

.category-desc {
    font-size: 14px;
    color: #666;
}

/* 商品网格 */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

.product-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid #e0e0e0;
    position: relative;
}

.product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.product-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: #FF5722;
    color: white;
    font-size: 11px;
    padding: 4px 12px;
    border-radius: 12px;
    font-weight: 600;
    z-index: 2;
}

.product-image {
    width: 100%;
    height: 160px;
    object-fit: cover;
    background: white;
}

.product-info {
    padding: 16px;
}

.product-name {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
    display: block;
    line-height: 1.4;
}

.product-spec {
    font-size: 13px;
    color: #666;
    margin-bottom: 12px;
    display: block;
}

.price-section {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 12px;
}

.current-price {
    display: flex;
    align-items: baseline;
}

.price-symbol {
    font-size: 14px;
    color: #FF5722;
}

.price-value {
    font-size: 20px;
    font-weight: bold;
    color: #FF5722;
    margin-left: 2px;
}

.original-price {
    font-size: 13px;
    color: #999;
    text-decoration: line-through;
}

.product-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    margin-bottom: 12px;
}

.manufacturer {
    color: #666;
}

.sales-count {
    color: #999;
}

.product-action {
    margin-top: 12px;
}

.cart-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #4CAF50;
    color: white;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cart-btn:hover {
    background: #388E3C;
}

.cart-icon {
    font-size: 14px;
}

/* 空状态 */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.empty-icon {
    font-size: 60px;
    color: #4CAF50;
    margin-bottom: 15px;
}

.empty-text {
    font-size: 18px;
    color: #333;
    font-weight: bold;
    margin-bottom: 8px;
}

.empty-desc {
    font-size: 14px;
    color: #666;
}

/* 加载更多 */
.load-more {
    text-align: center;
    padding: 20px 0;
    color: #999;
    font-size: 14px;
}

.load-text {
    display: inline-block;
    padding: 8px 16px;
    background: #f5f5f5;
    border-radius: 20px;
}

/* ===== 响应式设计 ===== */

/* 小屏手机 (小于414px) */
@media screen and (max-width: 414px) {
    .category-content {
        flex-direction: column;
        padding: 0 12px;
    }
    
    .primary-category {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        padding: 8px;
    }
    
    .primary-item {
        width: calc(25% - 8px);
        margin: 4px;
        padding: 10px 8px;
        text-align: center;
    }
    
    .primary-icon {
        margin-right: 0;
        margin-bottom: 4px;
        font-size: 16px;
    }
    
    .primary-name {
        font-size: 12px;
    }
    
    .product-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .search-container {
        padding: 0 12px;
        height: 55px;
    }
    
    .search-box {
        padding: 8px 16px;
    }
    
    .category-header {
        padding: 0;
    }
}

/* 中屏手机/小平板 (415px-768px) */
@media screen and (min-width: 415px) and (max-width: 768px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

/* 平板设备 (769px-1024px) */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .product-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
}

/* 桌面端 (1025px以上) */
@media screen and (min-width: 1025px) {
    .category-content {
        gap: 30px;
        padding: 0 24px;
    }
    
    .primary-category {
        width: 160px;
        padding: 16px 0;
    }
    
    .primary-item {
        padding: 16px 20px;
        margin: 6px 12px;
        border-radius: 10px;
    }
    
    .primary-icon {
        font-size: 20px;
        min-width: 28px;
    }
    
    .primary-name {
        font-size: 15px;
    }
    
    .product-content {
        padding: 20px 0;
    }
    
    .category-header {
        margin-bottom: 24px;
        padding: 0 12px;
    }
    
    .category-title {
        font-size: 24px;
    }
    
    .category-desc {
        font-size: 15px;
    }
    
    .product-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
    }
    
    .product-card {
        border-radius: 14px;
    }
    
    .product-info {
        padding: 20px;
    }
    
    .product-name {
        font-size: 16px;
    }
    
    .product-spec {
        font-size: 14px;
    }
    
    .price-value {
        font-size: 22px;
    }
}

/* 大桌面端 (1400px以上) */
@media screen and (min-width: 1400px) {
    .category-content {
        max-width: 1600px;
        gap: 40px;
        padding: 0 32px;
    }
    
    .primary-category {
        width: 200px;
        padding: 20px 0;
    }
    
    .primary-item {
        padding: 18px 24px;
        margin: 8px 16px;
        border-radius: 12px;
    }
    
    .primary-icon {
        font-size: 22px;
        min-width: 32px;
    }
    
    .primary-name {
        font-size: 16px;
    }
    
    .product-content {
        padding: 24px 0;
    }
    
    .category-header {
        margin-bottom: 28px;
        padding: 0 16px;
    }
    
    .category-title {
        font-size: 26px;
    }
    
    .category-desc {
        font-size: 16px;
    }
    
    .product-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 28px;
    }
    
    .product-card {
        border-radius: 16px;
    }
    
    .product-image {
        height: 180px;
    }
    
    .product-info {
        padding: 24px;
    }
    
    .product-name {
        font-size: 17px;
    }
    
    .product-spec {
        font-size: 15px;
    }
    
    .price-value {
        font-size: 24px;
    }
}
</style>
