<template>
	<view>
		<up-popup :show="showCart" :round="20" :safeAreaInsetBottom="false" :zIndex="98" :overlayStyle="{ zIndex: 98 }"
			@close="close">
			<view class="cart-list-wrap">
				<!-- 	<view class="cart-header flex-between">
					<view class="num">已点 {{ cartLists_count }} 份</view>
					<view class="clear" @click="cartclear">
						<up-icon name="trash" color="#999"></up-icon>
						<text class="t">清空</text>
					</view>
				</view> -->
				<scroll-view scroll-y class="scroll-view">
					<view class="list-wrap" :class="[nextFullAmountActivty?'pb-20': '']">
						<view v-if="cartList.length > 0">
							<view class="ShoppingCart flex-between">
								<view> 购物车 </view>
								<view class="flex-between" @click="cartclear">
									<up-icon name="trash" color="#999" size="20"></up-icon>
									<text class="clear-btn">清空购物车</text>
								</view>
							</view>
							<view class="shop-item" v-for="(item, index) in cartList" :key="item.id">
								<view class="shop-item-content">
									<view class="cover" v-if="item.productId != -999">
										<view class="limit-discount" v-if="showLimitDiscount(item)">
											限时折扣
										</view>
										<up-image v-if="!item.cartListinfo.is_temporary" :src="item.coverImg" width="124rpx" height="124rpx" mode="aspectFill"
											radius="10"></up-image>
										<up-image v-else-if="item.cartListinfo.is_temporary&&item.cartListinfo.product_name=='签子'" src="https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/5/b97054debd83486ab7ad8e20ca6a360a.png" width="124rpx" height="124rpx" mode="aspectFill"
											radius="10"></up-image>	
										<up-image v-else width="124rpx" height="124rpx" mode="aspectFill"
											radius="10"></up-image>	
									</view>
									<view class="info">
										<view class="name" v-if=" item.cartListinfo.is_temporary == 1">
											{{item.cartListinfo.product_name||item.cartListinfo.name|| item.name}}
										</view>
										<view class="name" v-else>{{item.name}}</view>
										<view class="select-sku-wrap" v-if="item.type == 'sku'">
											<text v-for="i in item.skuList" :key="i.id">
												{{ item.cartListinfo.sku_id == i.id ? i.name : "" }}
											</text>
										</view>
										<view class="select-sku-wrap" v-if="item.type == 'package'">
											<view v-for="(a, b) in dataprocessing(item.cartListinfo)" :key="b">
												<!-- <view>{{a.title}}</view> -->
												<text v-for="i in a.goods" :key="i.proId" style="margin-left: 4rpx">
													{{ i.proName }}
												</text>
											</view>
										</view>
										<view class="u-font-24 color-666 u-flex">
											<text style="max-width: 296rpx;" class="u-line-1">备注：{{item.cartListinfo.remark||''}}</text>
											<image @click="editRemark(item)"
												src="https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/3/9fe4df7c6c8b4290aa5f78282b143900.png"
												style="width: 34rpx;height: 34rpx;"></image>
										</view>
										<view class="price-wrap" style="padding-top: 0">
											<view class="price">
												<text class="i">¥</text>
												<goodsPrice :limitDiscount="limitDiscount" :cart="item"
													:shopUserInfo="shopUserInfo" :shopInfo="shopInfo"></goodsPrice>

												<text class="originalprice"
													v-if="showLimitDiscount(item)">{{ item.salePrice }}</text>

												<!-- <text class="originalprice"
													v-if="item.originPrice">¥{{item.originPrice}}</text>
												<text class="unit" v-if="item.unitName">/{{item.unitName}}</text> -->
											</view>

											<view class="operation-wrap">
												<view class="btn">
													<up-icon color="#E8AD7B" name="minus-circle" size="18"></up-icon>
													<view class="btnClick" @click="cartListadd(item, '-')"></view>
												</view>
												<text class="num">{{ ifcartNumber(item) }}</text>
												<view class="btn" v-if="item.type != 'package'">
													<!-- <up-icon name="plus-circle-fill"
														:color="{shopInfo.isVip ==1 && shopInfo.isMemberPrice==1? '#CECECE' : '#E9AB7A'"
														size="25"></up-icon> -->
													<up-icon name="plus-circle-fill" color="#E8AD7B"
														size="18"></up-icon>
													<view class="btnClick" @click="cartListadd(item, '+')"></view>
												</view>
											</view>
										</view>

									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</up-popup>


		<model v-model="modelData.show" title="单品备注" @confirm="modelDataConfirm">
			<view class="u-p-40">
				<up-input v-model="modelData.item.cartListinfo.remark" placeholder="备注(50字以内)" :maxlength="50"></up-input>
			</view>
		</model>
	</view>
