<template>
	<layout>
		<uv-navbar
		  :fixed="false"
		  :title="title"
		  left-arrow
		  @leftClick="$onClickLeft"
		/>
		
		<view class="container" v-if="!loading">
			<!-- <view class="banner-container">
				<image :src="shopAd" mode="aspectFill" class="shop-banner"></image>
			</view> -->
			<!-- <view class="notice-bar" v-if="store.notice">
				<uv-notice-bar :text="store.notice"></uv-notice-bar>
			</view> -->
			
			<view class="main">
				<view class="nav">
					<view class="header flex-row justify-between">
						<view class="store-info flex-row">
							<view class="mr-1">
								<image :src="store.image" class="store-logo"></image>
							</view>
							<view class="left" v-if="orderType == 'takein'">
								<view class="store-name flex-row align-center" @click="selectShop()">
									<text style="font-weight: 800;">{{ store.name }}</text>
									<view class="iconfont iconarrow-right"></view>
								</view>
								<view class="store-location flex-row align-center">
									<img src="../../static/images/menu/map.png" style="width: 36rpx; margin-right:22rpx;" alt="">
									<text>距离您 {{kmUnit(store.dis)}}</text>
								</view>
							</view>
							<view class="left overflow-hidden" v-else>
								<view class="store-name flex-row align-center" @click="selectShop()">
									<view>{{ store.name }}
										<text class="small" v-if="store.distance > 0 && orderType == 'takeout'">(配送距离:
											{{store.distance}}km)</text>
										<text class="small" v-else-if="orderType == 'takeout'">(本店不支持外卖)</text>
									</view>
									<view class="iconfont iconarrow-right"></view>
								</view>
							</view>
						</view>
						<view class="order-type flex-row">
							<view class="dinein" :class="{active: orderType == 'takein'}" @tap="takein">
								<text>自取</text>
							</view>
							<view class="takeout" :class="{active: orderType == 'takeout'}" @tap="takout">
								<text>外卖</text>
							</view>
						</view>
					</view>
				</view>
			
				<!-- 广告部分 -->
				<view class="banner-container flex justify-center align-center" style="height: 250rpx;">
					<view class="" style=" width: 95%; height: 85%; border-radius: 26px;  background-color: lightgray;"></view>
					<!-- <image :src="shopAd" mode="aspectFill" class="shop-banner image_3" style="background-color:lightgray;"></image> -->
				</view>
				
				
				<!-- #ifdef H5 -->
				<view class="content" :style="{
					height: 'calc(100vh - ' + (headerHeight + (store.notice ? 0 : 60) + footerHeight) + 'rpx)', 
					paddingBottom: '160rpx'
				}">
				<!-- #endif -->
				<!-- #ifndef H5 -->
				<view class="content" :style="{
					height: 'calc(100vh - ' + (headerHeight + (store.notice ? 0 : 60) + footerHeight) + 'rpx)', 
					paddingBottom: '160rpx'
				}">
				<!-- #endif -->
					<scroll-view class="menu-sidebar" :scroll-into-view="menuScrollIntoView" scroll-with-animation scroll-y>
						<view class="sidebar-wrapper">
							<view class="menu-category" 
								:id="`menu-${item.id}`" 
								:class="{'current': item.id === currentCateId}"
								v-for="(item, index) in goods" 
								:key="index" 
								@tap="handleMenuTap(item.id)">
								<text>{{ item.name }}</text>
								<view class="category-badge" v-show="menuCartNum(item.id)">{{ menuCartNum(item.id) }}</view>
							</view>
						</view>
					</scroll-view>
					
					<!-- goods list begin -->
					<scroll-view class="goods-container" scroll-with-animation scroll-y :scroll-top="cateScrollTop"
						@scroll="handleGoodsScroll" id="goodsContainer">
						<view class="goods-wrapper">
							<view class="goods-list">
								<!-- category begin -->
								<view class="category-section" v-for="(item, index) in goods" :key="index"
									:id="`cate-${item.id}`">
									<view class="category-title">
										<text>{{ item.name }}</text>
										<image mode="aspectFill" :src="item.icon" class="category-icon"></image>
									</view>
									<view class="category-items">
										<!-- 商品 begin -->
										<view class="good-card" v-for="(good, key) in item.goodsList" :key="key"
											:class="{'sold-out': good.stock <= 0}">
											<!-- <image mode="aspectFill" :src="good.image" class="good-image"
												@tap="showGoodDetailModal(item, good)"></image> -->
											<image mode="aspectFill" src="https://lanhu-oss-2537-2.lanhuapp.com/FigmaDDSSlicePNG62414071ec6e0e4e00603407efd42e53.png" class="good-image"
												@tap="showGoodDetailModal(item, good)"></image>
												<!-- https://lanhu-oss-2537-2.lanhuapp.com/FigmaDDSSlicePNG62414071ec6e0e4e00603407efd42e53.png -->
											<view class="good-details">
												<text class="good-name">{{ good.storeName }}</text>
												<text class="good-description">{{ good.storeInfo }}</text>
												<view class="price-action flex-row justify-between align-center">
													<text class="good-price">￥{{ good.price }}</text>
													<view class="action-buttons" v-if="good.stock > 0">
														<button type="primary" class="spec-button"
															hover-class="none" size="mini"
															@tap="showGoodDetailModal(item, good)">
															...
														</button>
														<view class="item-badge" v-show="goodCartNum(good.id)">
															{{ goodCartNum(good.id) }}</view>
													</view>
										
													<view class="sold-out-label" v-if="good.stock == 0">已售罄</view>
												</view>
											</view>
										</view>
										<!-- 商品 end -->
									</view>
								</view>
								<!-- category end -->
							</view>
						</view>
					</scroll-view>
					<!-- goods list end -->
				</view>
				<!-- content end -->
				
				<!-- 购物车栏 begin -->
				<view class="cart-bar" v-if="cart.length > 0 && isCartShow">
					<view class="cart-icon-container">
						<image src="/static/images/menu/cart.png" class="cart-icon" @tap="openCartPopup"></image>
						<view class="cart-badge">{{ getCartGoodsNumber }}</view>
					</view>
					<view class="cart-total" @tap="openCartShow">￥{{ getCartGoodsPrice }}</view>
					<button type="primary" class="checkout-button" @tap="toPay" :disabled="disabledPay">
						{{ disabledPay ? `差${spread}元起送` : '去结算' }}
					</button>
				</view>
				<!-- 购物车栏 end -->
			</view>
			
			<!-- 商品详情模态框 begin -->
			<modal :show="goodDetailModalVisible" class="good-detail-modal" color="#5A5B5C" width="90%" custom
				padding="0rpx" radius="12rpx">
				<template #default>
					<view class="modal-header">
						<view class="close-button">
							<image src="/static/images/menu/close.png" @tap="closeGoodDetailModal"></image>
						</view>
					</view>
					<scroll-view class="modal-body" scroll-y>
						<view v-if="good.image" class="modal-image">
							<image :src="good.image"></image>
						</view>

						<view class="modal-content">
							<view class="good-basic-info">
								<view class="good-title">{{ good.storeName }}</view>
								<view class="good-subtitle flex justify-between">{{ good.storeInfo }} <text class="points-info">可获积分:10</text></view>
							</view>
							<view class="good-properties">
								<view class="property-item" v-for="(item, index) in good.productAttr" :key="index">
									<view class="property-name">
										<text class="name">{{ item.attrName }}</text>
									</view>
									<view class="property-values">
										<view class="property-value" v-for="(value, key) in item.attrValueArr" :key="key"
											:class="{'selected': value == newValue[index]}"
											@tap="changePropertyDefault(index, key,false)">
											{{ value }}
										</view>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
					<view class="modal-footer">
						<view class="price-info">
							<view class="final-price">￥{{ good.price }}</view>
							<view class="selected-props">
								{{ good.valueStr }}
							</view>
						</view>
						<view class="quantity-control">
							<text class="stock-info">库存：{{good.stock}} </text>
							<button type="default" plain class="quantity-button" size="mini" hover-class="none"
								@tap="handlePropertyReduce">
								<view class="iconfont iconsami-select"></view>
							</button>
							<view class="quantity-number">{{ good.number }}</view>
							<button type="primary" class="quantity-button" size="min" hover-class="none" @tap="handlePropertyAdd">
								<view class="iconfont iconadd-select"></view>
							</button>
						</view>
					</view>
					<view class="add-cart-button" @tap="handleAddToCartInModal">
						<view>加入购物车</view>
					</view>
				</template>
			</modal>
			<!-- 商品详情模态框 end -->
			
			<!-- 购物车详情popup -->
			<uv-popup ref="popup" mode="bottom" class="cart-popup">
				<template #default>
				<view class="cart-popup-container">
					 <view class="popup-header">
					  <text @tap="handleCartClear">清空</text>
					 </view>
					 <scroll-view class="cart-items" scroll-y>
					  <view class="items-wrapper">
					   <view class="cart-item" v-for="(item, index) in cart" :key="index">
						<view class="item-info">
						 <view class="item-name">{{ item.name }}</view>
						 <view class="item-properties">{{ item.valueStr }}</view>
						</view>
						<view class="item-price">
						 <text>￥{{ item.price }}</text>
						</view>
						<view class="item-controls">
						 <button type="default" plain size="mini" hover-class="none" @tap="handleCartItemReduce(index)">
						  <view class="iconfont iconsami-select"></view>
						 </button>
						 <view class="item-quantity">{{ item.number }}</view>
						 <button type="primary" size="mini" hover-class="none" @tap="handleCartItemAdd(index)">
						  <view class="iconfont iconadd-select"></view>
						 </button>
						</view>
					   </view>
					  </view>
					 </scroll-view>
					</view>
				</template>
			</uv-popup>
		</view>
		
		<!--轻提示-->
		<view class="loading" v-if="loading">
			<uv-loading-icon color="#DA5650" size=40 mode="circle"></uv-loading-icon>
			<button type="primary" style="z-index: 3001;position: absolute;top: 650rpx;" @click="init"
				class="cu-btn bg-red">刷新</button>
		</view>
		<uv-toast ref="uToast"></uv-toast>
	</layout>
