<script setup lang="ts">
	import sort from "./sort.vue"
	import Shopdetils from "./Shopdetails.vue"
	//import details from "./details.vue"
	import { apiImageUrl } from '../../API/api'

	import { ref, onMounted, computed, onUnmounted, watch } from 'vue'
	import { url } from "inspector";


	const currentIndex = ref(0);
	const tabs = ref([
		{ name: '点餐' },
		{ name: '评价' },
		{ name: '商家信息' }
	]);


	const switchTab = (index) => {
		currentIndex.value = index;
	};
	//评论
	const historyList = ref([
		{
			imgUrl: 'https://img.zcool.cn/community/0105ec5b5ac3cba801206a35cf08a8.jpg@1280w_1l_2o_100sh.jpg',
			title: '大表哥',
			sale: '8.0',
			star: '4',
			time: '刚才',
			message: '这次点的外卖真是超乎预期的好吃！【香辣鸡腿堡】外皮酥脆，鸡肉鲜嫩多汁，辣度适中，每一口都是满满的幸福感。【薯条】也是惊喜，又脆又香，完全没有油腻感。最棒的是配送员【小张】，准时送达，态度亲切，还特意提醒我餐品有点烫，小心食用。整体体验满分，下次还会再点！'

		},
		{
			imgUrl: 'https://ts1.cn.mm.bing.net/th/id/R-C.63e4b0a881283cbd46f07e77c2bbd491?rik=vWq%2fKkimZ5n2XQ&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50014%2f5917.jpg_wh1200.jpg&ehk=KCX2DzgqaiIJnMJZUyFc%2btT9ILzKGslHE8oaSAKORdE%3d&risl=&pid=ImgRaw&r=0',
			title: '美食猎人',
			sale: '8.0',
			star: '4',
			time: '刚才',
			message: '这次点的外卖真是超乎预期的好吃！【香辣鸡腿堡】外皮酥脆，鸡肉鲜嫩多汁，辣度适中，每一口都是满满的幸福感。【薯条】也是惊喜，又脆又香，完全没有油腻感。最棒的是配送员【小张】，准时送达，态度亲切，还特意提醒我餐品有点烫，小心食用。整体体验满分，下次还会再点！'
		},
		{
			imgUrl: 'https://img.zcool.cn/community/0189d85c3c421aa80121fbb0284f6c.jpg@1280w_1l_2o_100sh.jpg',
			title: '吃货小能手',
			sale: '8.0',
			star: '4',
			time: '刚才',
			message: '这次点的外卖真是超乎预期的好吃！【香辣鸡腿堡】外皮酥脆，鸡肉鲜嫩多汁，辣度适中，每一口都是满满的幸福感。【薯条】也是惊喜，又脆又香，完全没有油腻感。最棒的是配送员【小张】，准时送达，态度亲切，还特意提醒我餐品有点烫，小心食用。整体体验满分，下次还会再点！'
		},
		{
			imgUrl: 'https://ts1.cn.mm.bing.net/th/id/R-C.b3a7697d2793ba094a861d546c31190d?rik=NevOIW4XmkUuMA&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50069%2f5445.jpg_wh1200.jpg&ehk=wuLPicg%2b9wXz8QAwp%2fAVFBtJQ6loBUiVfQZu2bbZODA%3d&risl=&pid=ImgRaw&r=0',
			title: '午夜觅食者',
			sale: '8.0',
			star: '4',
			time: '1分钟前',
			message: '这次点的外卖真是超乎预期的好吃！【香辣鸡腿堡】外皮酥脆，鸡肉鲜嫩多汁，辣度适中，每一口都是满满的幸福感。【薯条】也是惊喜，又脆又香，完全没有油腻感。最棒的是配送员【小张】，准时送达，态度亲切，还特意提醒我餐品有点烫，小心食用。整体体验满分，下次还会再点！'
		},
		{
			imgUrl: 'https://img.zcool.cn/community/0192885d01b363a801213ec27c862a.jpg@1280w_1l_2o_100sh.jpg',
			title: '素食爱好者',
			sale: '8.0',
			star: '4',
			time: '40min',
			message: '这次点的外卖真是超乎预期的好吃！【香辣鸡腿堡】外皮酥脆，鸡肉鲜嫩多汁，辣度适中，每一口都是满满的幸福感。【薯条】也是惊喜，又脆又香，完全没有油腻感。最棒的是配送员【小张】，准时送达，态度亲切，还特意提醒我餐品有点烫，小心食用。整体体验满分，下次还会再点！'
		},
		{
			imgUrl: 'https://img.zcool.cn/community/018aab5cc14900a801214168fdffc2.jpg@1280w_1l_2o_100sh.jpg',
			title: '加班狗',
			sale: '8.0',
			star: '4',
			time: '40min',
			message: '这次点的外卖真是超乎预期的好吃！【香辣鸡腿堡】外皮酥脆，鸡肉鲜嫩多汁，辣度适中，每一口都是满满的幸福感。【薯条】也是惊喜，又脆又香，完全没有油腻感。最棒的是配送员【小张】，准时送达，态度亲切，还特意提醒我餐品有点烫，小心食用。整体体验满分，下次还会再点！'
		},
		{
			imgUrl: 'https://ts1.cn.mm.bing.net/th/id/R-C.68978afc71576a94a1d50ef5016dbd9e?rik=cDDsy5SLmDvDHQ&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50075%2f0779.jpg_wh1200.jpg&ehk=FG4Hd5S711LYcuLBIcDagQyk4KhcH1oIfqyk1MWUOyg%3d&risl=&pid=ImgRaw&r=0',
			title: '甜品达人',
			sale: '8.0',
			star: '4',
			time: '40min',
			message: '这次点的外卖真是超乎预期的好吃！【香辣鸡腿堡】外皮酥脆，鸡肉鲜嫩多汁，辣度适中，每一口都是满满的幸福感。【薯条】也是惊喜，又脆又香，完全没有油腻感。最棒的是配送员【小张】，准时送达，态度亲切，还特意提醒我餐品有点烫，小心食用。整体体验满分，下次还会再点！'
		},
		{
			imgUrl: 'https://img95.699pic.com/photo/50093/6813.jpg_wh860.jpg',
			title: '快餐侠',
			sale: '8.0',
			star: '4',
			time: '40min',
			message: '这次点的外卖真是超乎预期的好吃！【香辣鸡腿堡】外皮酥脆，鸡肉鲜嫩多汁，辣度适中，每一口都是满满的幸福感。【薯条】也是惊喜，又脆又香，完全没有油腻感。最棒的是配送员【小张】，准时送达，态度亲切，还特意提醒我餐品有点烫，小心食用。整体体验满分，下次还会再点！'
		},
	])

	const talk = () => {
		uni.navigateTo({
			url: '/pages/talk/talk'
		})
	}
	
	const quantity = ref(1);

	const showRight = ref(null);

	const showDrawer = () => {
		if (showRight.value) {
			showRight.value.open();
		}
	};

	const closeDrawer = () => {
		if (showRight.value) {
			showRight.value.close();
		}
	};


	const isLiked = ref(false);

	const likeImageSrc = ref('../../static/small/star.png');

	const toggleLike = () => {
		isLiked.value = !isLiked.value;
		likeImageSrc.value = isLiked.value ? '../../static/small/star.png' : '../../static/small/starSelected.png';
		console.log(isLiked.value ? '点赞成功' : '取消点赞成功');
	};
	
	
	const cartItems = ref([]); 
		
		    
		    const updateCart = (newCartItems) => {
		      cartItems.value = newCartItems; // 更新购物车数据
		      console.log('更新后的购物车:', cartItems.value);
		    };
	
	       onMounted(() => {
	         cartItems.value = uni.getStorageSync('cartItems') || [];
	       });

	const deleteItem = (index) => {
		cartItems.value.splice(index, 1);
	};

	const incrementQuantity = (index) => {
		if (cartItems.value[index].quantity < 9) {
			cartItems.value[index].quantity++;
		}
	};

	const decrementQuantity = (index) => {
		if (cartItems.value[index].quantity > 1) {
			cartItems.value[index].quantity--;
		}
	};

	// 计算金额
	const totalAmount = computed(() => {
		return cartItems.value.reduce((total, item) => {
			return total + (item.dishesPrice * item.quantity);
		}, 0);
	});



	const account = () => {
		console.log('Total amount to pay:', totalAmount.value);

		uni.navigateTo({
			url: `/pages/account/account?totalAmount=${encodeURIComponent(totalAmount.value.toString())}`
		});
	};




	const merchantId = ref();

	const getMerchantIdFromUrl = () => {

		const pages = getCurrentPages();
		const currentPage = pages[pages.length - 1];


		console.log('Current page options:', currentPage.options);
		if (currentPage && currentPage.options && currentPage.options.merchantId) {
			merchantId.value = currentPage.options.merchantId;
			console.log(`Merchant ID received: ${merchantId.value}`);
		} else {
			console.error('Could not retrieve merchantId from URL.');
		}
	};


	onMounted(() => {
		getMerchantIdFromUrl()
	});
   
	watch(merchantId, (newValue) => {
		uni.$emit('merchantIdChanged', newValue);
	});
