<template>
    <view class="category-page">
        <!-- 顶部搜索栏 -->
        <view class="search-bar" :style="{ paddingTop: statusBarHeight + 'px' }">
            <view class="search-container" :style="{ paddingRight: (navBarRight > 0 ? navBarRight : 16) + 'px' }">
                <view class="search-box" @click="navigateToSearch" :style="{ height: '30px' }">
                    <!-- 模拟输入框 -->
                    <text class="search-placeholder">请输入商品名称、店铺</text>
                    
                    <!-- 扫码图标 -->
                    <view class="nav-icon-btn" @click.stop="onScan">
                        <text class="nav-icon">🔳</text>
                    </view>

                    <!-- 相机图标 -->
                    <view class="nav-camera-btn" @click.stop="onCamera">
                        <text class="nav-camera-icon">📷</text>
                    </view>
                    
                    <!-- 搜索按钮 -->
                    <view class="nav-inner-search-btn" :style="{ height: '22px' }">
                        <text class="nav-inner-search-text">搜索</text>
                    </view>
                </view>
            </view>
        </view>
        
        <!-- 导航栏占位 - 需要包含statusBarHeight + 搜索框高度44px -->
        <view class="navbar-placeholder" :style="{ height: (statusBarHeight + 44) + 'px' }"></view>
        
        <!-- 分类内容区 -->
        <view class="category-content">
            <!-- 左侧一级分类 -->
            <scroll-view 
                :scroll-y="true" 
                class="primary-category" 
                :scroll-top="scrollTop" 
                :scroll-with-animation="true"
            >
                <view 
                    v-for="item in primaryCategories" 
                    :key="item.id"
                    :class="['primary-item', { active: isPrimaryActive(item.id) }]"
                    @click="selectPrimaryCategory(item.id)"
                    :style="{ backgroundColor: getPrimaryItemBgColor(item) }"
                >
                    <text class="primary-icon">{{ item.icon }}</text>
                    <text class="primary-name">{{ item.name }}</text>
                </view>
            </scroll-view>
            
            <!-- 右侧商品列表 -->
            <scroll-view 
                :scroll-y="true" 
                class="product-content"
                @scrolltolower="loadMore"
                :lower-threshold="50"
            >
                <!-- 分类标题 -->
                <view class="category-header">
                    <text class="category-title">{{ currentCategoryName }}</text>
                    <text class="category-desc">{{ currentCategoryDesc }}</text>
                </view>
                
                <!-- 二级分类 -->
                <view v-if="subCategories.length > 0" class="sub-category-section">
                    <view class="sub-category-list">
                        <view 
                            v-for="sub in subCategories" 
                            :key="sub.id"
                            :class="['sub-category-item', { active: isSubActive(sub.id) }]"
                            @click="selectSubCategory(sub.id)"
                        >
                            <text class="sub-category-icon">{{ sub.icon }}</text>
                            <text class="sub-category-name">{{ sub.name }}</text>
                        </view>
                    </view>
                </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-image-wrapper">
                            <image 
                                class="product-image" 
                                :src="product.main_image_url" 
                                mode="aspectFill"
                            />
                        </view>
                        <text class="product-name" :lines="2">{{ product.name }}</text>
                        <view class="product-bottom">
                            <text class="product-price">¥{{ product.base_price ?? product.price ?? 0 }}</text>
                            <view class="product-add-btn" @click.stop="addToCart(product)">
                                <text class="add-icon">+</text>
                            </view>
                        </view>
                    </view>
                </view>
                
                <!-- 加载中状态 -->
                <view v-else-if="loading" class="loading-state">
                    <view class="loading-spinner"></view>
                    <text class="loading-text">加载中...</text>
                </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'
import { onLoad, onShow } from '@dcloudio/uni-app'
import supabaseService from '@/utils/supabaseService.uts'
import type { Product } from '@/utils/supabaseService.uts'

type LocalCategory = {
	id: string
	name: string
	icon: string
	description: string
	color: string
}

// 响应式数据
const statusBarHeight = ref(0)
const headerHeight = ref(44)

// 小程序胶囊按钮信息类型
type CapsuleButtonInfo = {
	left: number,
	top: number,
	right: number,
	bottom: number,
	width: number,
	height: number
}

