<template>
<!-- 多规格组件弹框 -->
	<uni-popup ref="multiPopup" type="bottom" @change="changeMulti">
		<view class="multiPopup">
			<view class="shop_open_close"  @click="OpenCoupon()">
				<image src="../../static/order/close.png" mode="widthFix"></image>
			</view>
			<view class="multishop">
				<image class="multishop_img" src="http://mnse8q.natappfree.cc/crmebimage/public/content/2025/03/06/8b55b251f89942fbaac25f72143be0e15jg9vmswjy.png" mode="widthFix"></image>
				<view class="multishop_text">
					<view class="multishop_title"><text>蔡长青烟熏鸡肉沙拉（调味沙拉）210g</text></view>
					<view class="multishop_price">14.90<text class="multishop_name">5.00</text></view>
				</view>
			</view>
			<view class="multishop_list">
				<view class="multishop_list_title">颜色</view>
				<view class="multishop_list_item">
					<view class="multishop_list_name multishop_list_arver">沙漠色</view>
					<view class="multishop_list_name">黑色</view>
					<view class="multishop_list_name">原色</view>
					<view class="multishop_list_name">白色</view>
				</view>
			</view>
			<view class="multishop_list">
				<view class="multishop_list_title">容量</view>
				<view class="multishop_list_item">
					<view class="multishop_list_name multishop_list_arver">256GB</view>
					<view class="multishop_list_name">512GB</view>
					<view class="multishop_list_name">1TB</view>
				</view>
			</view>
			<view style="height: 200rpx;"></view>
			<view class="footer_multi">
				<view class="multishop_amount">
					<view class="multishop_name_amount">选数量</view>
					<view class="multishop_data_edit">
						<view class="multishop_data_edit_img border_l" @click="editAmount(1,item)">
							<image class="multishop_data_edit_imgurl"  src="https://zhkj1.oss-cn-shanghai.aliyuncs.com/zhscMerchant/minus.png" mode="widthFix"></image>
						</view>
						<view class="multishop_data_number">22</view>
						<view class="multishop_data_edit_img border_r" @click="editAmount(2,item)">
							<image class="multishop_data_edit_imgurl"  src="https://zhkj1.oss-cn-shanghai.aliyuncs.com/zhscMerchant/add.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
				<view class="footer_multi_btn">确定</view>
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
	import { loads } from '@/utils/index.js'
	import { frontproduct } from '@/server/api';
	import { computed,ref,onMounted,defineEmits } from 'vue';
	import { useCounterStore } from '@/store/counter'; // 引入 Pinia Store
	import { storeToRefs } from 'pinia';//实现解构付值
	import { onLoad,onShow,onPullDownRefresh,onPageScroll,onReachBottom,onReady } from "@dcloudio/uni-app"
	import { skudetail,cartsave } from '@/server/api.js'
	const counterStore = useCounterStore(); // 使用 Store
	//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
	const { token } = storeToRefs(counterStore);
</script>

<style lang="scss">
	//多规格
	.multiPopup{
		background-color: #FFFFFF;
		border-top-left-radius: 25rpx;
		border-top-right-radius: 25rpx;
		max-height: 800rpx;
		overflow-y: auto;
		position: relative;
		.shop_open_close{
			width: 80rpx;
			height: 80rpx;
			position: absolute;
			top: 0;
			right: 0;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.shop_open_close image{
			width: 45rpx;
			height: 45rpx;
		}
		.multishop{
			display: flex;
			padding: 25rpx 25rpx 0rpx 25rpx;
			.multishop_img{
				width: 180rpx;
				height: 180rpx;
				border-radius: 10rpx;
			}
			.multishop_text{
				width: 460rpx;
				margin-left: 20rpx;
				.multishop_title{
					font-size: 28rpx;
					color: #333;
					font-weight: 500;
					margin-top: 5rpx;
					min-height: 115rpx;
				}
				.multishop_title text{
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
				}
				.multishop_price{
					font-size: 32rpx;
					color: #FD3F3F;
					font-weight: 500;
					.multishop_name{
						color: #999;
						font-size: 23rpx;
						text-decoration: line-through;
						margin-left: 5rpx;
						font-weight: 400;
					}
					.multishop_name::before{
						content: "¥";
						font-size: 20rpx;
						margin-right: 5rpx;
					}
				}
				.multishop_price::before{
					content: "¥";
					font-size: 24rpx;
					margin-right: 5rpx;
				}
				    
			}
		}
		.multishop_list{
			padding: 25rpx 25rpx 0rpx 25rpx;
			.multishop_list_title{
				font-size: 28rpx;
				color: #333;
				font-weight: 500;
				margin-bottom: 25rpx;
			}
			.multishop_list_item{
				display: flex;
				flex-wrap: wrap;
				.multishop_list_name{
					padding: 12rpx 35rpx 12rpx 35rpx;
					border-radius: 10rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 24rpx;
					color: #333333;
					background-color: #f6f6f6;
					margin-right: 25rpx;
					margin-bottom: 25rpx;
					border:1px solid #f6f6f6;
				}
				.multishop_list_arver{
					background-color: #FFD7D7;
					border:1px solid #fd3f3f;
					color: #fd3f3f;
				}
				
			}
		}
		.footer_multi{
			position: fixed;
			bottom: 0rpx;
			width: 100%;
			background-color: #FFFFFF;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
			.multishop_amount{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-left: 25rpx;
				padding-right: 25rpx;
				margin-top: 15rpx;
				margin-bottom: 40rpx;
				.multishop_name_amount{
					font-size: 28rpx;
					color: #333;
					font-weight: 500;
				}
				.multishop_data_edit{
					display: flex;
					align-items: center;
					justify-content: center;
					.multishop_data_edit_img{
						width: 55rpx;
						height: 50rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						border-top: 1px solid #E9E9E9;
						border-bottom: 1px solid #E9E9E9;
						.multishop_data_edit_imgurl{
							width: 25rpx;
							height: 25rpx;
							display: block;
						}
					}
					.border_l{
						border-left: 1px solid #E9E9E9;
						border-top-left-radius: 50rpx;
						border-bottom-left-radius: 50rpx;
					}
					.border_r{
						border-right: 1px solid #E9E9E9;
						border-top-right-radius: 50rpx;
						border-bottom-right-radius: 50rpx;
					}
				}
				.multishop_data_number{
					width: 60rpx;
					height: 50rpx;
					font-size: 28rpx;
					color: #333;
					display: flex;
					align-items: center;
					justify-content: center;
					border: 1px solid #E9E9E9;
				}
			}
			.footer_multi_btn{
				margin: 0 28rpx 0 28rpx;
				height:84rpx;
				background-color: #FD3F3F;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 32rpx;
				color: #FFFFFF;
				border-radius: 50rpx;
			}
		}
</style>