</script>

<template>
	<scroll-view scroll-y class="preview">
		<!-- 商户轮播图 -->
		<view class="preview">
			<swiper :circular="true" :autoplay="true" :interval="3000" indicator-dots>
				<swiper-item>
					<image mode="aspectFill" class="image"
						src="https://ts1.cn.mm.bing.net/th/id/R-C.8f2db93b542db8adf6c850762c1cce4d?rik=erpuvqVy64IJzQ&riu=http%3a%2f%2fimg95.699pic.com%2fphoto%2f50044%2f9286.jpg_wh860.jpg&ehk=dnizwrPBuCaHnaxfih%2fryK7p%2fXZMbmolNORKknXvL%2bI%3d&risl=&pid=ImgRaw&r=0">
					</image>
				</swiper-item>
				<swiper-item>
					<image mode="aspectFill" class="image"
						src="https://img95.699pic.com/photo/50127/2949.jpg_wh860.jpg"></image>
				</swiper-item>
				<swiper-item>
					<image mode="aspectFill" class="image"
						src="https://img95.699pic.com/photo/50070/9636.jpg_wh860.jpg"></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 店铺标题-->
		<view class="priceTitle">
			<view class="meta">
				<text class="symbol">店铺详情</text>
			</view>
		</view>
		<!-- 商品详情 -->
		<view class="tab-menu">
			<view class="tab-item" v-for="(tab, index) in tabs" :key="index" :class="{active: currentIndex === index}"
				@click="switchTab(index)">
				{{ tab.name }}
			</view>
		</view>
		<view class="content">
			<block v-if="currentIndex === 0">
				<sort @update-cart="updateCart" :merchant-id="merchantId"></sort>
			</block>
			<block v-if="currentIndex === 1">
				<view class="container">
					<view class="history-list">
						<view class="history-item" v-for="(item, index) in historyList" :key="index">
							<view class="history-info">
								<image class="history-img" :src="item.imgUrl"></image>
								<view class="nameTime">
									<text class="history-title">{{ item.title }}</text>
									<text class="time">{{item.time}}</text>
								</view>
								<view class="star">
									<text class="history-sale">{{ item.sale }}</text>
									<uni-rate :readonly="true" :value="item.star" active-color="#13c2c2"
										:is-fill="false" color="#13c2c2" />
								</view>
							</view>
							<view class="extend">
								<text>{{item.message}}</text>
							</view>
						</view>
					</view>
				</view>
			</block>
			<block v-if="currentIndex === 2">
				<Shopdetils></Shopdetils>
			</block>
		</view>
	</scroll-view>
	<!-- 用户操作 -->
	<view class="toolbar">
		<view class="icons">
			<button class="icons-button">
				<text class="icon-heart" @click="toggleLike">
					<image :src="likeImageSrc" style="width: 20px;height: 20px;" />
				</text>
				收藏
			</button>
			<button class="icons-button" open-type="contact" @click="talk">
				<text class="icon-handset">
					<img src="../../static/small/service.png" style="width: 20px;height: 20px;" />
				</text>
				客服
			</button>
		</view>
		<view class="buttons">
			<view class="addcart" @click="showDrawer('showRight')">
				<p>购物车</p>
			</view>
		</view>
	</view>
	<!--购物车详情-->
	<view class="example-body">
		<uni-drawer ref="showRight" mode="left" :mask-click="true" @change="change($event,'showRight')">
			<view class="scroll-view">
				<scroll-view class="scroll-view-box" scroll-y="true">
					<view class="info-content" v-for="(item,index) in cartItems" :key="index">
						<view class="card">
							<view class="containerShow">
								<view class="img">
									<image :src="item.dishesImage" class="imageItem"></image>
								</view>
								<view class="delete-button">
									<image src="../../static/small/cha.png" @click="deleteItem(index)" alt="Delete"
										style="width: 15px;height: 15px;" />
								</view>
								<view class="message">
									<view class="titleCard">{{item.dishesName}}</view>
									<view class="moneCard">￥{{item.dishesPrice}}</view>
									<view class="quantity-selector">
										<view class="jia" @click="decrementQuantity(index)">-</view>
										<text class="quantity-value">{{ item.quantity }}</text>
										<view class="jian" @click="incrementQuantity(index)">+</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<button type="primary" class="sum" @click="account">
						<text>立即结算￥{{ totalAmount }}</text>
					</button>
				</scroll-view>
			</view>
		</uni-drawer>
	</view>