// 小程序胶囊按钮信息
const capsuleButtonInfo = ref<CapsuleButtonInfo | null>(null)
const navBarRight = ref(0) // 导航栏右侧预留空间

const primaryCategories = ref<LocalCategory[]>([])
const subCategories = ref<LocalCategory[]>([])  // 二级分类列表
const productList = ref<Product[]>([])
const activePrimary = ref<string>('')
const activeSubCategory = ref<string>('')  // 当前选中的二级分类
const selectedParentId = ref<string>('')  // 当前选中的一级分类ID（用于高亮显示）
const cartCount = ref(3)
const hasMore = ref(true)
const hasLoadedFromParams = ref(false)
const currentPage = ref(1)
const loading = ref(false)
const scrollTop = ref(0)
const pendingCategoryId = ref('') // 待处理的分类ID（从其他页面跳转过来时暂存）

// 获取当前分类信息
const currentCategoryName = ref('')
const currentCategoryDesc = ref('')

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

// 加载商品数据
async function loadProducts(): Promise<void> {
  if (loading.value) return
  if (activePrimary.value == '') {
    console.warn('activePrimary为空，无法加载商品')
    return
  }

  loading.value = true
  try {
      console.log('开始加载商品，分类ID:', activePrimary.value, '页码:', currentPage.value)
      const response = await supabaseService.getProductsByCategory(activePrimary.value, currentPage.value)
      console.log('商品加载结果:', {
        dataCount: response.data.length,
        total: response.total,
        hasmore: response.hasmore,
        page: currentPage.value
      })
      
      if (currentPage.value == 1) {
          productList.value = response.data
      } else {
          productList.value.push(...response.data)
      }
      
      hasMore.value = response.hasmore
      
      // 更新当前分类信息 - 先在一级分类中查找，再在二级分类中查找
      let foundCat: LocalCategory | null = null
      for (let i = 0; i < primaryCategories.value.length; i++) {
          if (primaryCategories.value[i].id == activePrimary.value) {
              foundCat = primaryCategories.value[i]
              break
          }
      }
      if (foundCat == null) {
          for (let i = 0; i < subCategories.value.length; i++) {
              if (subCategories.value[i].id == activePrimary.value) {
                  foundCat = subCategories.value[i]
                  break
              }
          }
      }
      if (foundCat != null) {
        currentCategoryName.value = foundCat.name
        currentCategoryDesc.value = foundCat.description
      }
      
      console.log('商品列表加载完成，当前总数量:', productList.value.length)
  } catch (error) {
    console.error('加载商品数据失败:', error)
    if (currentPage.value == 1) {
        productList.value = []
    }
  } finally {
    loading.value = false
  }
}

// 加载二级分类
async function loadSubCategories(parentId: string): Promise<void> {
    console.log('加载二级分类，父级ID:', parentId)
    try {
        const subCats = await supabaseService.getSubCategories(parentId)
        console.log('获取到二级分类数量:', subCats.length)
        
        const categories: LocalCategory[] = []
        for (let i = 0; i < subCats.length; i++) {
            const cat = subCats[i]
            categories.push({
                id: cat.id,
                name: cat.name,
                icon: cat.icon,
                description: cat.description,
                color: cat.color
            })
        }
        subCategories.value = categories
    } catch (e) {
        console.error('加载二级分类失败:', e)
        subCategories.value = []
    }
}

// 判断一级分类是否选中
function isPrimaryActive(categoryId: string): boolean {
    return selectedParentId.value == categoryId
}

// 判断二级分类是否选中
function isSubActive(subCategoryId: string): boolean {
    return activeSubCategory.value == subCategoryId || activePrimary.value == subCategoryId
}

// 获取一级分类的背景色
function getPrimaryItemBgColor(item: LocalCategory): string {
    if (isPrimaryActive(item.id)) {
        return item.color
    }
    return 'transparent'
}

// 选择二级分类
async function selectSubCategory(subCategoryId: string): Promise<void> {
    console.log('选择二级分类:', subCategoryId)
    activeSubCategory.value = subCategoryId
    
    // 使用二级分类ID加载商品
    currentPage.value = 1
    hasMore.value = true
    activePrimary.value = subCategoryId  // 临时设置为二级分类ID用于加载商品
    await loadProducts()
}