</template>

<script setup>
import {
  ref,
  computed,
  nextTick
} from 'vue'
import { useMainStore } from '@/store/store'
import { storeToRefs } from 'pinia'
import { onLoad,onShow ,onPullDownRefresh,onHide} from '@dcloudio/uni-app'
import { formatDateTime,kmUnit } from '@/utils/util'
import {
  shopNearby,
  menuGoods
} from '@/api/goods'
import {
  menuAds
} from '@/api/market'
const main = useMainStore()
const { orderType,address, store,location,isLogin } = storeToRefs(main)
const title = ref('点餐')
const text = ref('滚动通知')

const goods = ref([])
const ads = ref([])
const loading = ref(true) 
const currentCateId = ref(0)
const cateScrollTop = ref(0)
const menuScrollIntoView = ref('')
const cart = ref([])
const goodDetailModalVisible = ref(false)
const good= ref({})
const category = ref({})
const cartPopupVisible = ref(false)
const sizeCalcState = ref(false)
const newValue = ref([])
const shopAd = ref('https://lanhu-oss-2537-2.lanhuapp.com/FigmaDDSSlicePNGca115cd446d280796935fea74b5cd20f.png')
const isCartShow = ref(true)
const popup = ref()
const headerHeight = ref(300) // 头部区域高度（rpx）
const footerHeight = ref(100) // 底部区域高度（rpx）