</template>

<script setup>
	import {
		ref,
		defineProps,
		computed,
		defineEmits,
		watch,
		reactive
	} from "vue";
	import {
		productStore
	} from "@/stores/user.js";
	import goodsPrice from "@/components/goods-price.vue";
	import * as orderUtils from "@/utils/order-utils.js";
	import model from './modal.vue'
	import _ from 'lodash'
	const modelData = reactive({
		show: false,
		item: {
			cartListinfo:{
				remark: ''
			}
		}
	})

	function editRemark(item) {
		console.log('editRemark', item)
		modelData.item = _.cloneDeep(item) 
		modelData.show = true
	}

	function modelDataConfirm() {
		emits('customevent', {
			id: modelData.item.cartListinfo.id,
			product_id: modelData.item.cartListinfo.product_id,
			sku_id: modelData.item.cartListinfo.sku_id,
			number: modelData.item.cartListinfo.number,
			type: "shopping",
			table_code: uni.cache.get('tableCode'),
			shop_id: uni.cache.get('shopId'),
			operate_type: "edit",
			remark:modelData.item.cartListinfo.remark
		})
		modelData.show = false
	}

	// 定义自定义事件
	const emits = defineEmits(["customevent", "close", "clickcancelOrder", 'updateRemark']);

	const props = defineProps({
		nextFullAmountActivty: {
			type: Object,
		},
		cartList: {
			type: Array,
		},
		cartLists_count: {
			type: Number,
			default: 0,
		},
		showCart: {
			type: Boolean,
		},
		orderinfo: {
			type: Object,
			default: {
				detailMap: {},
			},
		},
		//限时折扣
		limitDiscount: {
			type: Object,
			default: {},
		},
	});


	function showLimitDiscount(item) {
		if (!props.limitDiscount || !props.limitDiscount.id) {
			return false;
		}
		return orderUtils.canUseLimitTimeDiscount(
			item,
			props.limitDiscount,
			shopInfo.value,
			shopUserInfo.value,
			"id"
		);
	}


	const shopInfo = ref(uni.cache.get("shopInfo"));
	const shopUserInfo = ref(uni.cache.get("shopUserInfo"));

	function returnRealPrice(cart) {
		const price = orderUtils.returnPrice({
			goods: cart,
			shopInfo: shopInfo,
			limitDiscount: props.limitDiscount.id ? props.limitDiscount : null,
			shopUserInfo: shopUserInfo,
		});
		return price;
	}

	// 定义 ifcartNumber 计算属性方法
	const ifcartNumber = computed(() => {
		return (item) => {
			// 如果 item 为空或者 cartNumber 不是字符串类型，返回 0
			if (!item || typeof item.cartNumber !== "string") {
				return 0;
			}
			let numValue = parseFloat(item.cartNumber);
			if (isNaN(numValue)) {
				// 如果转换结果是 NaN，说明 cartNumber 不是有效的数字字符串，返回 0
				return 0;
			}
			// type string  商品类型 single-单规格商品 sku-多规格商品 package-套餐商品 weight-称重商品 coupon-团购券
			if (item.type === "weight") {
				// 如果类型是称重重量，将值保留两位小数
				return parseFloat(numValue.toFixed(2));
			} else {
				// 如果类型是整数，将值转换为整数
				return Math.round(numValue);
			}
			// 如果类型不匹配，返回原始值
			return item.cartNumber;
		};
	});

	const close = () => {
		emits("close", false);
	};
	// 购物车加减
	const cartListadd = async (item, i) => {
		// 是否起售 如果小于或者大于都是1
		const cartNumberFloat = parseFloat(item.cartNumber);
		const suitNum =
			item.suitNum >= cartNumberFloat && i == "-" ? item.cartNumber : 1;

		emits("customevent", {
			id: item.cartListId ? item.cartListId : "",
			type: "shopping",
			table_code: uni.cache.get("tableCode"),
			shop_id: uni.cache.get("shopId"),
			operate_type: calculateValue(item.cartNumber, i, suitNum) == "del" ?
				"del" : item.cartListId && item.cartNumber > 0 ?
				"edit" : "add",
			product_id: item.id,
			sku_id: item.skuId,
			number: await calculateValue(item.cartNumber, i, suitNum),
			is_print: 1,
			suitNum: item.suitNum,
		});
	};

	const dataprocessing = computed(() => {
		return (item) => {
			let res = null;
			try {
				res = JSON.parse(item.pro_group_info);
			} catch (error) {
				//TODO handle the exception
			}
			return res;
		};
	});

	const clickcancelOrder = (i, key) => {
		emits("clickcancelOrder", {
			i,
			key,
		});
		emits("customevent", {
			type: "shopping",
			table_code: uni.cache.get("tableCode"),
			shop_id: uni.cache.get("shopId"),
			operate_type: "clearOrder",
		});
	};

	const calculateValue = (cartNumber, i, step = 1) => {
		if (i == "+") {
			const result = parseFloat(cartNumber) + parseFloat(step);
			return result.toFixed(2);
		} else {
			// 当减到0返回del
			const result = parseFloat(cartNumber) - parseFloat(step);
			return result == 0 ? "del" : result.toFixed(2);
		}
	};

	// 菜品备注修改
	const productBlur = (item) => {
		let params = {
			skuId: item.skuId,
			num: item.number, //数量
			type: item.type,
			isVip: item.isVip,
			productId: item.productId, //商品id
			note: item.note,
			shopId: this.shopId,
			userId: uni.cache.get("userInfo").id,
			tableId: this.tableCode,
		};
		this.$emit("addCart", params);
	};

	// 清空购物车
	const cartclear = () => {
		emits("customevent", {
			type: "shopping",
			table_code: uni.cache.get("tableCode"),
			shop_id: uni.cache.get("shopId"),
			operate_type: "cleanup",
		});
	};
