<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; height: 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; margin: 1ch;">
					<!-- <view class="" style=" width: 95%; height: 85%; border-radius: 26px;  background-color: lightgray;">
					</view> -->
					<!-- {{ ads.list[0].image }} -->
					<image :src="ads.list[0].image" mode="aspectFill" class="shop-banner"
						style="background-color:lightgray;  border-radius: 2ch;"></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-if="menuCartNum(item.id) > 0">
										{{ 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)">
																<view class="iconfont iconadd-select"></view>
															</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 mode="aspectFill" style="width: 100%; height: 100%;  border-radius: 22rpx;"
									: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 packing-fee" @tap="toPackingFeeDetail">
										<view class="item-info">
											<view class="item-name">打包费</view>
										</view>
										<view class="item-price">
											<text>￥{{ getPackingFee }}</text>
										</view>
									</view>
									<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 getCartGoodsPrice = computed(() => {
	//计算购物车总价（商品价格+餐饮盒费用）
	let total = cart.value.reduce((acc, cur) => {
		const itemPrice = cur.price * cur.number;
		const boxPrice = (cur.boxFee || 0) * cur.number; // 计算每个商品的餐饮盒费用
		return acc + itemPrice + boxPrice;
	}, 0);
	return parseFloat(total).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.91999,
					longitude: 116.45627,
				};
				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;
			}
			console.log("goods:", mygoods);
			console.log("goods:", goods.value);
			// loading.value = false;
			// uni.stopPullDownRefresh();
		}
	}
	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;
	// nextTick(() => cateScrollTop.value = goods.value.find(item => item.id == id).top)
	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 calcSize = () => {
// 	let h = 10
// 	let view = uni.createSelectorQuery().select('#ads')
// 	if (view) {
// 		view.fields({
// 			size: true
// 		}, data => {
// 			if (data) {
// 				h += Math.floor(data.height)
// 			}
// 		}).exec()
// 	}
// 	goods.value.forEach(item => {
// 		let view = uni.createSelectorQuery().select(`#cate-${item.id}`)
// 		view.fields({
// 			size: true
// 		}, data => {
// 			console.log('h3:',h)
// 			item.top = h
// 			h += data.height
// 			item.bottom = h
// 		}).exec()
// 	})
// 	sizeCalcState.value = true
// }
const handleAddToCart = (cate, newGood, num) => {
	console.log("handleAddToCart121212:", 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;
		}
	});

	// 计算餐饮盒费用（假设每个商品需要1个餐饮盒，每个0.5元）
	const boxFee = newGood.boxFee || 0; // 如果没有设置boxFee则默认0.5元


	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,
			boxFee: boxFee, // 添加餐饮盒费用
			aloneSell: newGood.aloneSell,
		});
	}
	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(',')
		// }
		valueStr = newValue.value.join(",");
		// let productValue = good.value.productValue[valueStr]
		// if(!productValue) {
		// 	let skukey = JSON.parse(JSON.stringify(newValue.value))
		// 	skukey.sort((a, b) => a.localeCompare(b))
		// 	//console.log('skukey:',skukey)
		// 	valueStr = skukey.join(',')
		// 	productValue = good.value.productValue[valueStr]
	}

	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();
};

const getPackingFee = computed(() => {
	// 计算打包费（根据每个商品的boxFee计算）
	return cart.value.reduce((acc, cur) => acc + cur.number * (cur.boxFee || 0), 0);
});

const toPackingFeeDetail = () => {
	// uni.navigateTo({
	// 	url: "/pages/components/pages/packing-fee/packing-fee"
	// });
};
</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: 24rpx;
}

.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: 30rpx;
	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;
	padding: 10rpx;
}

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

// 添加打包费样式
.packing-fee {
	border-bottom: 1px dashed #eee;
	padding: 20rpx 0;

	.item-info {
		flex: 1;
	}

	.item-price {
		font-size: 28rpx;
		color: #999;
		padding: 0 20rpx;
	}
}

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