const newkmUnit = computed(() => (param) =>{
  console.log('param:',param)
  return '10km'
})
const goodCartNum = computed(() => { //计算单个饮品添加到购物车的数量
	return (id) => cart.value.reduce((acc, cur) => {
		if (cur.id === id) {
			return acc += cur.number
		}
		return acc
	}, 0)
})
const menuCartNum = computed(() =>{
	return (id) => cart.value.reduce((acc, cur) => {
		if (cur.cate_id === id) {
			return acc += cur.number
		}
		return acc
	}, 0)
})
const getCartGoodsNumber = computed(() => { //计算购物车总数
	return cart.value.reduce((acc, cur) => acc + cur.number, 0)
})
const getCartGoodsPrice = computed(() =>{ //计算购物车总价
	let price = cart.value.reduce((acc, cur) => acc + cur.number * cur.price, 0);
	return parseFloat(price).toFixed(2);
})
const disabledPay = computed(() => { //是否达到起送价
	return orderType.value == 'takeout' && (getCartGoodsPrice < parseFloat(store.value.min_price)) ? true :
		false
})
const spread = computed(() => { //差多少元起送
	if (orderType.value != 'takeout') return
	return parseFloat((store.value.min_price - getCartGoodsPrice).toFixed(2))
})

// 监听自定义事件
uni.$on('refreshMenu', () => {
	// 在这里执行onLoad逻辑
	console.log('refreshMenu1:',store.value.id)
	init()
})