// 选择一级分类 - 必须在 loadCategories 之前定义
// originalCategoryId: 可能是一级分类ID，也可能是二级分类ID
async function selectPrimaryCategory(originalCategoryId: string): Promise<void> {
    console.log('=== selectPrimaryCategory函数开始执行 ===')
    console.log('传入的categoryId:', originalCategoryId)
    
    if (originalCategoryId == '') {
        console.error('categoryId为空，尝试使用第一个分类')
        if (primaryCategories.value.length > 0) {
            originalCategoryId = primaryCategories.value[0].id
        } else {
            console.error('没有可用的分类')
            return
        }
    }
    
    // 检查传入的是否是一级分类ID
    let targetParentId = originalCategoryId
    let targetSubId = ''
    console.log('当前一级分类列表长度:', primaryCategories.value.length)
    let foundInPrimary: LocalCategory | null = null
    for (let i = 0; i < primaryCategories.value.length; i++) {
        if (primaryCategories.value[i].id == originalCategoryId) {
            foundInPrimary = primaryCategories.value[i]
            break
        }
    }
    console.log('在一级分类中查找结果:', foundInPrimary != null)
    
    if (foundInPrimary == null) {
        // 传入的可能是二级分类ID，需要查找其父级分类
        console.log('传入的ID不在一级分类中，可能是二级分类ID，尝试查找父级分类')
        
        // 从服务器获取分类信息以确定父级
        try {
            const categoryInfo = await supabaseService.getCategoryById(originalCategoryId)
            if (categoryInfo != null && categoryInfo.parent_id != null && categoryInfo.parent_id != '') {
                console.log('找到父级分类ID:', categoryInfo.parent_id)
                
                // 检查父级分类ID是否在一级分类列表中
                console.log('查找父级分类ID:', categoryInfo.parent_id)
                let parentInPrimary: LocalCategory | null = null
                for (let i = 0; i < primaryCategories.value.length; i++) {
                    if (primaryCategories.value[i].id == categoryInfo.parent_id) {
                        parentInPrimary = primaryCategories.value[i]
                        break
                    }
                }
                console.log('父级分类查找结果:', parentInPrimary != null)
                if (parentInPrimary != null) {
                    console.log('父级分类在列表中找到:', parentInPrimary.name)
                    targetParentId = categoryInfo.parent_id!
                    targetSubId = originalCategoryId  // 记住要选中的二级分类
                } else {
                    console.log('父级分类不在列表中，使用第一个分类')
                    // 打印当前列表中的所有分类ID
                    for (let i = 0; i < primaryCategories.value.length; i++) {
                        console.log('列表中的分类:', primaryCategories.value[i].id, primaryCategories.value[i].name)
                    }
                    if (primaryCategories.value.length > 0) {
                        targetParentId = primaryCategories.value[0].id
                    }
                }
            } else {
                console.log('未找到父级分类，使用第一个分类')
                if (primaryCategories.value.length > 0) {
                    targetParentId = primaryCategories.value[0].id
                }
            }
        } catch (e) {
            console.error('获取分类信息失败:', e)
            if (primaryCategories.value.length > 0) {
                targetParentId = primaryCategories.value[0].id
            }
        }
    }
    
    console.log('最终选中的一级分类ID:', targetParentId)
    console.log('需要选中的二级分类ID:', targetSubId)
    
    // 设置一级分类高亮
    selectedParentId.value = targetParentId
    activePrimary.value = targetParentId
    
    // 加载二级分类
    await loadSubCategories(targetParentId)
    
    // 如果有要选中的二级分类
    if (targetSubId != '') {
        activeSubCategory.value = targetSubId
    } else {
        // 如果没有指定二级分类，但有二级分类列表，默认选中第一个
        if (subCategories.value.length > 0) {
            activeSubCategory.value = subCategories.value[0].id
            targetSubId = subCategories.value[0].id
            console.log('默认选中第一个二级分类:', subCategories.value[0].name)
        } else {
            activeSubCategory.value = ''
        }
    }
    
    // 自动滚动到选中位置
    let foundIndex = -1
    for (let i = 0; i < primaryCategories.value.length; i++) {
        if (primaryCategories.value[i].id == targetParentId) {
            foundIndex = i
            break
        }
    }
    if (foundIndex != -1) {
        // 获取系统信息
        const systemInfo = uni.getSystemInfoSync()
        
        let itemHeight = 70
        if (systemInfo.windowWidth > 1025) {
            itemHeight = 80
        }
        
        const scrollViewHeight = systemInfo.windowHeight - systemInfo.statusBarHeight - 44
        const targetScrollTop = (foundIndex * itemHeight) - (scrollViewHeight / 2) + (itemHeight / 2)
        scrollTop.value = Math.max(0, targetScrollTop)
        console.log(`滚动左侧菜单: index=${foundIndex}, target=${scrollTop.value}`)
    }
    
    // 查找分类信息
    let foundCategory: LocalCategory | null = null
    for (let i = 0; i < primaryCategories.value.length; i++) {
        if (primaryCategories.value[i].id == targetParentId) {
            foundCategory = primaryCategories.value[i]
            break
        }
    }
    if (foundCategory != null) {
        currentCategoryName.value = foundCategory.name
        currentCategoryDesc.value = foundCategory.description
    } else {
        console.log('分类信息未找到，使用第一个分类的信息')
        if (primaryCategories.value.length > 0) {
            const firstCategory = primaryCategories.value[0]
            currentCategoryName.value = firstCategory.name
            currentCategoryDesc.value = firstCategory.description
        }
    }
    
    currentPage.value = 1
    hasMore.value = true
    
    // 如果有选中的二级分类，使用二级分类ID加载商品；否则使用一级分类ID
    const categoryIdForProducts = (targetSubId != '') ? targetSubId : targetParentId
    activePrimary.value = categoryIdForProducts  // 临时设置为要加载的分类ID
    await loadProducts()
}