</template>
<style lang="scss">
	.priceTitle {
		width: 100%;
		height: 50px;
		background-color: #4095e5;
		font-size: 20px;
		color: #fff;
		padding-left: 5px;
		line-height: 50px;
	}

	.tabs {
		display: flex;
		justify-content: space-around;
		line-height: 60rpx;
		margin: 0 10rpx;
		background-color: #fff;
		box-shadow: 0 4rpx 6rpx rgba(240, 240, 240, 0.6);
		position: relative;
		z-index: 9;

		.item {
			flex: 1;
			text-align: center;
			padding: 20rpx;
			font-size: 28rpx;
			color: #262626;
		}

		.cursor {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 18%;
			height: 6rpx;
			padding: 0 50rpx;
			background-color: #4095e5;
			transition: all 0.4s;
		}
	}

	.preview image {
		width: 100%;
	}

	page {
		height: 100%;
		overflow: hidden;
	}

	.viewport {
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.search {
		padding: 0 30rpx 20rpx;
		background-color: #fff;

		.input {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 64rpx;
			padding-left: 26rpx;
			color: #8b8b8b;
			font-size: 28rpx;
			border-radius: 32rpx;
			background-color: #f3f4f4;
		}
	}

	.icon-search {
		&::before {
			margin-right: 10rpx;
		}
	}

	.categories {
		flex: 1;
		min-height: 400rpx;
		display: flex;
	}

	.primary {
		overflow: hidden;
		width: 180rpx;
		flex: none;
		background-color: #f6f6f6;

		.item {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 96rpx;
			font-size: 26rpx;
			color: #595c63;
			position: relative;

			&::after {
				content: '';
				position: absolute;
				left: 42rpx;
				bottom: 0;
				width: 96rpx;
				border-top: 1rpx solid #e3e4e7;
			}
		}

		.active {
			background-color: #fff;

			&::before {
				content: '';
				position: absolute;
				left: 0;
				top: 0;
				width: 8rpx;
				height: 100%;
				background-color: #ed0a3f;
			}
		}
	}

	.primary .item:last-child::after,
	.primary .active::after {
		display: none;
	}

	.secondary {
		background-color: #fff;

		.carousel {
			height: 200rpx;
			margin: 0 30rpx 20rpx;
			border-radius: 4rpx;
			overflow: hidden;
		}

		.panel {
			margin: 0 30rpx 0rpx;
		}

		.title {
			height: 60rpx;
			line-height: 60rpx;
			color: #333;
			font-size: 28rpx;
			border-bottom: 1rpx solid #f7f7f8;

			.more {
				float: right;
				padding-left: 20rpx;
				font-size: 24rpx;
				color: #999;
			}
		}

		.more {
			&::after {
				font-family: 'erabbit' !important;
				content: '\e70c';
			}
		}

		.section {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			padding: 20rpx 0;

			.goods {
				width: 150rpx;
				margin: 0rpx 30rpx 20rpx 0;

				&:nth-child(3n) {
					margin-right: 0;
				}

				image {
					width: 150rpx;
					height: 150rpx;
				}

				.name {
					padding: 5rpx;
					font-size: 22rpx;
					color: #333;
				}

				.price {
					padding: 5rpx;
					font-size: 18rpx;
					color: #cf4444;
				}

				.number {
					font-size: 24rpx;
					margin-left: 2rpx;
				}
			}
		}
	}


	.toolbar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
		background-color: #fff;
		height: 100rpx;
		padding: 0 20rpx var(--window-bottom);
		border-top: 1rpx solid #eaeaea;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: content-box;

		.buttons {
			display: flex;

			&>view {
				width: 220rpx;
				text-align: center;
				line-height: 72rpx;
				font-size: 26rpx;
				color: #fff;
				border-radius: 72rpx;
			}

			.addcart {
				background-color: #4095e5;
			}

			.buynow,
			.payment {
				background-color: #4095e5;
				margin-left: 20rpx;
			}
		}

		.icons {
			padding-right: 10rpx;
			display: flex;
			align-items: center;
			flex: 1;

			.icons-button {
				flex: 1;
				text-align: center;
				line-height: 1.4;
				padding: 0;
				margin: 0;
				border-radius: 0;
				font-size: 20rpx;
				color: #333;
				background-color: #fff;

				&::after {
					border: none;
				}
			}

			text {
				display: block;
				font-size: 34rpx;
			}
		}
	}

	.tab-menu {
		display: flex;
		justify-content: space-around;
		padding: 10px 0;
		background-color: #f5f5f5;
	}

	.tab-item {
		padding: 10px;
		cursor: pointer;
	}

	.tab-item.active {
		color: #4095e5;
		font-weight: bold;
	}

	.container {
		align-items: center;
		padding: 20rpx;
	}

	.history-list {
		width: 100%;
	}

	.history-item {
		padding: 10px 0px 10px 5px;
		margin-bottom: 20rpx;
	}

	.history-img {
		width: 200rpx;
		height: 100rpx;
		margin-right: 20rpx;
	}

	.history-info {
		display: flex;
		flex-direction: row;
	}

	.nameTime {
		display: flex;
		flex-direction: column;
	}

	.history-title {
		font-size: 32rpx;
		font-weight: bold;
		width: 170px;
	}

	.time {
		font-size: 24rpx;
		color: #999;
	}

	.star {
		display: inline-block;
		line-height: 15px;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}

	.history-sale {
		font-size: 30rpx;
		color: #000;
		float: right;
		display: inline-block;
		line-height: 15px;
		font-weight: 700;
	}

	.extend {
		font-size: 24rpx;
		color: #999;
		padding-top: 10px;
	}

	.example-body {
		padding: 10px;
	}

	.scroll-view {
		/* #ifndef APP-NVUE */
		width: 100%;
		height: 100%;
		/* #endif */
		flex: 1
	}

	
	.scroll-view-box {
		flex: 1;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}

	.info {
		padding: 15px;
		color: #666;
	}

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

	.info-content {
		padding: 5px 15px;
	}

	.card {
		width: 100%;
		height: 100px;
		border-radius: 15px;
		background-image: -webkit-linear-gradient(top, #fff, #B0D3F4);
	}

	.containerShow {
		padding: 7px;
		position: relative;
	}

	.img {
		width: 60px;
		height: 40px;
		display: inline-block;
		margin-top: 30px;
	}

	.imageItem {
		width: 100%;
		height: 100%;
		border-radius: 15px;
		margin: auto 0;
	}

	.message {
		width: 110px;
		height: 88px;
		float: right;
		display: inline-block;

	}

	.quantity-selector {
		display: flex;
		justify-content: center;
		margin-top: 10rpx;
	}

	.quantity-value {
		font-size: 32rpx;
		font-weight: bold;
		margin: 0 20rpx;
	}

	.titleCard {
		font-size: 16px;
		padding-bottom: 3px;
	}

	.moneyCard {
		font-size: 15px;
		color: #666;
		padding: 0;
	}

	.jia,
	.jian {
		background-color: #fff;
		padding: 3px 5px 3px 5px;
		border: 1px solid #999;
	}

	.sum {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
	}

	.containerShow:last-child {
		padding-bottom: 150px;
	}

	.delete-button {
		position: absolute;
		top: 0;
		right: 0;
	}
</style>