onPullDownRefresh(() => {
	init()
})
onLoad(() => {
	init();
	refreshCart();
	nextTick(() => {
		if (goods.value.length > 0) {
			currentCateId.value = goods.value[0].id;
		}
	});
})
onHide(() => {
	// 重新进入要重新计算页面高度，否则有问题
	sizeCalcState.value = false;
})
onShow(() => {
	//init();
	refreshCart()
	shopAd.value = uni.getStorageSync('shopAd')
	// 初始化页面高度计算
	nextTick(() => {
		calcLayoutHeights()
	})
})

const openCartShow = () =>{
	isCartShow.value = false
}
const in_array = (search, array) => {
	for (var i in array) {
		if (array[i] == search) {
			return true;
		}
	}
	return false;
}
const selectShop = () => {
	uni.navigateTo({
		url: '/pages/components/pages/shop/shop'
	})
}
const uToast = ref()
const  init = async() => { //页面初始化
	loading.value = true;
    
	//return
	let error = {},
		result = location.value
	console.log('result:',result)
	if (!location.value.hasOwnProperty('latitude')) {
		  console.log('result1:',location.value)
		  uni.getLocation(({
			 type: 'wgs84',
			 success: function (res) {
			   console.log('location1:',res)
		
				result = {
					latitude: res.latitude,
					longitude: res.longitude
				};
				getShopList(result)
			 },
			 fail: function (res) {
			   uni.showToast({
			     title: '获取位置失败，请检查是否开启相关权限',
			     duration: 2000,
			     icon: 'error'
			   });
			   // 默认地为你为北京地址
			   result = {
			   	latitude: 39.919990,
			   	longitude: 116.456270
			   };
			   getShopList(result)
			 },
			 complete: function (res) {
			 }
		}));
		
		return
	}
	
	getShopList(result)
   
	
}
const getShopList = async(res) => {
	 console.log('location9:',res)
	if (res) {
		main.SET_LOCATION(res);
	
		let shop_id = 0;
		if (store.value.id) {
			shop_id = store.value.id;
		}
	
		let shop = await shopNearby({
			lat: res.latitude,
			lng: res.longitude,
			shop_id: shop_id,
			kw: ''
		});
		if (shop) {
			//广告图
			getAds(shop.id);
	
			shop.notice = shop.status == 1 ? shop.notice : '店铺营业时间为:' + formatDateTime(shop.startTime,'hh:mm')+' - '+formatDateTime(shop.endTime,'hh:mm') +
			'，不在营业时间内无法下单';
			// 设置店铺信息
			main.SET_STORE(shop);
			let mygoods = await menuGoods({
				shopId: shop.id
			});
			if (mygoods) {
				goods.value = mygoods;
				refreshCart();
				
				// 设置初始分类
				if (mygoods.length > 0) {
					currentCateId.value = mygoods[0].id;
				}
				
				// 数据加载完成后，重新计算布局
				nextTick(() => {
					calcLayoutHeights();
				});
				
				loading.value = false;
			}
		}
	}
	uni.stopPullDownRefresh()
}
const refreshCart = () =>{
	if (goods.value && goods.value.length > 0) {
		let newGoods = goods.value;
		cart.value = [];
		let newCart = uni.getStorageSync('cart') || [];
		let tmpCart = [];
		if (newCart) {
			for (let i in newCart) {
				for (let ii in newGoods) {
					for (let iii in newGoods[ii].goodsList) {
						if (newCart[i].id == newGoods[ii].goodsList[iii].id) {
							tmpCart.push(newCart[i]);
						}
					}
				}
			}
			cart.value = tmpCart;
			cartPopupVisible.value = false;
		}
	}
}
const  getAds = async(shop_id) =>{
	let data = await menuAds({
		shop_id: shop_id ? shop_id : 0
	});
	if (data) {
		ads.value = data;
	}
}
const takout = (force = false) => {
	if (orderType.value == 'takeout' && force == false) return
	main.SET_ORDER_TYPE('takeout');

	if (!isLogin.value) {
		uni.navigateTo({
			url: '/pages/components/pages/login/login'
		})
		return
	} 

}
const takein = (force = false) => {
	if (orderType.value == 'takein' && force == false) return
	main.SET_ORDER_TYPE('takein');

	if (!isLogin.value) {
		uni.navigateTo({
			url: '/pages/components/pages/login/login'
		})
		return
	} 

}
const handleMenuTap = (id) => { //点击菜单项事件
	if (!sizeCalcState.value) {
		calcSize()
	}

	currentCateId.value = id
	menuScrollIntoView.value = `menu-${id}`
	
	// 查找对应的分类区域并滚动到该位置
	const category = goods.value.find(item => item.id === id)
	if (category && category.top !== undefined) {
		// 使用nextTick确保DOM更新后再滚动
		nextTick(() => {
			cateScrollTop.value = category.top
			// 强制触发滚动以确保位置正确
			const goodsContainer = uni.createSelectorQuery().select("#goodsContainer")
			if (goodsContainer) {
				goodsContainer.boundingClientRect(data => {
					if (data) {
						console.log('Scrolling to category:', id, 'at position:', category.top)
					}
				}).exec()
			}
		})
	}
}
const handleGoodsScroll = ({ detail }) => { //商品列表滚动事件
	if (!sizeCalcState.value) {
		calcSize()
	}
	console.log('scrollTop:',detail)
	const {
		scrollTop
	} = detail
	let tabs = goods.value.filter(item => item.top <= scrollTop).reverse()
	if (tabs.length > 0) {
		currentCateId.value = tabs[0].id
	}
}
const calcSize = () => {
	let h = 0
	
	// 更精确计算每个分类的位置
	goods.value.forEach((item, index) => {
		let view = uni.createSelectorQuery().select(`#cate-${item.id}`)
		view.fields({
			size: true,
			rect: true
		}, data => {
			if (data) {
				// 对于第一个分类，顶部位置为0
				if (index === 0) {
					item.top = 0
				} else {
					item.top = h
				}
				h += data.height
				item.bottom = h
				console.log(`Category ${item.id} calculated: top=${item.top}, height=${data.height}, bottom=${item.bottom}`)
			}
		}).exec()
	})
	sizeCalcState.value = true
}