async function loadCategories(): Promise<void> {
  try {
    // 只获取一级分类（parent_id 为 null 的分类）
    const categoriesData = await supabaseService.getParentCategories()
    console.log('加载一级分类数据成功，数量:', categoriesData.length)
    
    // 映射数据并添加默认颜色，防止选中时背景透明导致文字看不清
    // 过滤掉医药健康相关分类
    const categories: LocalCategory[] = []
    for (let i = 0; i < categoriesData.length; i++) {
      const cat = categoriesData[i]
      const name = cat.name
      console.log('一级分类:', cat.id, name)
      if (name.includes('医药') || name.includes('健康')) {
        console.log('过滤掉分类:', name)
        continue
      }
      categories.push({
        id: cat.id,
        name: cat.name,
        icon: cat.icon,
        description: cat.description,
        color: cat.color
      })
    }
    
    console.log('最终一级分类列表数量:', categories.length)

    if (categories.length > 0) {
      primaryCategories.value = categories
      
      // 检查是否有待处理的分类ID（从其他页面跳转过来时暂存）
      if (pendingCategoryId.value != '') {
        console.log('发现待处理的分类ID:', pendingCategoryId.value)
        // 直接调用 selectPrimaryCategory，它会处理一级或二级分类ID
        const idToSelect = pendingCategoryId.value
        pendingCategoryId.value = '' // 清除暂存
        selectPrimaryCategory(idToSelect)
        return
      }
      
      // 检查是否有预设的分类ID
      if (activePrimary.value != '') {
        console.log('有预设的分类ID:', activePrimary.value)
        const target = categories.find((c: LocalCategory): boolean => c.id == activePrimary.value)
        if (target != null) {
          console.log('找到目标分类，执行选中:', target.name)
          selectPrimaryCategory(activePrimary.value)
          return
        }
      }
      
      // 默认选中第一个分类或"厨具"分类
      const defaultCategory = categories.find((c: LocalCategory): boolean => c.name.includes('厨具')) ?? categories[0]
      if (defaultCategory != null) {
        console.log('设置默认分类:', defaultCategory.name)
        selectPrimaryCategory(defaultCategory.id)
      }
    } else {
      console.warn('从Supabase获取的分类数据为空')
    }
  } catch (error) {
    console.error('加载分类数据失败:', error)
  }
}

// 加载更多
function loadMore(): void {
    if (hasMore.value && !loading.value) {
        currentPage.value++
        loadProducts()
    }
}

