<template>
	<view>
		<u-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">
						<u-icon name="trash" color="#999"></u-icon>
						<text class="t">清空</text>
					</view>
				</view>
				<scroll-view scroll-y class="scroll-view">
					<view class="list-wrap">
						<view class="shop-item" v-for="(item,index) in cartLists.data" :key="item.id">
							<view class="shop-item-content">
								<view class="cover" v-if="item.productId!=-999">
									<u-image :src="item.coverImg" width="120" radius="10" height="120"></u-image>
								</view>
								<view class="info">
									<view class="name"> {{ item.name }} </view>
									<view class="select-sku-wrap"> {{ item.skuName }} </view>
									
									<view class="price-wrap" style="padding-top: 0;" >
										<view class="price">
											<text class="i">￥</text>
											<text class="num" v-if="shopUserInfo.isVip ==1 && item.memberPrice>0" style="margin-right: 10rpx;">{{ item.memberPrice }}</text>
											<text class="i" v-if="shopUserInfo.isVip ==1 && item.memberPrice>0" :class="{lineThrough: shopUserInfo.isVip ==1 && item.memberPrice>0}">￥</text>
											<text class="num" :class="{lineThrough: shopUserInfo.isVip ==1 && item.memberPrice>0}">{{ item.salePrice }}</text>
										</view>
									
										
										
										<view class="operation-wrap">
											<view class="btn" v-if="item.number" >
												<u-icon name="minus-circle-fill"  size="50"></u-icon>
												<view class="btnClick" @click="cartListadd(item,index,'-')"></view>
											</view>
											<text class="num" v-if="item.number">{{ item.number }}</text>
											<view class="btn">
												<u-icon name="plus-circle-fill" :color="item.isVip == 1 ? '#CECECE' : '#E9AB7A'" size="50"></u-icon>
												<view class="btnClick"  @click="cartListadd(item,index,'+')"></view>
											</view>
										</view>
									</view>
								</view>
							</view>
							<!-- <view class="shop-item-remark" v-if="item.productId!=-999">
								<view class="label">备注</view>
								<u--input
								    placeholder="商品备注(选填)"
								    border="none"
								    v-model="item.note"
									@blur="productBlur(item)"
								  ></u--input>
							</view> -->
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
	</view>

</template>

<script>
	export default {
		props:{
			cartLists:{
				type: Object
			},
			cartLists_count: {
				type: Number,
				default: 0
			},
			showCart:{
				type: Boolean
			},
			shopId:{
				type: String,
				default: ''
			},
			tableCode:{
				type: String,
				default: ''
			}
		},
		data() {
			return {
				shopUserInfo: uni.cache.get('shopUserInfo')
				
			}
		},
		
		watch:{
			tableCode:{
				immediate: true,
				handler (newVal) {
				}
			},
			shopId:{
				immediate: true,
				handler (newVal) {
				}
			},
			
		},
		mounted() {
		},
		methods: {
			
			close () {
				this.$emit("close",false)
			},
			

			
			/**
			 * 购物车加减
			 * @param {Object} item
			 * @param {Object} index
			 * @param {Object} a
			 */
			async cartListadd(item, index, c) {
				try {
					if ( c == "+" && item.isVip == 1){
						return;
					}
					let params = {
						"skuId": item.skuId,
						"num": c == '+' ? item.number + 1 : item.number - 1, //数量
						"type": c == '+' ? 1 : 0,
						"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)
				} catch (e) {
					//TODO handle the exception
				}
			},
			
			/**
			 * 菜品备注修改
			 */
			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)
			},
			
			/**
			 * 清空购物车
			 */
			async cartclear() {
				let res = await this.api.cleanCart({
					"shopId": this.shopId,
					"tableId": this.tableCode,
				})
			},
			
			
		}
	}
</script>

<style lang="scss">
	.cart-list-wrap {
		.cart-header {
			display: flex;
			height: 72rpx;
			background-color: #F2F2F2;
			align-items: center;
			justify-content: space-between;
			padding: 20upx $paddingSize;
			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: 50vh;
			margin-bottom: 190rpx;
		}
	
		.list-wrap {
			padding: $paddingSize 0 0 $paddingSize;
		}
	
		.shop-item {
			display: flex;
			flex-direction: column;
			padding-bottom: $paddingSize;
			.shop-item-content{
				display: flex;
			}
			.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: 20upx;
				padding-right: $paddingSize;
	
				.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: 16rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
	
					.price {
						display: flex;
						align-items: flex-end;
	
						.i,
						.num {
							font-weight: bold;
							font-size: 32rpx;
							color: #333333;
						}
	
						.i {
							position: relative;
							bottom: 4upx;
						}
	
						.num {}
						.lineThrough{
							font-weight: normal;
							text-decoration:line-through;
							color: #999!important;
							font-size: 24rpx!important;
						}
					}
	
					.sku-wrap {
						padding: 6upx 16upx;
						background-color: $color-priamry;
						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: $numColor;
							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;
							}
						}
					}
				}
			}
		}
	
	}
</style>
