<!-- pages/mall/consumer/index.uvue -->
<template>
	<view class="medic-home">
		<!-- 鏅鸿兘椤堕儴瀵艰埅鏍?- 娣诲姞婊氬姩闅愯棌鏁堟灉 -->
		<view 
			class="smart-navbar" 
			:style="{ 
				paddingTop: statusBarHeight + 'px',
				transform: showNavbar ? 'translateY(0)' : 'translateY(-100%)'
			}"
		>
			<view class="search-container">
				<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>

		<!-- 瀵艰埅鏍忓崰浣嶇 - 绉婚櫎锛屾敼涓轰娇鐢?margin-top -->
		<!-- <view class="navbar-placeholder" :style="{ height: (statusBarHeight + 44) + 'px' }"></view> -->
		
		<!-- 涓诲唴瀹瑰尯 -->
		<scroll-view 
			scroll-y 
			class="main-scroll"
			:style="{ height: scrollHeight + 'px' }"
			refresher-enabled
			:refresher-triggered="refreshing"
			@refresherrefresh="onRefresh"
			@scrolltolower="loadMore"
			@scroll="handleScroll"
		>
			<!-- 鏅鸿兘鍋ュ悍鍗＄墖 -->
			<view class="smart-health-card" :style="{ marginTop: (statusBarHeight + 44 + 10) + 'px' }">
				<view class="health-content">
					<view class="health-header">
						<text class="health-title">鏅鸿兘鍋ュ悍鍔╂墜</text>
						<text class="health-subtitle">鏍规嵁鎮ㄧ殑鍋ュ悍鏁版嵁鎺ㄨ崘</text>
					</view>
					<view class="health-tips">
						<text class="tip-item">馃挕 鎸夋椂鐢ㄨ嵂鎻愰啋</text>
						<text class="tip-item">馃搵 鍋ュ悍璁板綍璺熻釜</text>
						<text class="tip-item">馃┖ 鍦ㄧ嚎闂瘖鍜ㄨ</text>
					</view>
				</view>
			</view>

			<!-- 鏅鸿兘鍒嗙被缃戞牸 - 瀹屽叏鍝嶅簲寮?-->
			<view class="smart-categories">
				<view class="section-header">
					<text class="section-title">鏅鸿兘鍒嗙被</text>
					<text class="section-desc">蹇€熷畾浣嶆墍闇€鑽搧</text>
				</view>
				<view class="category-grid">
					<view 
						v-for="category in categories" 
						:key="category.id"
						class="category-card"
						@click="switchCategory(category)"
						:style="{ '--card-color': category.color }"
					>
						<view class="card-icon">
							<text>{{ category.icon }}</text>
						</view>
						<text class="card-name">{{ category.name }}</text>
						<text class="card-desc">{{ category.desc }}</text>
					</view>
				</view>
			</view>

			<!-- 鍋ュ悍璧勮杞挱 -->
			<view class="health-news">
				<view class="news-header">
					<text class="news-title">鍋ュ悍璧勮</text>
					<text class="news-more" @click="navigateToNews">鏇村 ></text>
				</view>
				<swiper 
					class="news-swiper"
					:autoplay="true"
					:interval="4000"
					:duration="500"
					:circular="true"
					:indicator-dots="true"
					indicator-color="rgba(255,255,255,0.3)"
					indicator-active-color="#4CAF50"
				>
					<swiper-item 
						v-for="news in healthNews" 
						:key="news.id"
						class="news-item"
					>
						<view class="news-content" @click="viewNewsDetail(news)">
							<image 
								class="news-image" 
								:src="news.image" 
								mode="aspectFill"
							/>
							<view class="news-overlay">
								<text class="news-tag">{{ news.tag }}</text>
								<text class="news-caption">{{ news.title }}</text>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>

			<!-- 鏅鸿兘鏈嶅姟鍏ュ彛 -->
			<view class="smart-services">
				<view class="services-grid">
					<view class="service-card" @click="navigateToConsultation">
						<view class="service-icon" style="background: #2196F3;">
							<text>馃懆鈥嶁殨锔?/text>
						</view>
						<text class="service-name">鍦ㄧ嚎闂瘖</text>
						<text class="service-desc">涓夌敳鍖荤敓鍦ㄧ嚎</text>
					</view>
					<view class="service-card" @click="navigateToPrescription">
						<view class="service-icon" style="background: #4CAF50;">
							<text>馃搵</text>
						</view>
						<text class="service-name">鐢靛瓙澶勬柟</text>
						<text class="service-desc">鍖荤敓寮€鏂硅喘鑽?/text>
					</view>
					<view class="service-card" @click="navigateToOTC">
						<view class="service-icon" style="background: #ff5000;">
							<text>馃拪</text>
						</view>
						<text class="service-name">闈炲鏂硅嵂</text>
						<text class="service-desc">瀹夊叏鑷富閫夎喘</text>
					</view>
					<view class="service-card" @click="navigateToHealthTools">
						<view class="service-icon" style="background: #9C27B0;">
							<text>馃┖</text>
						</view>
						<text class="service-name">鍋ュ悍宸ュ叿</text>
						<text class="service-desc">鍋ュ悍绠＄悊鍔╂墜</text>
					</view>
				</view>
			</view>

			<!-- 鐑攢鑽搧涓撳尯 -->
			<view class="hot-products">
				<view class="section-header">
					<view class="title-section">
						<text class="section-icon">馃敟</text>
						<text class="section-title">鐑攢鑽搧</text>
					</view>
					<view class="sort-tabs">
						<text 
							v-for="tab in sortTabs" 
							:key="tab.id"
							:class="['sort-tab', { active: activeSort === tab.id }]"
							@click="switchSort(tab.id)"
						>
							{{ tab.name }}
						</text>
					</view>
				</view>
				
				<view class="products-grid">
					<view 
						v-for="product in hotProducts" 
						:key="product.id"
						class="product-card"
						@click="navigateToProduct(product)"
					>
						<view class="product-badge" v-if="product.is_hot">鐑攢</view>
						<image 
							class="product-image" 
							:src="product.main_image_url" 
							mode="aspectFill"
						/>
						<view class="product-info">
							<text class="product-name">{{ product.name }}</text>
							<!-- spec is omitted if not available -->
							
							<view class="price-section">
								<view class="current-price">
									<text class="price-symbol">楼</text>
									<text class="price-value">{{ product.base_price ?? product.price ?? 0 }}</text>
								</view>
								<text class="original-price" v-if="product.market_price != null && product.base_price != null && product.market_price! > product.base_price!">
									楼{{ product.market_price }}
								</text>
							</view>
							
							<view class="product-meta">
								<text class="manufacturer">{{ product.brand_name || product.shop_name || '鑷惀' }}</text>
								<view class="sales-info">
									<text class="sales-count">宸插敭{{ product.sale_count }}</text>
								</view>
							</view>
							
							<view class="product-action">
								<view class="cart-btn" @click.stop="addToCart(product)">
									<text class="cart-icon">+</text>
									<text class="cart-text">鍔犲叆璐墿杞?/text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 瀹跺涵甯稿鑽?-->
			<view class="family-medicine">
				<view class="section-header">
					<view class="title-section">
						<text class="section-icon">馃彔</text>
						<text class="section-title">瀹跺涵甯稿鑽?/text>
					</view>
					<text class="section-subtitle">瀹堟姢鍏ㄥ鍋ュ悍</text>
				</view>
				
				<view class="family-grid">
					<view 
						v-for="item in familyItems" 
						:key="item.id"
						class="family-item"
						@click="navigateToCategory(item)"
					>
						<view class="family-icon" :style="{ backgroundColor: item.color }">
							<text>{{ item.icon }}</text>
						</view>
						<text class="family-name">{{ item.name }}</text>
						<text class="family-desc">{{ item.desc }}</text>
					</view>
				</view>
			</view>

			<!-- 鏅鸿兘鎺ㄨ崘妯″潡宸查殣钘?-->

			<!-- 鍋ュ悍鎻愰啋 -->
			<view class="health-reminder">
				<view class="reminder-content">
					<text class="reminder-icon">鈴?/text>
					<view class="reminder-text">
						<text class="reminder-title">鍋ュ悍鎻愰啋</text>
						<text class="reminder-desc">鎮ㄦ湁1涓緟鐢ㄨ嵂鎻愰啋锛岀偣鍑绘煡鐪嬭鎯?/text>
					</view>
					<view class="reminder-action" @click="navigateToReminders">
						<text class="action-text">鏌ョ湅</text>
					</view>
				</view>
			</view>

			<!-- 搴曢儴瀹夊叏鍖哄煙 -->
			<view class="safe-area"></view>
		</scroll-view>
	</view>