// 生命周期
onMounted(() => {
	loadCategories().then(() => {
		setTimeout(() => {
			if (!hasLoadedFromParams.value && activePrimary.value != '') {
				loadProducts()
			}
		}, 300)
	})
})

// 页面显示时检查是否有参数传递过来
onShow(() => {
    console.log('=== category页面onShow被调用 ===')
    
    // 检查是否有存储的分类选择
    const savedCategoryId = uni.getStorageSync('selectedCategory')
    console.log('onShow检查Storage:', savedCategoryId)
    
    if (savedCategoryId != null && savedCategoryId != '') {
        const targetId = savedCategoryId as string
        console.log('onShow发现存储的分类ID:', targetId)
        
        // 清除存储，避免下次进入默认选中
        uni.removeStorageSync('selectedCategory')
        
        // 确保分类数据已加载
        if (primaryCategories.value.length > 0) {
            // 如果当前未选中或选中的不是目标分类，则切换
            if (activePrimary.value != targetId) {
                console.log('onShow执行切换分类:', targetId)
                selectPrimaryCategory(targetId)
            } else {
                console.log('当前已是目标分类:', targetId)
            }
        } else {
            // 如果分类数据未加载，暂存ID，等待loadCategories完成后处理
            console.log('分类数据尚未加载，暂存ID等待加载')
            pendingCategoryId.value = targetId
        }
    }
})
    // 页面加载时处理参数 - 这是处理分类切换的主要入口
onLoad((options: any) => {
	    const systemInfo = uni.getSystemInfoSync()
    statusBarHeight.value = systemInfo.statusBarHeight
    
    // 获取小程序胶囊按钮信息
    // #ifdef MP-WEIXIN
    try {
        const menuButton = uni.getMenuButtonBoundingClientRect()
        if (menuButton != null) {
            capsuleButtonInfo.value = {
                left: menuButton.left,
                top: menuButton.top,
                right: menuButton.right,
                bottom: menuButton.bottom,
                width: menuButton.width,
                height: menuButton.height
            }
            navBarRight.value = (systemInfo.screenWidth - menuButton.left) + 10
        }
    } catch (e) {
        console.log('获取胶囊按钮信息失败', e)
        navBarRight.value = 90
    }
    // #endif
    
    console.log('=== category页面onLoad被调用 ===')
	
	let categoryId = ''
	let categoryName = ''
	
	// 首先检查传入的options参数
	const optObj = (options instanceof UTSJSONObject) ? (options as UTSJSONObject) : (JSON.parse(JSON.stringify(options ?? {})) as UTSJSONObject)
	const optCategoryId = optObj.getString('categoryId') ?? ''
	if (optCategoryId !== '') {
		categoryId = optCategoryId
		categoryName = optObj.getString('name') ?? ''
		console.log('✅ onLoad中找到分类参数:', categoryId, categoryName)
	}
	
	// 如果options中没有，尝试从getCurrentPages()获取
	if (categoryId == '') {
		const pages = getCurrentPages()
		if (pages.length > 0) {
			const currentPage = pages[pages.length - 1]
			const rawPageOptions = currentPage.options ?? {}
			console.log('从getCurrentPages()获取参数:', rawPageOptions)
			const pageOptObj = (rawPageOptions instanceof UTSJSONObject) ? (rawPageOptions as UTSJSONObject) : (JSON.parse(JSON.stringify(rawPageOptions)) as UTSJSONObject)
			const pageCategoryId = pageOptObj.getString('categoryId') ?? ''
			if (pageCategoryId !== '') {
				categoryId = pageCategoryId
				categoryName = pageOptObj.getString('name') ?? ''
				console.log('✅ 从getCurrentPages()找到分类参数:', categoryId, categoryName)
			}
		}
	}
	
	// 如果有找到分类ID，则选中对应的分类
	if (categoryId != '') {
		hasLoadedFromParams.value = true
		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中未找到分类参数，将使用从数据库加载的第一个分类')
		// 不再使用硬编码的默认分类，loadCategories 会设置第一个分类
	}
	
	console.log('=== category页面onLoad执行完成 ===')
})