// 增强页面布局高度计算的准确性
const calcLayoutHeights = () => {
	// 获取系统信息
	const systemInfo = uni.getSystemInfoSync()
	const rpxRatio = 750 / systemInfo.windowWidth
	
	// 获取头部区域高度
	const headerQuery = uni.createSelectorQuery().select('.nav')
	headerQuery.boundingClientRect(data => {
		if (data) {
			// 将px转换为rpx
			headerHeight.value = data.height * rpxRatio
			console.log('Header height:', headerHeight.value)
		}
	}).exec()
	
	// 获取底部购物车栏高度
	const footerQuery = uni.createSelectorQuery().select('.cart-bar')
	footerQuery.boundingClientRect(data => {
		if (data) {
			// 将px转换为rpx
			footerHeight.value = data ? data.height * rpxRatio : 100
			console.log('Footer height:', footerHeight.value)
		} else {
			// 如果没有购物车栏，设置一个默认值
			footerHeight.value = 100
		}
		
		// 重新计算各个分类的位置
		nextTick(() => {
			sizeCalcState.value = false
			calcSize()
		})
	}).exec()
}
const handleAddToCart = (cate, newGood, num) =>{ //添加到购物车
	const index = cart.value.findIndex(item => {
		if (newGood) {
			return (item.id === newGood.id) && (item.props_text === good.value.valueStr)
		} else {
			return item.id === newGood.id
		}
	})
	if (index > -1) {
		cart.value[index].number += num
	} else {
		cart.value.push({
			id: newGood.id,
			cate_id: cate.id,
			name: newGood.storeName,
			price: newGood.price,
			number: num,
			image: newGood.image,
			valueStr: good.value.valueStr
		})
	}
	uni.setStorageSync('cart', JSON.parse(JSON.stringify(cart.value)))
}
const handleReduceFromCart = (item, good) => {
	const index = cart.value.findIndex(item => item.id === good.id)
	cart.value[index].number -= 1
	if (cart.value[index].number <= 0) {
		cart.value.splice(index, 1)
	}
	uni.setStorageSync('cart', JSON.parse(JSON.stringify(cart.value)))
}
const showGoodDetailModal = (item, newGood) => {
	isCartShow.value = true
	good.value = JSON.parse(JSON.stringify({
		...newGood,
		number: 1
	}))
	category.value = JSON.parse(JSON.stringify(item))
	goodDetailModalVisible.value = true;
	console.log('goodDetailModalVisible:',goodDetailModalVisible.value)
	changePropertyDefault(0, 0,true);
}
const closeGoodDetailModal = () => { //关闭饮品详情模态框
	goodDetailModalVisible.value = false
    category.value = {}
	good.value = {}
}
const changePropertyDefault = (index, key, isDefault) => { //改变默认属性值
	let valueStr = ''
	console.log('good:',good.value)
	if(isDefault){
		newValue.value = []
		for(let i = 0;i < good.value.productAttr.length;i++){
			newValue.value[i] = good.value.productAttr[i].attrValueArr[0]
		}

		valueStr = newValue.value.join(',')

	}else{
		newValue.value[index] = good.value.productAttr[index].attrValueArr[key]
		valueStr = newValue.value.join(',')
	}

	
	let productValue = good.value.productValue[valueStr]
	good.value.number = 1;
	good.value.price = parseFloat(productValue.price).toFixed(2);
	good.value.stock = productValue.stock;
	good.value.image = productValue.image ? productValue.image : good.value.image;
	good.value.valueStr = valueStr

}
const handlePropertyAdd = () => {
	good.value.number += 1
}
const handlePropertyReduce = () => {
	if (good.value.number === 1) return
	good.value.number -= 1
}
const handleAddToCartInModal = () => {
	if (good.value.stock <= 0) {
		uToast.value.show({message:'商品库存不足',type: 'error'});
		return;
	}
	handleAddToCart(category.value, good.value, good.value.number)
	closeGoodDetailModal()
}
const openCartPopup = () => { //打开/关闭购物车列表popup
	popup.value.open()
}
const handleCartClear = () => { //清空购物车
	uni.showModal({
		title: '提示',
		content: '确定清空购物车么',
		success: ({
			confirm
		}) => {
			if (confirm) {
				popup.value.close()
				cart.value = []
				uni.setStorageSync('cart', JSON.parse(JSON.stringify(cart.value)))
			}
		}
	})
}
const handleCartItemAdd = (index) => {
	cart.value[index].number += 1
	uni.setStorageSync('cart', JSON.parse(JSON.stringify(cart.value)))
}
const handleCartItemReduce = (index) => {
	if (cart.value[index].number === 1) {
		cart.value.splice(index, 1)
	} else {
		cart.value[index].number -= 1
	}
	if (!cart.value.length) {
		cartPopupVisible.value = false
	}
	uni.setStorageSync('cart', JSON.parse(JSON.stringify(cart.value)))
}
const toPay = () => {

	if (!isLogin.value) {
		uni.navigateTo({
			url: '/pages/components/pages/login/login'
		})
		return
	} else {
		if (store.value.status == 0) {
			uToast.value.show({message:'不在店铺营业时间内',type: 'error'});
			return;
		}
		// 判断当前是否在配送范围内
		if (orderType.value == 'takeout' && store.value.distance < store.value.far) {
			uToast.value.show({message:'选中的地址不在配送范围',type: 'error'});
			return;
		}

		uni.showLoading({
			title: '加载中'
		})
		uni.setStorageSync('cart', JSON.parse(JSON.stringify(cart.value)))

		uni.navigateTo({
			url: '/pages/components/pages/pay/pay'
		})
	}

	uni.hideLoading()
}