</script>

<style lang="scss">
	.clear-btn {
		color: #333;
		font-size: 24rpx;
		font-weight: 500;
	}

	.cart-list-wrap {
		.cart-header {
			display: flex;
			height: 72rpx;
			background-color: #f2f2f2;
			align-items: center;
			justify-content: space-between;
			padding: 20upx 28rpx;
			border-radius: 20upx 20upx 0 0;

			.num {
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
			}

			.clear {
				display: flex;
				align-items: center;

				.t {
					font-size: 24upx;
					color: #999;
					margin-left: 4upx;
				}
			}
		}

		.scroll-view {
			max-height: 60vh;
			margin-bottom: 190rpx;

			.list-wrap {
				padding: 0 28rpx;

				&.pb-20 {
					padding-bottom: 20px;
				}

				.ShoppingCart {
					font-size: 30rpx;
					text-align: left;
					padding: 20rpx 0;
					font-weight: 700;
					border-bottom: 1rpx solid #cecece;
					color: #000;
				}

				.shop-item:last-child {
					border-bottom: 1rpx solid #cecece;
					padding-bottom: 20rpx;
				}

				.shop-item {
					margin-top: 15rpx;
					display: flex;
					flex-direction: column;

					.shop-item-content {
						display: flex;
						justify-content: center;
						align-items: center;

						.cover {
							position: relative;

							.limit-discount {
								position: absolute;
								background: #cc5617;
								font-size: 24rpx;
								color: #fff;
								border-radius: 20rpx 0 20rpx 0;
								padding: 2rpx 10rpx;
								z-index: 1;
							}
						}
					}

					.shop-item-remark {
						display: flex;
						align-items: center;
						padding-right: 180rpx;
						margin-top: 10rpx;

						.label {
							font-size: 28rpx;
							color: #666;
							margin-right: 20rpx;
						}
					}

					.langcover {
						position: relative;
					}

					.langcover::after {
						content: "加载中..";
						position: absolute;
						top: 0;
						left: 0;
						height: 100%;
						width: 100%;
						background-color: #e8e8e8;
						color: #6b6b6b;
						border-radius: 10rpx;
						text-align: center;
						line-height: 180rpx;
						z-index: 1;
					}

					.info {
						flex: 1;
						padding-left: 20rpx;

						.name {
							font-size: 28upx;
							font-weight: bold;
							color: #333;
							margin-bottom: 5rpx;
						}

						.select-sku-wrap {
							font-weight: 400;
							font-size: 24rpx;
							color: #999999;
						}

						.price-wrap {
							margin-top: 8rpx;
							display: flex;
							align-items: center;
							justify-content: space-between;

							.price {
								display: flex;
								align-items: baseline;

								.i,
								.num {
									font-weight: bold;
									font-size: 32rpx;
									color: #333333;
								}

								.i {}

								.price {
									font-family: Source Han Sans CN, Source Han Sans CN;
									font-weight: bold;
									font-size: 32rpx;
									color: #333333;
								}

								.originalprice {
									color: #999;
									margin-left: 10rpx;
									font-weight: 400;
									font-size: 24rpx;
									text-decoration: line-through;
								}

								.unit {
									font-family: Source Han Sans CN, Source Han Sans CN;
									font-weight: 400;
									font-size: 36rpx;
									color: #333333;
								}

								.lineThrough {
									font-weight: normal;
									text-decoration: line-through;
									color: #999 !important;
									font-size: 24rpx !important;
								}
							}

							.sku-wrap {
								padding: 6upx 16upx;
								background-color: #ffd100;
								border-radius: 12upx;
								display: flex;
								align-items: center;
								justify-content: center;
								position: relative;

								.t {
									font-size: 24upx;
									font-weight: bold;
								}

								.dot {
									display: flex;
									align-items: center;
									justify-content: center;
									font-size: 20upx;
									position: absolute;
									padding: 2upx 12upx;
									border-radius: 8upx;
									background-color: #eb5232;
									color: #fff;
									position: absolute;
									top: -14upx;
									right: -8upx;
								}
							}

							.operation-wrap {
								display: flex;
								align-items: center;

								.num {
									font-size: 32upx;
									padding: 0 16upx;
								}

								.btn {
									position: relative;
									display: flex;
									align-items: center;
									justify-content: center;
									position: relative;

									.btnClick {
										width: 100rpx;
										height: 100rpx;
										position: absolute;
										// bottom: 0;
									}

									.btnClick.l {
										right: 0;
									}

									.btnClick.r {
										left: 0;
									}
								}
							}
						}
					}
				}
			}
		}

		.card {
			position: relative;

			.cardcalorders {
				position: relative;
				padding: 20rpx 0;
				font-size: 35rpx;
				font-weight: bold;
				border-bottom: 1rpx solid #cecece;
				color: #000;

				.absolute {
					position: absolute;
					right: 0;
					top: 2rpx;
					font-size: 24rpx;
				}
			}

			.card_item {
				display: flex;
				flex-direction: column;
				position: relative;

				.head {
					display: flex;
					justify-content: space-between;

					.head_left {
						width: 100%;
						display: flex;
						justify-content: space-between;
						padding: 20rpx 0;
						border-bottom: 1rpx solid #cecece;

						.placeNum {
							font-weight: 700;
							font-size: 27rpx;
							color: #3e3d3d;
						}

						.placeTime {
							font-weight: 400;
							font-size: 32rpx;
							color: #999;

							.t {
								margin-left: 4rpx;
								font-size: 24rpx;
							}
						}
					}
				}

				.shop-info {
					border-bottom: 2rpx dashed #e5e5e5;

					.item {
						margin: 30rpx 0;
						display: flex;

						.info {
							flex: 1;
							display: flex;
							flex-direction: column;
							padding-left: 16upx;

							.productName {
								font-weight: bold;
								font-size: 28rpx;
								color: #333333;
								margin-top: 20rpx;
							}

							.productSkuName {
								font-weight: 400;
								font-size: 24rpx;
								color: #999999;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 3;
								overflow: hidden;
								text-overflow: ellipsis;
							}

							.n {
								font-size: 24upx;
								color: #999;
							}
						}

						.price {
							display: flex;
							flex-direction: column;
							align-items: flex-end;

							.priceAmount {
								font-weight: 500;
								font-size: 28rpx;
								color: #333333;
								margin-top: 26rpx;
							}

							.num {
								font-weight: 400;
								font-size: 24rpx;
								color: #999999;
								margin-top: 22rpx;
							}
						}
					}
				}

				.status {
					align-self: flex-end;
					width: 92rpx;
					height: 40rpx;
					line-height: 40rpx;
					text-align: center;
					background: #999999;
					border-radius: 10rpx 10rpx 10rpx 10rpx;
					font-weight: 400;
					font-size: 22rpx;
					color: #ffffff;
					margin-top: 32rpx;
				}

				.totalAmount {
					width: 100%;
					display: flex;
					justify-content: flex-end;
					align-items: flex-end;
					padding: 32rpx 0;
					border-bottom: 2rpx dashed #e5e5e5;

					.label {
						font-weight: bold;
						font-size: 28rpx;
						color: #333333;
					}

					.price {
						font-weight: bold;
						font-size: 36rpx;
						color: #333333;
					}
				}

				.semicircle_icon {
					width: 100%;
					position: absolute;
					top: -22.5rpx;
					left: 0;
					display: flex;
					justify-content: space-between;

					.semicircle_left_icon {
						width: 45rpx;
						height: 45rpx;
						margin-left: -22.5rpx;
						background-color: #f9f9f9;
						border-radius: 50%;
						// box-shadow: inset -20rpx 0rpx 22rpx -20rpx rgba(87, 86, 86, 0.35);
					}

					.semicircle_right_icon {
						width: 45rpx;
						height: 45rpx;
						margin-right: -22.5rpx;
						background-color: #f9f9f9;
						border-radius: 50%;
						// box-shadow: inset 13rpx 0rpx 16rpx -9rpx rgba(87, 86, 86, 0.35);
					}
				}
			}

			.cell-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 32rpx 34rpx 0 34rpx;

				.label {
					font-weight: bold;
					font-size: 32rpx;
					color: #333333;
					padding-bottom: 32rpx;
				}

				.val {
					display: flex;
					align-items: flex-end;
					padding-bottom: 32rpx;
					border-bottom: 2rpx dashed #e5e5e5;

					view:nth-child(1) {
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
						margin-right: 42rpx;
					}

					view:nth-child(2) {
						display: flex;
						align-items: flex-end;
						font-weight: bold;
						font-size: 36rpx;
						color: #333333;
					}
				}

				.val.column {
					display: flex;
					flex-direction: column;

					.productCoupon {
						display: flex;
						align-items: flex-end;
						margin: 0 0 10rpx 0;

						.name {
							font-weight: 400;
							font-size: 26rpx;
							color: #999;
							margin: 0;
						}

						.num {
							font-weight: 400;
							font-size: 26rpx;
							color: #999;
							margin: 0 30rpx;
							line-height: 20rpx;
						}

						.amount {
							font-weight: bold;
							font-size: 26rpx;
							color: #333;
						}
					}
				}
			}

			.favorable {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 30rpx;
				box-sizing: border-box;
				padding-bottom: 26rpx;
				padding-top: 26rpx;
				border-bottom: 2rpx solid #e5e5e5;

				.favorable_left {
					display: flex;
					align-items: center;

					.icon {
						width: 40rpx;
						height: 40rpx;
						margin-right: 16rpx;
					}

					.name {
						font-size: 28rpx;
						font-weight: 400rpx;
						color: #333;
					}
				}

				.favorable_right {
					display: flex;
					align-items: center;

					.favorable_right_text {
						font-size: 24rpx;
						color: #999;
						font-weight: 400rpx;
					}
				}

				.favorable_right {
					.column {
						display: flex;
						flex-direction: column;
						align-items: flex-end;

						.favorable_right_text {
							margin-bottom: 10rpx;

							text:nth-child(1) {
								font-size: 26rpx;
								color: #999;
							}

							text:nth-child(2) {
								font-size: 26rpx;
								color: #999;
								margin: 0 30rpx;
							}

							text:nth-child(3) {
								font-size: 26rpx;
								color: #333;
							}
						}
					}
				}

				.favorable_right.column {
					align-items: flex-start;
				}
			}

			.favorable.column {
				align-items: flex-start;
			}

			.cell-item.column {
				align-items: flex-start;
			}

			.total-wrap {
				width: 100%;
				display: flex;
				justify-content: flex-end;
				align-items: flex-end;
				padding: 0 34rpx;
				font-weight: bold;
				font-size: 28rpx;
				color: #333333;
				margin-top: 64rpx;

				.price {
					font-weight: bold;
					font-size: 36rpx;
				}
			}

			.order_footer {
				display: flex;
				flex-direction: column;
				padding: 34rpx;
				position: relative;
			}
		}
	}
</style>