// 添加到购物车
async function addToCart(product: Product): Promise<void> {
    uni.showLoading({ title: '检查商品...' })
    try {
        const pid = (product.id ?? '').toString()
        const merchantId = product.merchant_id ?? ''
        if (pid === '') {
            uni.hideLoading()
            uni.showToast({ title: '商品无效', icon: 'none' })
            return
        }
        
        // 检查商品是否有SKU
        const skus = await supabaseService.getProductSkus(pid)
        uni.hideLoading()
        
        if (skus.length > 0) {
            // 有规格，提示并跳转到商品详情页选择规格
            uni.showToast({
                title: '请选择规格',
                icon: 'none'
            })
            setTimeout(() => {
                uni.navigateTo({
                    url: '/pages/mall/consumer/product-detail?id=' + pid
                })
            }, 500)
        } else {
            // 无规格，直接加入购物车
            uni.showLoading({ title: '添加中...' })
            const success = await supabaseService.addToCart(pid, 1, '', merchantId)
            uni.hideLoading()
            if (success) {
                uni.showToast({
                    title: '已添加到购物车',
                    icon: 'success'
                })
                cartCount.value++
            } else {
                uni.showToast({
                    title: '添加失败，请先登录',
                    icon: 'none'
                })
            }
        }
    } catch (e) {
        console.error('添加到购物车异常', e)
        uni.hideLoading()
        uni.showToast({ title: '操作失败', icon: 'none' })
    }
}

// 导航函数
function navigateToSearch(): void { uni.navigateTo({ url: '/pages/mall/consumer/search' }) }
function navigateToCart(): void { uni.navigateTo({ url: '/pages/main/cart' }) }
function navigateToProduct(product: Product): void {
    const id = (product.id ?? '').toString()
    if (id === '') return
    const price = (product.base_price ?? 0).toString()
    const originalPrice = (product.market_price ?? '').toString()
    const name = encodeURIComponent(product.name ?? '')
    const image = encodeURIComponent(product.main_image_url ?? '')
    
    uni.navigateTo({
        url: `/pages/mall/consumer/product-detail?id=${id}&productId=${id}&price=${price}&originalPrice=${originalPrice}&name=${name}&image=${image}`
    })
}

// 相机功能
function onCamera(): void {
    uni.chooseImage({
        count: 1,
        sourceType: ['camera'],
        success: (res: ChooseImageSuccess) => {
            console.log('相机拍摄成功:', res.tempFilePaths[0])
            uni.showToast({
                title: '已拍摄，正在识别...',
                icon: 'loading'
            })
            // 这里可以添加后续的识别逻辑
            setTimeout(() => {
                 uni.showToast({
                    title: '识别成功',
                    icon: 'success'
                })
            }, 1000)
        },
        fail: (err) => {
            console.error('相机调用失败:', err)
        }
    })
}

// 扫码功能
function onScan(): void {
    uni.scanCode({
        success: (res: ScanCodeSuccess) => {
            console.log('扫码成功:', res)
            uni.showToast({
                title: '扫码成功: ' + res.result,
                icon: 'none'
            })
        },
        fail: (err) => {
            console.error('扫码失败:', err)
        }
    })
}
</script>

<style>
.category-page {
    width: 100%;
    height: 100%;
    overflow: hidden;
    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-color: #ff5000;
    z-index: 1000;
    box-shadow: 0 2px 12px rgba(255, 80, 0, 0.15);
}

/* 导航栏占位 */
.navbar-placeholder {
    flex-shrink: 0;
}

/* 搜索栏 */
/* 导航栏搜索框容器内边距调整 */
.search-container {
    height: 44px;
    padding: 0 16px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

/* 搜索框 hover 效果 */
.search-box:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 导航栏搜索框容器内边距调整 */
.search-box {
    flex: 1;
    max-width: 600px;
    background: #f0f0f0;
    border-radius: 20px;
    padding: 0 4px 0 12px;
    display: flex;
    flex-direction: row;
    align-items: center;
    transition: all 0.3s ease;
    width: 100%;
    height: 32px;
}

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

.nav-inner-search-text {
    font-size: 12px; /* 字体稍微变小 */
    color: #ffffff;
    font-weight: normal;
}

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

.nav-icon-btn {
    padding: 4px 8px 4px 4px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #ddd;
    margin-right: 8px;
}

.nav-icon {
    font-size: 18px;
}

.nav-camera-btn {
    padding: 4px 8px 4px 4px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: #ddd;
    border-right: 1px solid #ddd; /* 修复UVUE样式 */
    margin-right: 8px;
}

.nav-camera-icon {
    font-size: 20px;
}

/* 搜索按钮高度微调 */
.nav-inner-search-btn {
    padding: 0 12px; /* 减小内边距 */
    background-color: #87CEEB; /* 天空蓝 */
    border-radius: 16px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 24px; /* 随搜索框高度减小而减小 */
}

.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 #ff5000;
}