</template>

<script setup lang="uts">
import { ref, reactive, onMounted } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import supabaseService from '@/utils/supabaseService.uts'
import type { Product, Category } from '@/utils/supabaseService.uts'
import { getCurrentUser } from '@/utils/store.uts'

// 鍝嶅簲寮忔暟鎹?
const statusBarHeight = ref(0)
const scrollHeight = ref(0)
const refreshing = ref(false)
const loading = ref(false)
const isFirstShow = ref(true)
const hasMore = ref(true)
const activeSort = ref('sales')
const activeFilter = ref('recommend')
const currentPage = ref(1)

// 鏁版嵁婧?
const hotProducts = ref<Product[]>([])
const recommendedProducts = ref<Product[]>([])

// 灞忓箷灏哄妫€娴?
const isMobile = ref(false)

// 瀵艰埅鏍忔樉绀烘帶鍒?
const showNavbar = ref(true)
const lastScrollTop = ref(0)
const scrollThreshold = 30 // 闄嶄綆婊氬姩闃堝€硷紝浣垮叾鏇寸伒鏁?
const scrollingUp = ref(false)

// 鍒嗙被鏁版嵁 - 浠嶴upabase鑾峰彇
const categories = ref<Category[]>([])

// 鎺掑簭鏍囩
const sortTabs = [
	{ id: 'recommend', name: '鏅鸿兘鎺ㄨ崘' },
	{ id: 'sales', name: '閿€閲? },
	{ id: 'price', name: '浠锋牸' },
	{ id: 'new', name: '鏂板搧' },
	{ id: 'discount', name: '鐗逛环' }
]


// 鍋ュ悍璧勮
const healthNews = [
	{
		id: 'news1',
		title: '绉嬪娴佹劅棰勯槻鎸囧崡锛岀瀛﹂槻鎶ゅ仴搴疯繃鍐?,
		tag: '鍋ュ悍绉戞櫘',
		image: 'https://picsum.photos/800/400?random=health1'
	},
	{
		id: 'news2',
		title: '瀹跺涵甯稿鑽竻鍗曪紝涓哄浜哄仴搴蜂繚椹炬姢鑸?,
		tag: '瀹跺涵鐢ㄨ嵂',
		image: 'https://picsum.photos/800/400?random=health2'
	},
	{
		id: 'news3',
		title: '鎱㈡€х梾绉戝绠＄悊锛屾彁楂樼敓娲昏川閲?,
		tag: '鍋ュ悍绠＄悊',
		image: 'https://picsum.photos/800/400?random=health3'
	}
]

// 鑾峰彇鍒嗙被鏁版嵁
const loadCategories = async () => {
  try {
    const categoriesData = await supabaseService.getCategories()
    // 鏄犲皠瀛楁锛氭牴鎹甿l_categories琛ㄧ粨鏋勬槧灏?
    categories.value = categoriesData.map((cat: any) => ({
      id: cat.id,
      name: cat.name,
      icon: cat.icon_url || '馃摝',  // 浣跨敤icon_url瀛楁
      desc: cat.description || '',  // 浣跨敤description瀛楁
      color: '#4CAF50'  // 榛樿棰滆壊锛岃〃涓彲鑳芥病鏈塩olor瀛楁
    }))
  } catch (error) {
    console.error('鍔犺浇鍒嗙被鏁版嵁澶辫触:', error)
    // 濡傛灉鍔犺浇澶辫触锛屼娇鐢ㄩ粯璁ゅ垎绫讳綔涓哄悗澶?
    categories.value = [
      { 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: '#ff5000' }
    ]
  }
}

  // 鑾峰彇鐑攢鍟嗗搧锛堟牴鎹綋鍓嶆帓搴忔柟寮忥級
const loadHotProducts = async () => {
  try {
    let products: Product[] = []
    const limit = 6
    
    console.log('鍔犺浇鐑攢鍟嗗搧锛屽綋鍓嶆帓搴忔柟寮?', activeSort.value)
    
    switch (activeSort.value) {
      case 'sales':
        console.log('璋冪敤 getHotProducts')
        products = await supabaseService.getHotProducts(limit)
        break
      case 'price':
        console.log('璋冪敤 getProductsByPrice')
        // 鎸変环鏍煎崌搴忥紙浠庝綆鍒伴珮锛?
        products = await supabaseService.getProductsByPrice(limit, true)
        break
      case 'new':
        console.log('璋冪敤 getProductsByNewest')
        // 鎸夊垱寤烘椂闂达紝鏈€鏂扮殑鍦ㄥ墠
        products = await supabaseService.getProductsByNewest(limit)
        break
      case 'recommend':
        console.log('璋冪敤 getRecommendedProducts')
        // 鎺ㄨ崘鍟嗗搧锛堝甫badge鐨勫晢鍝侊級
        products = await supabaseService.getRecommendedProducts(limit)
        break
      case 'discount':
        console.log('璋冪敤 getDiscountProducts')
        // 鐗逛环鍟嗗搧锛坆adge涓?鐗逛环'锛?
        products = await supabaseService.getDiscountProducts(limit)
        break
      default:
        console.log('璋冪敤榛樿 getHotProducts')
        products = await supabaseService.getHotProducts(limit)
    }
    
    console.log('鍔犺浇鍒扮殑鍟嗗搧鏁伴噺:', products.length)
    hotProducts.value = products
  } catch (error) {
    console.error('鍔犺浇鐑攢鍟嗗搧澶辫触:', error)
    hotProducts.value = []
  }
}

// 鑾峰彇鎺ㄨ崘鍟嗗搧
const loadRecommendedProducts = async (limit: number = 6) => {
  recommendedProducts.value = await supabaseService.getRecommendedProducts(limit)
}

// 鍒濆鍖栨暟鎹?
const initData = async () => {
	// 棣栧厛纭繚鐢ㄦ埛璧勬枡宸插姞杞?
	try {
		await getCurrentUser()
		console.log('涓婚〉鍒濆鍖栵細鐢ㄦ埛璧勬枡鍔犺浇瀹屾垚')
	} catch (error) {
		console.error('鍔犺浇鐢ㄦ埛璧勬枡澶辫触:', error)
	}
	await loadCategories()
	await loadHotProducts()
	await loadRecommendedProducts()
}


// 瀹跺涵甯稿鑽?
const familyItems = [
	{
		id: 'family1',
		name: '鍒涘彲璐?,
		desc: '浼ゅ彛鎶ょ悊',
		icon: '馃┕',
		color: '#ff5000',
		categoryId: 'external'
	},
	{
		id: 'family2',
		name: '浣撴俯璁?,
		desc: '鍋ュ悍鐩戞祴',
		icon: '馃尅锔?,
		color: '#2196F3',
		categoryId: 'device'
	},
	{
		id: 'family3',
		name: '娑堟瘨閰掔簿',
		desc: '鐜娑堟瘨',
		icon: '馃И',
		color: '#4CAF50',
		categoryId: 'external'
	},
	{
		id: 'family4',
		name: '鍙ｇ僵',
		desc: '鏃ュ父闃叉姢',
		icon: '馃樂',
		color: '#607D8B',
		categoryId: 'device'
	},
	{
		id: 'family5',
		name: '閫€鐑创',
		desc: '鐗╃悊闄嶆俯',
		icon: '馃',
		color: '#00BCD4',
		categoryId: 'cold'
	},
	{
		id: 'family6',
		name: '妫夌绾卞竷',
		desc: '浼ゅ彛澶勭悊',
		icon: '馃┕',
		color: '#ff5000',
		categoryId: 'external'
	}
]

// 鐢熷懡鍛ㄦ湡
onMounted(async () => {
	initPage()
	await initData()
})

// 椤甸潰鏄剧ず鏃堕噸缃姸鎬?
onShow(() => {
	console.log('=== index椤甸潰onShow琚皟鐢?===')
	console.log('涓婚〉閲嶆柊鏄剧ず锛岄噸缃〉闈㈢姸鎬?)
	
	// 閲嶇疆瀵艰埅鏍忔樉绀虹姸鎬?
	showNavbar.value = true
	lastScrollTop.value = 0
	
	// 閲嶇疆婊氬姩浣嶇疆鍒伴《閮?
	// 娉ㄦ剰锛氳繖閲屼笉鑳界洿鎺ユ搷浣渟croll-view鐨勬粴鍔ㄤ綅缃?
	// 浣嗗彲浠ラ噸缃竴浜涢〉闈㈢姸鎬?
	
	// 娉ㄦ剰锛氳繖閲屼笉鍐嶆竻闄electedCategory
	// 璁╁垎绫婚〉闈㈠湪鎴愬姛璇诲彇鍚庤嚜琛屾竻闄?
	// 杩欐牱鍙互纭繚鍒嗙被椤甸潰鑳芥纭鍙栧埌浼犻€掔殑鏁版嵁
	
	// 姣忔椤甸潰鏄剧ず鏃跺皾璇曟洿鏂扮敤鎴疯祫鏂?
	if (!isFirstShow.value) {
		getCurrentUser().then(profile => {
			if (profile) {
				console.log('涓婚〉onShow锛氱敤鎴疯祫鏂欐洿鏂版垚鍔?)
			} else {
				console.log('涓婚〉onShow锛氱敤鎴疯祫鏂欎负绌猴紝鍙兘鏈櫥褰?)
			}
		}).catch(error => {
			console.error('涓婚〉onShow锛氬姞杞界敤鎴疯祫鏂欏け璐?', error)
		})
	} else {
		isFirstShow.value = false
		console.log('涓婚〉棣栨鏄剧ず锛岃烦杩噊nShow涓殑鐢ㄦ埛璧勬枡妫€鏌ワ紝浜ょ敱initData澶勭悊')
	}
	
	console.log('=== index椤甸潰onShow鎵ц瀹屾垚 ===')
})

// 鍒濆鍖栭〉闈?
const initPage = () => {
	const systemInfo = uni.getSystemInfoSync()
	statusBarHeight.value = systemInfo.statusBarHeight || 0
	
	// 璁＄畻婊氬姩鍖哄煙楂樺害 - 浣跨敤鏁翠釜绐楀彛楂樺害
	const windowHeight = systemInfo.windowHeight
	scrollHeight.value = windowHeight
	
	// 妫€娴嬪睆骞曞昂瀵?
	const screenWidth = systemInfo.screenWidth || systemInfo.windowWidth
	isMobile.value = screenWidth < 768 // 灏忎簬768px涓哄皬灞忓箷
}

// 澶勭悊婊氬姩浜嬩欢
const handleScroll = (event: any) => {
	const scrollTop = event.detail.scrollTop
	const currentTime = Date.now()
	
	// 鍒ゆ柇婊氬姩鏂瑰悜
	if (scrollTop > lastScrollTop.value) {
		// 鍚戜笅婊氬姩
		scrollingUp.value = false
		// 鍚戜笅婊氬姩瓒呰繃闃堝€兼椂闅愯棌瀵艰埅鏍?
		if (scrollTop > scrollThreshold && showNavbar.value) {
			showNavbar.value = false
		}
	} else if (scrollTop < lastScrollTop.value) {
		// 鍚戜笂婊氬姩
		scrollingUp.value = true
		// 鍚戜笂婊氬姩鏃舵樉绀哄鑸爮
		if (!showNavbar.value) {
			showNavbar.value = true
		}
	}
	
	// 婊氬姩鍒伴《閮ㄦ椂寮哄埗鏄剧ず瀵艰埅鏍?
	if (scrollTop <= 10) {
		showNavbar.value = true
	}
	
	lastScrollTop.value = scrollTop
	
	// 璋冭瘯淇℃伅锛堝紑鍙戞椂鍙惎鐢級
	// console.log(`Scroll: ${scrollTop}, ShowNavbar: ${showNavbar.value}, ScrollingUp: ${scrollingUp.value}`)
}

// 閲嶇疆瀵艰埅鏍忔樉绀虹姸鎬侊紙渚嬪鐐瑰嚮鍥炲埌椤堕儴鏃讹級
const resetNavbar = () => {
	showNavbar.value = true
	lastScrollTop.value = 0
}

// 鍒囨崲鍒嗙被 - 璺宠浆鍒板垎绫婚〉闈㈠苟浼犻€掑垎绫籌D
const switchCategory = (category: any) => {
	console.log('=== switchCategory鍑芥暟寮€濮嬫墽琛?===')
	console.log('鍒嗙被ID:', category.id, '鍒嗙被鍚嶇О:', category.name)
	
	// 娓呴櫎鍙兘瀛樺湪鐨勬棫鏁版嵁
	uni.removeStorageSync('selectedCategory')
	
	// 鐢熸垚鍞竴鐨勬椂闂存埑鍜岄殢鏈哄弬鏁帮紝纭繚姣忔璺宠浆閮芥槸鏂扮殑椤甸潰
	const timestamp = Date.now()
	const randomParam = Math.random().toString(36).substring(2, 8)
	
	// 鏋勫缓甯﹀弬鏁扮殑URL锛岀洿鎺ラ€氳繃URL浼犻€掑垎绫讳俊鎭?
	const url = `/pages/mall/consumer/category?categoryId=${category.id}&name=${encodeURIComponent(category.name)}&timestamp=${timestamp}&random=${randomParam}`
	
	console.log('璺宠浆URL:', url)
	console.log('鍒嗙被ID鍙傛暟:', category.id)
	console.log('鏃堕棿鎴?', timestamp)
	console.log('闅忔満鍙傛暟:', randomParam)
	
	// 浣跨敤uni.reLaunch璺宠浆鍒板垎绫婚〉闈紝鍏抽棴鎵€鏈夐〉闈㈠苟鎵撳紑鏂伴〉闈?
	// 杩欐牱鍙互纭繚姣忔璺宠浆閮芥槸鍏ㄦ柊鐨勯〉闈㈠疄渚嬶紝閬垮厤椤甸潰缂撳瓨闂
	// 铏界劧杩欎細鍏抽棴褰撳墠涓婚〉锛屼絾鍙互纭繚鍒嗙被椤甸潰鎬绘槸閲嶆柊鍔犺浇
	uni.reLaunch({
		url: url,
		success: () => {
			console.log('鉁?浣跨敤reLaunch璺宠浆鍒板垎绫婚〉闈㈡垚鍔?)
			console.log('=== switchCategory鍑芥暟鎵ц瀹屾垚 ===')
		},
		fail: (err) => {
			console.error('鉂?璺宠浆鍒板垎绫婚〉闈㈠け璐?', err)
			console.log('=== switchCategory鍑芥暟鎵ц瀹屾垚 ===')
		}
	})
}

// 鍒囨崲鎺掑簭
const switchSort = (sortId: string) => {
	activeSort.value = sortId
	// 閲嶆柊鍔犺浇鐑攢鍟嗗搧锛屾帓搴忕敱 Supabase 鏈嶅姟澶勭悊
	loadHotProducts()
}

// 鍒囨崲绛涢€夊櫒
const switchFilter = (filterId: string) => {
	activeFilter.value = filterId
	// 閲嶆柊鍔犺浇鎺ㄨ崘鍟嗗搧锛岀瓫閫夌敱 Supabase 鏈嶅姟澶勭悊
	loadRecommendedProducts()
}

// 鏌ョ湅鏂伴椈璇︽儏
const viewNewsDetail = (news: any) => {
	uni.navigateTo({
		url: `/pages/news/detail?id=${news.id}`
	})
}

// 涓嬫媺鍒锋柊
const onRefresh = () => {
	refreshing.value = true
	setTimeout(() => {
		refreshing.value = false
		uni.showToast({
			title: '鍒锋柊鎴愬姛',
			icon: 'success'
		})
	}, 1500)
}

// 鍔犺浇鏇村
const loadMore = async () => {
	if (loading.value || !hasMore.value) return
	
	loading.value = true
	try {
		// 澧炲姞闄愬埗浠ュ姞杞芥洿澶氭帹鑽愬晢鍝?
		const currentLimit = recommendedProducts.value.length + 6
		await loadRecommendedProducts(currentLimit)
		
		// 鍋囪濡傛灉杩斿洖鐨勫晢鍝佹暟閲忓皬浜庤姹傜殑闄愬埗锛屽垯娌℃湁鏇村鏁版嵁
		if (recommendedProducts.value.length < currentLimit) {
			hasMore.value = false
		}
		
		uni.showToast({
			title: '鍔犺浇瀹屾垚',
			icon: 'success'
		})
	} catch (error) {
		console.error('鍔犺浇鏇村澶辫触:', error)
		uni.showToast({
			title: '鍔犺浇澶辫触',
			icon: 'none'
		})
	} finally {
		loading.value = false
	}
}

// 娣诲姞鍒拌喘鐗╄溅
const addToCart = async (product: any) => {
	uni.showLoading({ title: '娣诲姞涓?..' })
	try {
        // 灏濊瘯璋冪敤 Supabase 鏈嶅姟娣诲姞
		const success = await supabaseService.addToCart(product.id, 1, '', '')
		if (success) {
			uni.showToast({
				title: '宸叉坊鍔犲埌璐墿杞?,
				icon: 'success'
			})
		} else {
            // 澶辫触锛堝鏈櫥褰曪級锛屽洖閫€鍒版湰鍦板瓨鍌ㄦ垨鎻愮ず鐧诲綍
            // 杩欓噷绠€鍗曟彁绀哄け璐?
			uni.showToast({
				title: '娣诲姞澶辫触锛岃鍏堢櫥褰?,
				icon: 'none'
			})
		}
	} catch (e) {
		console.error('娣诲姞鍒拌喘鐗╄溅寮傚父', e)
        uni.showToast({
            title: '鎿嶄綔寮傚父',
            icon: 'none'
        })
	} finally {
        uni.hideLoading()
    }
}

// 瀵艰埅鍑芥暟
const navigateToSearch = () => uni.navigateTo({ url: '/pages/mall/consumer/search' })
const navigateToNews = () => uni.navigateTo({ url: '/pages/news/list' })
const navigateToProduct = (product: any) => {
	// 浣跨敤productId锛堝鏋滃瓨鍦級浣滀负璺宠浆鐨勫晢鍝両D锛屽惁鍒欎娇鐢╥d
	const productId = product.productId || product.id
	
    const name = product.name || ''
    // 浣跨敤 main_image_url
    const image = product.main_image_url || product.image || '/static/product1.jpg'
    const price = (product.base_price || product.price || 0).toString()
    const originalPrice = (product.market_price || product.original_price || (parseFloat(price) * 1.2).toFixed(2))?.toString()
    
    // 鎵嬪姩鏋勫缓URL锛岄伩鍏嶅弻閲嶇紪鐮侀棶棰?
	uni.navigateTo({ 
		url: `/pages/mall/consumer/product-detail?id=${productId}&price=${price}&originalPrice=${originalPrice}&name=${encodeURIComponent(name)}&image=${encodeURIComponent(image)}` 
	})
}
const navigateToCategory = (item: any) => {
	uni.navigateTo({
		url: `/pages/mall/consumer/search?keyword=${encodeURIComponent(item.name)}&type=family`
	})
}
const navigateToConsultation = () => uni.navigateTo({ url: '/pages/medicine/consultation' })
const navigateToPrescription = () => uni.navigateTo({ url: '/pages/medicine/prescription' })
const navigateToOTC = () => uni.navigateTo({ url: '/pages/medicine/otc' })
const navigateToHealthTools = () => uni.navigateTo({ url: '/pages/medicine/tools' })
const navigateToReminders = () => uni.navigateTo({ url: '/pages/user/reminders' })
</script>

<style>
/* 鍏ㄥ眬閲嶇疆 */
.medic-home * {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

.medic-home {
	width: 100%;
	min-height: 100vh;
	background: #f8fafc;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
	line-height: 1.5;
	display: flex;
	flex-direction: column;
}

/* 鏅鸿兘瀵艰埅鏍?- 閲嶆柊璁捐甯冨眬 */
.smart-navbar {
	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); /* 璋冩暣涓轰笌鍒嗙被椤典竴鑷?*/
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform, opacity;
	pointer-events: auto; /* 纭繚瀵艰埅鏍忓彲浠ヤ氦浜?*/
	backface-visibility: hidden; /* 鏀瑰杽鍔ㄧ敾鎬ц兘 */
	-webkit-backface-visibility: hidden;
}

/* 瀵艰埅鏍忔悳绱㈡瀹瑰櫒鍐呰竟璺濊皟鏁?*/
.search-container {
	height: 44px; /* 璋冩暣涓轰笌娑堟伅椤典竴鑷寸殑楂樺害 */
	padding: 0 16px;
	display: flex;
	flex-direction: row; /* 鏄惧紡璁剧疆 flex-direction: row */
	align-items: center;
	justify-content: space-between;
	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; /* UVUE 鏄惧紡璁剧疆 row */
	align-items: center;
	cursor: pointer;
	transition: all 0.3s ease;
	width: 100%;
	height: 32px; /* 鍑忓皬楂樺害锛屼笌椤堕儴楂樺害44px閫傞厤锛岀暐灏忎簬椤堕儴楂樺害 */
}

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

.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-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; /* 闅忔悳绱㈡楂樺害鍑忓皬鑰屽噺灏?*/
}

.nav-inner-search-text {
	font-size: 12px; /* 瀛椾綋绋嶅井鍙樺皬 */
	color: #ffffff;
	font-weight: 500;
}

/* 瀵艰埅鏍忓崰浣嶇 */
.navbar-placeholder {
	width: 100%;
	flex-shrink: 0;
}

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

/* 涓诲唴瀹瑰尯鍩?*/
.main-scroll {
	flex: 1;
	padding: 0 16px 16px;
	max-width: 1400px;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch; /* 鏀瑰杽iOS婊氬姩浣撻獙 */
}

/* 鏅鸿兘鍋ュ悍鍗＄墖 */
.smart-health-card {
	background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
	border-radius: 16px;
	padding: 20px;
	margin-bottom: 20px;
	/* margin-top 鐢?style 鍔ㄦ€佹帶鍒?*/
	color: white;
}

.health-content {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.health-header {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.health-title {
	font-size: 20px;
	font-weight: bold;
}

.health-subtitle {
	font-size: 14px;
	opacity: 0.9;
}

.health-tips {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 8px;
}

.tip-item {
	font-size: 13px;
	padding: 6px 12px;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 20px;
	backdrop-filter: blur(10px);
}

/* 鏅鸿兘鍒嗙被缃戞牸 */
.smart-categories {
	background: white;
	border-radius: 16px;
	padding: 20px;
	margin-bottom: 20px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.section-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 20px;
}

.section-title {
	font-size: 18px;
	font-weight: bold;
	color: #333;
}

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

/* 鍒嗙被缃戞牸甯冨眬 */
.category-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 16px;
}

.category-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 16px;
	background: #f8f9fa;
	border-radius: 12px;
	cursor: pointer;
	transition: all 0.3s ease;
	border: 1px solid transparent;
}

.category-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	border-color: var(--card-color, #4CAF50);
}

.card-icon {
	width: 56px;
	height: 56px;
	border-radius: 28px;
	background: var(--card-color, #4CAF50);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 12px;
}

.card-icon text {
	font-size: 24px;
	color: white;
}

.card-name {
	font-size: 15px;
	font-weight: 700;
	color: #333;
	margin-bottom: 4px;
	text-align: center;
}

.card-desc {
	font-size: 12px;
	color: #666;
	text-align: center;
}

/* 鍋ュ悍璧勮 */
.health-news {
	background: white;
	border-radius: 16px;
	padding: 20px;
	margin-bottom: 20px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.news-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16px;
}

.news-title {
	font-size: 18px;
	font-weight: bold;
	color: #333;
}

.news-more {
	font-size: 14px;
	color: #4CAF50;
	cursor: pointer;
}

.news-swiper {
	height: 200px;
	border-radius: 12px;
	overflow: hidden;
}

.news-content {
	position: relative;
	height: 100%;
	border-radius: 12px;
	overflow: hidden;
}

.news-image {
	width: 100%;
	height: 100%;
	/* display: block; REMOVED for uniapp-x support */
}

.news-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
	padding: 20px;
	color: white;
}

.news-tag {
	display: inline-block;
	background: #4CAF50;
	padding: 4px 12px;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 500;
	margin-bottom: 8px;
}

.news-caption {
	font-size: 16px;
	font-weight: 700;
	/* display: block; REMOVED for uniapp-x support */
	line-height: 1.4;
}

/* 鏅鸿兘鏈嶅姟 */
.smart-services {
	background: white;
	border-radius: 16px;
	padding: 20px;
	margin-bottom: 20px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.services-grid {
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
	/* grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); REMOVED */
	/* gap: 20px; REMOVED */
}

.service-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20px;
	background: #f8f9fa;
	border-radius: 12px;
	/* cursor: pointer; REMOVED for uniapp-x support */
	transition: all 0.3s ease;
}

.service-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.service-icon {
	width: 60px;
	height: 60px;
	border-radius: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 12px;
}

.service-icon text {
	font-size: 28px;
	color: white;
}

.service-name {
	font-size: 15px;
	font-weight: 700;
	color: #333;
	margin-bottom: 4px;
}

.service-desc {
	font-size: 12px;
	color: #666;
}

/* 鐑攢鑽搧 */
.hot-products {
	background: white;
	border-radius: 16px;
	padding: 20px;
	margin-bottom: 20px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.section-header {
	display: flex;
	flex-direction: column; /* 鏍囬鍜岀瓫閫夊櫒鍨傜洿鎺掑垪 */
	align-items: flex-start;
	margin-bottom: 20px;
	width: 100%;
}

.title-section {
	display: flex;
	align-items: center;
	/* gap: 8px; REMOVED */
	width: 100%;
}

.section-icon {
	font-size: 20px;
	color: #4CAF50;
    margin-right: 8px;
}

.sort-tabs {
	display: flex;
	flex-direction: row; /* UVUE 鏄惧紡璁剧疆 row */
	gap: 8px;
	align-items: center;
	flex-wrap: wrap; /* 鍏佽鎹㈣锛屽疄鐜拌嚜閫傚簲 */
	justify-content: flex-start;
	width: 100%;
	margin-top: 12px;
}

.sort-tab {
	font-size: 13px;
	color: #666;
	padding: 8px 12px; /* 澧炲姞宸﹀彸鍐呰竟璺?*/
	border-radius: 20px;
	border: 1px solid #e0e0e0;
	/* cursor: pointer; REMOVED */
	transition: all 0.2s ease;
	/* white-space: nowrap; REMOVED for uniapp-x support on view */
	flex: 1; /* 鍧囧垎瀹藉害 */
	min-width: 70px; /* 璁剧疆鏈€灏忓搴﹂槻姝㈣繃绐?*/
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
}

.sort-tab.active {
	background: #4CAF50;
	color: white;
	border-color: #4CAF50;
}

.sort-tab:hover {
	background: #f5f5f5;
}

.sort-tab.active:hover {
	background: #388E3C;
}

/* 浜у搧缃戞牸 */
.products-grid {
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
	/* grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); REMOVED */
	/* gap: 20px; REMOVED */
	margin-top: 20px;
    margin: 20px -1.5% 0 -1.5%;
}

.product-card {
    width: 47%;
    margin: 0 1.5% 20px 1.5%;
	background: #f8f9fa;
	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: #ff5000;
	color: white;
	font-size: 11px;
	padding: 4px 12px;
	border-radius: 12px;
	font-weight: 700;
	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: 700;
	color: #333;
	margin-bottom: 4px;
	/* display: block; REMOVED */
	line-height: 1.4;
}

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

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

.price-value {
	font-size: 20px;
	font-weight: bold;
	color: #ff5000;
	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;
}

.cart-text {
	font-size: 13px;
}

/* 瀹跺涵甯稿鑽?*/
.family-medicine {
	background: white;
	border-radius: 16px;
	padding: 20px;
	margin-bottom: 20px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.section-subtitle {
	font-size: 14px;
	color: #666;
	margin-left: 12px;
}

.family-grid {
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
	/* grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); REMOVED */
	/* gap: 16px; REMOVED */
	margin-top: 20px;
}

.family-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 16px;
	background: #f8f9fa;
	border-radius: 12px;
	cursor: pointer;
	transition: all 0.3s ease;
}

.family-item:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.family-icon {
	width: 48px;
	height: 48px;
	border-radius: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 12px;
}

.family-icon text {
	font-size: 20px;
	color: white;
}

.family-name {
	font-size: 14px;
	font-weight: 700;
	color: #333;
	margin-bottom: 4px;
}

.family-desc {
	font-size: 12px;
	color: #666;
}

/* 鏅鸿兘鎺ㄨ崘 */
.smart-recommend {
	background: white;
	border-radius: 16px;
	padding: 20px;
	margin-bottom: 20px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.recommend-filters {
	display: flex;
	flex-direction: row; /* UVUE 鏄惧紡璁剧疆 row */
	gap: 8px;
	align-items: center;
	flex-wrap: wrap; /* 鍏佽鎹㈣锛屽疄鐜拌嚜閫傚簲 */
	justify-content: flex-start;
	width: 100%;
	margin-top: 12px;
}

.filter-item {
	font-size: 13px;
	color: #666;
	padding: 8px 12px; /* 澧炲姞宸﹀彸鍐呰竟璺?*/
	border-radius: 20px;
	border: 1px solid #e0e0e0;
	/* cursor: pointer; REMOVED */
	transition: all 0.2s ease;
	/* white-space: nowrap; REMOVED */
	flex: 1; /* 鍧囧垎瀹藉害 */
	min-width: 80px; /* 璁剧疆鏈€灏忓搴﹂槻姝㈣繃绐?*/
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
}

.filter-item.active {
	background: #4CAF50;
	color: white;
	border-color: #4CAF50;
}

.filter-item:hover {
	background: #f5f5f5;
}

.filter-item.active:hover {
	background: #388E3C;
}

.recommend-grid {
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
	/* grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); REMOVED */
	/* gap: 20px; REMOVED */
	margin-top: 20px;
    margin: 20px -1.5% 0 -1.5%;
}

.recommend-product {
    width: 97%; /* Single col by default or adjust */
    margin: 0 1.5% 20px 1.5%;
	background: #f8f9fa;
	border-radius: 12px;
	overflow: hidden;
	cursor: pointer;
	transition: all 0.3s ease;
	border: 1px solid #e0e0e0;
}

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

.product-image-container {
	position: relative;
	height: 180px;
}

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

.product-tags {
	position: absolute;
	top: 12px;
	left: 12px;
	display: flex;
	gap: 8px;
}

.product-tag, .featured-tag {
	padding: 4px 10px;
	border-radius: 10px;
	font-size: 11px;
	font-weight: 700;
	color: white;
}

.product-tag {
	background: rgba(76, 175, 80, 0.9);
}

.featured-tag {
	background: rgba(255, 87, 34, 0.9);
}

.product-details {
	padding: 16px;
}

.product-title {
	font-size: 16px;
	font-weight: 700;
	color: #333;
	margin-bottom: 4px;
	display: block;
	line-height: 1.4;
}

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

.product-rating {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
	font-size: 13px;
}

.rating-stars {
	display: flex;
	align-items: center;
	gap: 4px;
}

.star-icon {
	font-size: 14px;
	color: #FFC107;
}

.rating-value {
	font-weight: 700;
	color: #333;
}

.reviews-count {
	color: #666;
}

.product-actions {
	display: flex;
	justify-content: flex-end;
	margin-top: 12px;
}

.add-to-cart {
	width: 36px;
	height: 36px;
	border-radius: 18px;
	background: #4CAF50;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s ease;
}

.add-to-cart:hover {
	background: #388E3C;
	transform: scale(1.1);
}

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

/* 鍋ュ悍鎻愰啋 */
.health-reminder {
	background: linear-gradient(135deg, #ff5000 0%, #F57C00 100%);
	border-radius: 16px;
	padding: 16px 20px;
	margin-bottom: 20px;
	color: white;
}

.reminder-content {
	display: flex;
	align-items: center;
	gap: 12px;
}

.reminder-icon {
	font-size: 24px;
}

.reminder-text {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.reminder-title {
	font-size: 15px;
	font-weight: 700;
}

.reminder-desc {
	font-size: 13px;
	opacity: 0.9;
}

.reminder-action {
	padding: 6px 16px;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 20px;
	cursor: pointer;
	transition: all 0.2s ease;
}

.reminder-action:hover {
	background: rgba(255, 255, 255, 0.3);
}

.action-text {
	font-size: 13px;
	font-weight: 500;
}

/* 鍔犺浇鐘舵€?*/
.loading-state {
	padding: 40px 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.loading-spinner {
	width: 32px;
	height: 32px;
	border: 3px solid #f0f0f0;
	border-top-color: #4CAF50;
	border-radius: 16px;
	/* animation: spin 1s linear infinite; REMOVED for uniapp-x support */
	margin-bottom: 12px;
}

/* 
@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
} 
*/

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

.no-more {
	padding: 30px 0;
	text-align: center;
	border-top: 1px solid #f0f0f0;
	margin-top: 10px;
}

.no-more-text {
	font-size: 13px;
	color: #999;
}

/* 瀹夊叏鍖哄煙 */
.safe-area {
	height: 20px;
	width: 100%;
}

/* ===== 鍝嶅簲寮忚璁?===== */

/* 灏忓睆鎵嬫満 (灏忎簬414px) */
@media screen and (max-width: 414px) {
	.search-container {
		padding: 0 12px;
		height: 44px; /* 鎭㈠涓?4px锛屼笌PC鍜屽垎绫婚〉閫昏緫淇濇寔涓€鑷?*/
	}
	
	.search-box {
		padding: 8px 16px; /* 涓庡垎绫婚〉淇濇寔涓€鑷?*/
		/* max-width: 100%; REMOVED for uniapp-x support */
		margin: 0;
	}
	
	.main-scroll {
		padding: 0 12px 12px;
	}
	
	.category-grid {
		grid-template-columns: repeat(5, 1fr); /* 璋冩暣涓轰竴琛?涓紝姝ｅソ涓よ */
		gap: 8px;
		padding: 0 4px;
	}
	
	.category-card {
		padding: 8px 0;
		background: transparent; /* 绉婚櫎鍗＄墖鑳屾櫙 */
		box-shadow: none; /* 绉婚櫎闃村奖 */
		border: none; /* 绉婚櫎杈规 */
	}
	
	.category-card:hover {
		transform: none; /* 绉诲姩绔Щ闄ゆ偓鍋滄晥鏋?*/
		box-shadow: none;
	}
	
	.card-icon {
		width: 44px; /* 鍑忓皬鍥炬爣灏哄 */
		height: 44px;
		border-radius: 22px;
		margin-bottom: 6px;
	}
	
	.card-icon text {
		font-size: 20px;
	}
	
	.card-name {
		font-size: 11px; /* 鍑忓皬鏂囧瓧澶у皬 */
		font-weight: normal;
		color: #333;
	}
	
	.card-desc {
		display: none; /* 鎵嬫満绔殣钘忔弿杩版枃瀛楋紝淇濇寔鐣岄潰鏁存磥 */
	}
	
	.services-grid {
		grid-template-columns: repeat(4, 1fr); /* 鏈嶅姟鍏ュ彛涔熻皟鏁翠负涓€琛?涓?*/
		gap: 8px;
	}
	
	.service-card {
		padding: 10px 4px;
		background: #f8f9fa; /* 淇濇寔娣¤壊鑳屾櫙 */
	}
	
	.service-icon {
		width: 40px;
		height: 40px;
		border-radius: 20px;
		margin-bottom: 8px;
	}
	
	.service-icon text {
		font-size: 20px;
	}
	
	.service-name {
		font-size: 11px;
	}
	
	.service-desc {
		display: none; /* 闅愯棌鎻忚堪 */
	}
	
	.products-grid,
	.recommend-grid {
		/* grid-template-columns: repeat(2, 1fr); REMOVED */
		/* gap: 8px; REMOVED */
        margin: 20px -1% 0 -1%;
	}
    
    .products-grid .product-card,
    .recommend-grid .recommend-product {
        width: 48%;
        margin: 0 1% 8px 1%;
    }

	.product-info,
	.product-details {
		padding: 8px; /* 鍑忓皬鍐呰竟璺?*/
	}

	.product-name,
	.product-title {
		font-size: 13px; /* 璋冩暣瀛椾綋澶у皬 */
		height: 36px; /* 闄愬埗楂樺害锛岄槻姝㈠弬宸笉榻?*/
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.product-image,
	.product-image-container {
		height: 140px; /* 绋嶅井鍑忓皬鍥剧墖楂樺害閫傞厤鍙屽垪 */
	}

	/* 鎵嬫満绔晢鍝佸崱鐗囨瀬绠€妯″紡锛堢儹閿€ & 鎺ㄨ崘锛?*/
	.hot-products .product-spec,
	.hot-products .manufacturer,
	.hot-products .original-price,
	.hot-products .cart-text,
	.hot-products .sales-info,
	.hot-products .product-action, /* 闅愯棌鐑攢鍖哄姞璐寜閽?*/
	.smart-recommend .product-specification,
	.smart-recommend .product-rating,
	.smart-recommend .original-price,
	.smart-recommend .product-actions /* 闅愯棌鎺ㄨ崘鍖哄姞璐寜閽?*/
	{
		display: none;
	}
	
	.hot-products .product-info,
	.smart-recommend .product-details {
		padding: 6px; /* 鏋佸皬鍐呰竟璺?*/
	}
	
	.hot-products .product-image,
	.hot-products .product-image-container,
	.smart-recommend .product-image,
	.smart-recommend .product-image-container {
		height: 110px; /* 杩涗竴姝ュ噺灏忓浘鐗囬珮搴?*/
	}
	
	.hot-products .product-name,
	.smart-recommend .product-title {
		margin-bottom: 2px;
		font-size: 12px;
		line-height: 1.3;
		height: 32px; /* 闄愬埗2琛岄珮搴?*/
	}
	
	.hot-products .price-section,
	.smart-recommend .price-section {
		margin-bottom: 0;
		margin-top: 4px;
	}
	
	.hot-products .price-symbol,
	.smart-recommend .price-symbol {
		font-size: 10px;
		color: #ff5000;
	}
	
	.hot-products .price-value,
	.smart-recommend .price-value {
		font-size: 14px; /* 瀛椾綋鍙樺皬 */
		font-weight: 700;
	}
	
	.family-grid {
		grid-template-columns: repeat(4, 1fr); /* 瀹跺涵甯稿鑽篃璋冩暣涓轰竴琛?涓?*/
		gap: 8px;
	}
	
	.family-item {
		padding: 8px 4px;
		background: #f8f9fa;
	}
	
	.family-icon {
		width: 36px;
		height: 36px;
		border-radius: 18px;
		margin-bottom: 6px;
	}
	
	.family-icon text {
		font-size: 18px;
	}
	
	.family-name {
		font-size: 11px;
	}
	
	.family-desc {
		display: none;
	}
	
	.news-swiper {
		height: 160px;
	}
	
	.sort-tabs,
	.recommend-filters {
		gap: 8px;
		justify-content: flex-start; /* 淇濇寔宸﹀榻?*/
		overflow-x: auto; /* 鍏佽妯悜婊氬姩 */
		flex-wrap: nowrap; /* 绂佹鎹㈣ */
		padding-bottom: 4px; /* 婊氬姩鏉＄┖闂?*/
	}
	
	.sort-tab,
	.filter-item {
		padding: 5px 12px;
		font-size: 12px;
		flex-shrink: 0; /* 闃叉琚帇缂?*/
		min-width: auto;
		flex: 0 0 auto; /* 鍙栨秷鍧囧垎 */
	}
	
	.section-header {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}
	
	.title-section {
		justify-content: center;
	}
	
	.sort-tabs,
	.recommend-filters {
		width: 100%;
	}
}

/* 涓睆鎵嬫満/灏忓钩鏉?(415px-768px) */
@media screen and (min-width: 415px) and (max-width: 768px) {
	.search-container {
		padding: 0 16px;
		height: 44px;
	}
	
	.main-scroll {
		/* 绉婚櫎 margin-top */
	}
	
	.category-grid {
		grid-template-columns: repeat(3, 1fr);
	}
	
	.services-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}
	
	.products-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	
	.recommend-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	
	.family-grid {
		grid-template-columns: repeat(3, 1fr);
	}
	
	.sort-tabs,
	.recommend-filters {
		gap: 10px;
		justify-content: flex-start;
	}
	
	.sort-tab,
	.filter-item {
		padding: 6px 14px;
		font-size: 12px;
		flex-grow: 0;
	}
	
	.section-header {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}
	
	.title-section {
		justify-content: center;
	}
	
	.sort-tabs,
	.recommend-filters {
		width: 100%;
		justify-content: center;
	}
}

/* 骞虫澘璁惧 (769px-1024px) */
@media screen and (min-width: 769px) and (max-width: 1024px) {
	.search-container {
		padding: 0 24px;
		max-width: 100%;
		height: 44px;
	}
	
	.nav-search-tools .nav-tool-item {
		display: none;
	}
	
	.main-scroll {
		max-width: 100%;
		padding: 0 24px 20px;
	}
	
	.category-grid {
		grid-template-columns: repeat(4, 1fr);
	}
	
	.services-grid {
		grid-template-columns: repeat(4, 1fr);
	}
	
	.products-grid {
		grid-template-columns: repeat(3, 1fr);
	}
	
	.recommend-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	
	.family-grid {
		grid-template-columns: repeat(3, 1fr);
	}
	
	.news-swiper {
		height: 240px;
	}
}

/* 妗岄潰绔?(1025px浠ヤ笂) */
@media screen and (min-width: 1025px) {
	.search-container {
		padding: 0 32px;
		height: 44px;
	}
	
	.main-scroll {
		max-width: 100%;
		padding: 0 32px 24px;
	}
	
	.category-grid {
		grid-template-columns: repeat(6, 1fr);
	}
	
	.services-grid {
		grid-template-columns: repeat(4, 1fr);
	}
	
	.products-grid {
		grid-template-columns: repeat(4, 1fr);
	}
	
	.recommend-grid {
		grid-template-columns: repeat(3, 1fr);
	}
	
	.family-grid {
		grid-template-columns: repeat(3, 1fr);
	}
	
	.news-swiper {
		height: 260px;
	}
}

/* 澶ф闈㈢ (1400px浠ヤ笂) */
@media screen and (min-width: 1400px) {
	.category-grid {
		grid-template-columns: repeat(5, 1fr);
		gap: 24px;
	}
	
	.products-grid {
		grid-template-columns: repeat(4, 1fr);
	}
	
	.recommend-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* 鏆楅粦妯″紡閫傞厤 */
@media (prefers-color-scheme: dark) {
	.medic-home {
		background: #121212;
	}
	
	.smart-categories,
	.health-news,
	.smart-services,
	.hot-products,
	.family-medicine,
	.smart-recommend {
		background: #1e1e1e;
		border-color: #333;
	}
	
	.nav-search-box {
		background: rgba(30, 30, 30, 0.95);
		border-color: #444;
	}
	
	.category-card,
	.service-card,
	.product-card,
	.family-item,
	.recommend-product {
		background: #2d2d2d;
		border-color: #444;
	}
	
	.section-title,
	.card-name,
	.service-name,
	.product-name,
	.family-name,
	.product-title,
	.section-desc,
	.card-desc,
	.service-desc,
	.product-spec,
	.product-specification,
	.family-desc {
		color: #aaa;
	}
	
	.sort-tab,
	.filter-item {
		background: #333;
		border-color: #444;
		color: #ccc;
	}
	
	.sort-tab.active,
	.filter-item.active {
		background: #4CAF50;
		color: white;
	}
	
	.sort-tab:hover,
	.filter-item:hover {
		background: #444;
	}
	
	.sort-tab.active:hover,
	.filter-item.active:hover {
		background: #388E3C;
	}
	
	.nav-tool-item {
		background: rgba(76, 175, 80, 0.2);
		color: #4CAF50;
	}
	
	.manufacturer,
	.sales-count,
	.reviews-count,
	.original-price {
		color: #888;
	}
}
</style>