</script>

<style lang="scss" scoped>
	@import './common.css';

	/* #ifdef H5 */
	page {
		height: auto;
		min-height: 100%;
	}
	/* #endif */
	
	.container {
		overflow: hidden;
		position: relative;
		background-color: #FFFFFF;
	}
	
	.loading {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;

		image {
			width: 260rpx;
			height: 260rpx;
			position: relative;
			margin-top: -200rpx;
			/* #ifdef h5 */
			margin-top: 0;
			/* #endif */
		}
	}
	
	.flex-row {
		display: flex;
		flex-direction: row;
	}
	
	.justify-between {
		justify-content: space-between;
	}
	
	.align-center {
		align-items: center;
	}
	
	.shop-banner {
		width: 100%;
		height: 250rpx;
		object-fit: cover;
	}
	
	.notice-bar {
		height: 60rpx;
		background-color: #FFFFFF;
	}
	
	.main {
		position: relative;
	}
	
	.nav {
		background-color: #FFFFFF;
		padding: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.1);
	}
	
	.header {
		padding: 10rpx 0;
	}
	
	.store-info {
		flex: 1;
	}
	
	.store-logo {
		width: 80rpx;
		height: 80rpx;
		border-radius: 8rpx;
	}
	
	.store-name {
		font-size: 32rpx;
		font-weight: 500;
		color: #000;
	}
	
	.store-location {
		font-size: 24rpx;
		color: #999;
		margin-top: 4rpx;
	}
	
	.order-type {
		background-color: #f7f3e9;
		border-radius: 50rpx;
		overflow: hidden;
		border: 1px solid #fff;
		height: 60rpx;
	}
	
	.dinein, .takeout {
		padding: 0 20rpx;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
	}
	
	.dinein.active {
		background-color: #52ac41;
		color: #fff;
	}
	
	.takeout.active {
		background-color: #52ac41;
		color: #fff;
	}
	
	.content {
		width: 100%;
		display: flex;
		flex-direction: row;
		padding-bottom: 160rpx;
	}
	
	.menu-sidebar {
		width: 170rpx;
		height: 100%;
		background-color: #f9faf7;
	}
	
	.sidebar-wrapper {
		display: flex;
		flex-direction: column;
	}
	
	.menu-category {
		width: 100%;
		height: 148rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;
		box-shadow: inset 0px -1px 0px 0px rgba(249, 246, 239, 1);
		color: #717171;
		font-size: 24rpx;
		text-align: center;
	}
	
	.menu-category.current {
		background-image: linear-gradient(270deg, rgba(255, 255, 255, 1) 0, rgba(243, 203, 90, 1) 100%);
		color: #000;
		font-weight: 600;
		font-size: 28rpx;
	}
	
	.menu-category.current:before {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		width: 10rpx;
		height: 100%;
		background-color: #52ac41;
	}
	
	.category-badge {
		position: absolute;
		top: 10rpx;
		right: 10rpx;
		background-color: #eab729;
		color: #fff;
		border-radius: 50%;
		width: 32rpx;
		height: 32rpx;
		font-size: 22rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.goods-container {
		flex: 1;
		height: 100%;
	}
	
	.goods-wrapper {
		padding: 20rpx;
	}
	
	.category-section {
		margin-bottom: 40rpx;
	}
	
	.category-title {
		font-size: 32rpx;
		font-weight: 600;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
	}
	
	.category-icon {
		width: 32rpx;
		height: 32rpx;
		margin-left: 10rpx;
	}
	
	.good-card {
		display: flex;
		margin-bottom: 30rpx;
		border-radius: 12rpx;
		padding: 20rpx;
		background-color: #fff;
		box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
	}
	
	.good-image {
		width: 200rpx;
		height: 200rpx;
		border-radius: 8rpx;
		object-fit: cover;
	}
	
	.good-details {
		flex: 1;
		margin-left: 20rpx;
		display: flex;
		flex-direction: column;
	}
	
	.good-name {
		font-size: 28rpx;
		font-weight: 500;
		color: #000;
		margin-bottom: 8rpx;
	}
	
	.good-description {
		font-size: 22rpx;
		color: #999;
		margin-bottom: 30rpx;
	}
	
	.price-action {
		margin-top: auto;
	}
	
	.good-price {
		font-size: 32rpx;
		font-weight: 500;
		color: #000;
	}
	
	.action-buttons {
		display: flex;
		align-items: center;
	}
	
	.spec-button {
		height: 50rpx;
		line-height: 50rpx;
		padding: 0 20rpx;
		font-size: 24rpx;
		background-color: #52ac41;
		border-radius: 25rpx;
	}
	
	.item-badge {
		background-color: #eab729;
		color: #fff;
		border-radius: 50%;
		width: 36rpx;
		height: 36rpx;
		font-size: 22rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 10rpx;
	}
	
	.sold-out-label {
		color: #999;
		font-size: 24rpx;
	}
	
	.good-card.sold-out {
		opacity: 0.7;
	}
	
	.cart-bar {
		position: fixed;
		bottom: 140rpx;
		left: 0;
		width: calc(100% - 80rpx);
		height: 100rpx;
		background-color: #f7f3e9;
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.1);
		border-radius: 50rpx;
		margin: 0 40rpx;
		z-index: 10;
		border: 2px solid #fff;
	}
	
	.cart-icon-container {
		position: relative;
	}
	
	.cart-icon {
		width: 84rpx;
		height: 84rpx;
	}
	
	.cart-badge {
		position: absolute;
		top: 0;
		right: -10rpx;
		background-color: #eab729;
		color: #000;
		border-radius: 50%;
		min-width: 32rpx;
		height: 32rpx;
		font-size: 22rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 6rpx;
	}
	
	.cart-total {
		font-size: 40rpx;
		font-weight: 500;
		margin-left: 20rpx;
	}
	
	.checkout-button {
		height: 100rpx;
		line-height: 100rpx;
		background-color: #52ac41;
		color: #fff;
		font-size: 32rpx;
		border-radius: 50rpx;
		margin-left: auto;
		width: 192rpx;
	}
	
	/* 商品详情模态框 */
	.good-detail-modal {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}
	
	.modal-header {
		padding: 20rpx;
		display: flex;
		justify-content: flex-end;
	}
	
	.close-button image {
		width: 40rpx;
		height: 40rpx;
	}
	
	.modal-body {
		flex: 1;
		overflow-y: auto;
	}
	
	.modal-image {
		width: 100%;
		height: 400rpx;
	}
	
	.modal-image image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	
	.modal-content {
		padding: 20rpx;
	}
	
	.good-basic-info {
		margin-bottom: 30rpx;
	}
	
	.good-title {
		font-size: 32rpx;
		font-weight: 600;
		margin-bottom: 10rpx;
	}
	
	.good-subtitle {
		font-size: 24rpx;
		color: #999;
	}
	
	.points-info {
		color: #f00;
	}
	
	.good-properties {
		margin-bottom: 30rpx;
	}
	
	.property-item {
		margin-bottom: 20rpx;
	}
	
	.property-name {
		font-size: 28rpx;
		font-weight: 500;
		margin-bottom: 15rpx;
	}
	
	.property-values {
		display: flex;
		flex-wrap: wrap;
	}
	
	.property-value {
		padding: 10rpx 20rpx;
		background-color: #f5f5f5;
		border-radius: 6rpx;
		margin-right: 15rpx;
		margin-bottom: 15rpx;
		font-size: 24rpx;
	}
	
	.property-value.selected {
		background-color: #52ac41;
		color: #fff;
	}
	
	.modal-footer {
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-top: 1px solid #eee;
	}
	
	.price-info {
		display: flex;
		flex-direction: column;
	}
	
	.final-price {
		font-size: 32rpx;
		font-weight: 600;
		color: #000;
	}
	
	.selected-props {
		font-size: 22rpx;
		color: #999;
		margin-top: 5rpx;
	}
	
	.quantity-control {
		display: flex;
		align-items: center;
	}
	
	.stock-info {
		font-size: 24rpx;
		color: #999;
		margin-right: 15rpx;
	}
	
	.quantity-button {
		width: 60rpx;
		height: 60rpx;
		padding: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
	}
	
	.quantity-number {
		width: 60rpx;
		text-align: center;
		font-size: 28rpx;
	}
	
	.add-cart-button {
		height: 100rpx;
		line-height: 100rpx;
		background-color: #52ac41;
		color: #fff;
		font-size: 32rpx;
		text-align: center;
	}
	
	/* 购物车popup */
	.cart-popup-container {
		max-height: 70vh;
		display: flex;
		flex-direction: column;
	}
	
	.popup-header {
		height: 80rpx;
		line-height: 80rpx;
		padding: 0 30rpx;
		background-color: #f7f7f7;
		color: #52ac41;
		font-size: 26rpx;
		text-align: right;
	}
	
	.cart-items {
		max-height: calc(70vh - 80rpx);
	}
	
	.items-wrapper {
		padding: 20rpx 30rpx;
	}
	
	.cart-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1px solid #eee;
	}
	
	.item-info {
		flex: 1;
	}
	
	.item-name {
		font-size: 28rpx;
		color: #000;
		margin-bottom: 5rpx;
	}
	
	.item-properties {
		font-size: 22rpx;
		color: #999;
	}
	
	.item-price {
		font-size: 28rpx;
		font-weight: 500;
		padding: 0 20rpx;
	}
	
	.item-controls {
		display: flex;
		align-items: center;
	}
	
	.item-quantity {
		width: 60rpx;
		text-align: center;
		font-size: 28rpx;
	}
	
	button[size="mini"] {
		min-width: 60rpx !important;
		width: 60rpx !important;
		height: 60rpx !important;
		padding: 0 !important;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	button[type="primary"] {
		background-color: #52ac41 !important;
	}
	
	.image_3 {
	  width: 48rpx;
	  height: 6rpx;
	  margin: 194rpx 0 0 319rpx;
	}
	
	
</style>