/* 分类内容区 */
.category-content {
    flex: 1;
    height: 0px;
    display: flex;
    flex-direction: row;
    padding: 0 16px;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    overflow: hidden;
}

/* 左侧一级分类 */
.primary-category {
    width: 63px;
    height: 100%;
    margin-right: 6px;
    background: white;
    border-radius: 8px;
    padding: 6px 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
}

.primary-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 4px;
    margin: 4px 6px;
    border-radius: 8px;
    transition: all 0.2s ease;
    color: #666;
    text-align: center;
}

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

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

.primary-icon {
    font-size: 20px;
    margin-bottom: 4px;
    margin-right: 0;
    text-align: center;
}

.primary-name {
    font-size: 11px;
    line-height: 1.25;
}

/* 右侧内容区 */
.product-content {
    flex: 1;
    height: 100%;
    padding: 0;
}

.category-header {
    margin-bottom: 16px;
    padding: 16px 8px 0 8px;
    /* position: sticky; REMOVED for uniapp-x support */
    /* top: 0; */
    background-color: #f8fafc;
    z-index: 10;
}

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

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

/* 二级分类 */
.sub-category-section {
    padding: 8px 8px;
    background: white;
    margin-bottom: 8px;
}

.sub-category-list {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
    justify-content: space-between;
}

.sub-category-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 4px;
    background: #f5f5f5;
    border-radius: 8px;
    flex: 1;
    min-width: 50px;
}

.sub-category-item.active {
    background: #ff5000;
}

.sub-category-item.active .sub-category-name {
    color: white;
}

.sub-category-icon {
    font-size: 16px;
    margin-bottom: 4px;
}

.sub-category-name {
    font-size: 11px;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    width: 100%;
}

/* 商品网格 */
.product-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    /* grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); REMOVED for uniapp-x support */
    /* gap: 20px; removed for compatibility */
    padding: 10px; /* add padding to compensate */
    width: 100%;
}

.product-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    width: 48%;
    margin-bottom: 12px;
}

.product-image-wrapper {
    width: 100%;
    padding-bottom: 100%;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background: #f5f5f5;
}

.product-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px;
}

.product-name {
    font-size: 13px;
    color: #333;
    margin-bottom: 5px;
    line-height: 1.4;
    height: 36px;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 8px;
}

.product-bottom {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 8px 8px;
}

.product-price {
    font-size: 15px;
    color: #ff5000;
    font-weight: bold;
}

.product-add-btn {
    width: 24px;
    height: 24px;
    background-color: #ff5000;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.add-icon {
    color: #fff;
    font-size: 16px;
    font-weight: bold;
}

.product-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 8px;
}

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

.cart-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    /* gap: 6px; */
    background: #ff5000;
    color: white;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: bold;
    /* cursor: pointer; removed for uniapp-x support */
    transition: all 0.2s ease;
}

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

.cart-icon {
    font-size: 14px;
    margin-right: 6px; /* gap replacement */
}

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

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #f0f0f0;
    border-top-color: #ff5000;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 15px;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.loading-text {
    font-size: 14px;
    color: #999;
}

/* 空状态 */
.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: #ff5000;
    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; REMOVED for uniapp-x support */
    padding: 8px 16px;
    background: #f5f5f5;
    border-radius: 20px;
}

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

/* 小屏手机 (小于414px) */
@media screen and (max-width: 414px) {
    .search-container {
        padding: 0 12px;
        height: 44px;
    }
    
    .search-box {
        padding: 0 4px 0 12px;
        margin: 0;
        height: 30px;
    }
    
    .category-content {
        padding: 0 4px;
    }
    
    .primary-category {
        width: 56px;
        padding: 4px 0;
        margin-right: 4px;
        border-radius: 8px;
    }
    
    .primary-item {
        margin: 2px 2px;
        padding: 4px 2px;
        border-radius: 6px;
    }
    
    .primary-icon {
        margin-right: 0;
        margin-bottom: 2px;
        font-size: 16px;
    }
    
    .primary-name {
        font-size: 9px;
        line-height: 1.1;
    }
    
    .product-grid {
        padding: 0 4px 20px 4px;
    }

    .product-card {
        width: 48%;
        margin: 1%;
    }
    
    .product-spec,
    .manufacturer,
    .original-price,
    .sales-info,
    .product-badge {
        display: none;
    }
    
    .product-info {
        padding: 6px;
    }
    
    .product-image-wrapper {
        padding-bottom: 100%;
    }
    
    .product-name {
        font-size: 12px;
        height: 32px;
        line-height: 1.3;
        margin-bottom: 2px;
        overflow: hidden;
        text-overflow: ellipsis;
        lines: 2;
    }
    
    .price-section {
        margin-bottom: 0;
        margin-top: 4px;
        justify-content: space-between;
        width: 100%;
    }
    
    .price-symbol {
        font-size: 10px;
    }
    
    .price-value {
        font-size: 14px;
    }
    
    .product-meta {
        display: none;
    }
    
    .category-header {
        padding: 8px 4px 0 4px;
    }
    
    .category-title {
        font-size: 14px;
    }
    
    .category-desc {
        font-size: 11px;
    }
}

/* 中屏手机 (415px-768px) */
@media screen and (min-width: 415px) and (max-width: 768px) {
    .search-container {
        padding: 0 16px;
        height: 44px;
    }
    
    .primary-category {
        width: 62px;
        padding: 6px 0;
        margin-right: 6px;
        border-radius: 8px;
    }
    
    .primary-item {
        margin: 2px 2px;
        padding: 5px 2px;
        border-radius: 6px;
    }
    
    .primary-icon {
        font-size: 18px;
        margin-bottom: 3px;
    }
    
    .primary-name {
        font-size: 10px;
        line-height: 1.1;
    }
    
    .product-card {
        width: 46%;
        margin: 2%;
    }
}

/* 平板设备 (769px-1024px) */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .search-container {
        padding: 0 16px;
        height: 44px;
    }
    
    .primary-category {
        width: 100px;
        padding: 10px 0;
        margin-right: 16px;
    }
    
    .primary-item {
        margin: 4px 4px;
        padding: 10px 6px;
    }
    
    .primary-icon {
        font-size: 22px;
        margin-bottom: 5px;
    }
    
    .primary-name {
        font-size: 12px;
    }
    
    .product-card {
        width: 30%;
        margin: 1.5%;
    }
}

/* 桌面端 (1025px以上) */
@media screen and (min-width: 1025px) {
    .search-container {
        padding: 0 16px;
        height: 44px;
    }
    
    .category-content {
        padding: 0 24px;
    }
    
    .primary-category {
        width: 160px;
        padding: 16px 0;
        margin-right: 30px;
    }
    
    .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-card {
        border-radius: 14px;
        width: 22%;
        margin: 1.5%;
    }
    
    .product-info {
        padding: 20px;
    }
    
    .product-name {
        font-size: 13px;
    }
    
    .product-spec {
        font-size: 14px;
    }
    
    .price-value {
        font-size: 22px;
    }
}

/* 大桌面端 (1400px以上) */
@media screen and (min-width: 1400px) {
    .category-content {
        max-width: 1600px;
        padding: 0 32px;
    }
    
    .primary-category {
        margin-right: 40px;
    }
    
    .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-card {
        border-radius: 16px;
        width: 17%;
        margin: 1.5%;
    }
    
    .product-image-wrapper {
        padding-bottom: 100%;
    }
    
    .product-info {
        padding: 24px;
    }
    
    .product-name {
        font-size: 13px;
    }
    
    .product-spec {
        font-size: 15px;
    }
    
    .price-value {
        font-size: 24px;
    }
}
</style>
