<template>
	<view class="bg">
		
		<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0" 
			:safe-area="true" @change="popChange">
			<view class="cart-container" v-if="showCart">
				<view class="header-container">
					<view class="select-area flex flex-items-center" @click.stop="selectAllGoods">
						<view class="select-cycle" v-show="!selectAll"></view>
						<view class="select-cycle selected" v-show="selectAll">
							<image :src="showImg('/uploads/20250513/515c0699b759568421d6419fbb9befb7.png')">
						</view>
						<view style="padding-left: 26rpx;" >全选</view>
					</view>
					<view class="delete-area flex flex-items-center" @click.stop="clearAllGoods">
						<image :src="showImg('/uploads/20250513/a98a9f06410e6a8d3c9d398cd4b7e9f0.png')"></image>
						<view style="padding-left: 8rpx;" >清空</view>
					</view>
				</view>
				
				<view class="content-container">
					<view class="content-item" v-for="(item,i) in cartData" :key="i" :model="cartData">
						<view class="flex flex-items-center" @tap.stop="setItemSelect(item)">
							<view class="select-cycle" v-show="!item.isSelected"></view>
							<view class="select-cycle selected" v-show="item.isSelected">
								<image :src="showImg('/uploads/20250513/515c0699b759568421d6419fbb9befb7.png')">
							</view>
							<view style="padding-left: 26rpx;flex:1">
								<view class="commodity box" >
									<image class="img" :src="showImg(item.specifications_image)" mode="aspectFill"></image>
									<view class="title goods-text-area">
										<view class="commodity-info">
											<view class="text-overflowRows" style="font-weight: bold;">{{ item.good_name }}</view>
											<view class="text-overflowRows" style="font-size: 27rpx;color: #999999;padding-top: 10rpx;">{{ item.Specifications_name }}</view>
										</view>
										<view class="flex flex-between">
											<view class="commodity-price">
												￥ <view style="font-size: 40rpx;">{{item.Specifications_money/100}}</view>
											</view>
											<view class="add-num-area">
												<view :class="['ctrl',item.num>1?'':'disabled']" @click.stop="addBuyNum(item,-1,i)" >-</view>
												<view>{{item.num}}</view>
												<view :class="['ctrl']" @click.stop="addBuyNum(item,1,i)">+</view>
												
											</view>
										</view>
									</view>
								</view>
							</view>
							
						</view>
					</view>
					<view style="width: 1rpx;height: 50rpx;"></view>
				</view>
			</view>
		</uni-popup>
		
				
		

		<slot name="content"></slot>
	</view>
	
</template>

<script>
	export default {
		name: "cartData",
		data() {
			return {
				cartData: [],
				showCart: false,
				selectAll: false,
				canOpenpop: true,
				allPrice: {allPrice:0, iNum:0, fNum:'00'},
			}
		},
		props:{
			paramData: {
				type: Object,
			},
		},
		
		mounted() {
			this.canOpenpop = true
			this.refreshData()
			uni.$on("updateDataByConnect",this.getDataByConnect)
		},
		beforeUnmount () {
			console.log('触发off')
			uni.$off("updateDataByConnect",this.getDataByConnect)
		},
		beforeDestroy () {
			console.log('触发off')
			uni.$off("updateDataByConnect",this.getDataByConnect)
		},
		
		methods: {
			calNum () {
				let res = 0
				this.cartData.forEach(v=>{
					res += v.num
				})
				return res
			},
			closePopup() {
				this.$refs.popup.close()
				this.paramData.showCart = this.showCart
				this.$emit('changeParamData', this.paramData)
			},
			openPop(){
				this.$refs.popup.open()
				this.paramData.showCart = this.showCart
				this.$emit('changeParamData', this.paramData)
			},
			popChange (e) {
				this.showCart = e.show
				this.paramData.showCart = this.showCart
				this.$emit('changeParamData', this.paramData)
			},
			
			getDataByConnect(data) {
				if (data.msgType == "updateCartDataInfo") {
					this.refreshData(data)
				}
			},
			
			
			refreshData (data) {
				let selectedData = []
				try {
					selectedData = JSON.parse(uni.getStorageSync('cartDataInfo'));
				} catch(e) {
					selectedData = []
				}
				
				if (Array.isArray(data) && data.length>0) {
					this.cartData = data
					this.setAllSelect()
				} else {
					this.Post({noForceLogin: true},'/api/shopping/getShoppingList').then(res => {
						if (res && res.data) {
							let tempData = new Array();
							(res.data.merchant||[]).forEach(v=>{
								tempData = tempData.concat(v.data || [])
							})
							
							this.cartData = tempData.map(v=>{return {...v, isSelected:selectedData.includes(v.specifications_id)}})
							this.setAllSelect()
						}
					})
				}
			},

			// 购物车操作
			setItemSelect(item) {
				item.isSelected = !item.isSelected
				// uni.setStorageSync('cartDataInfo', JSON.stringify(this.cartData)); 
				this.setAllSelect()
				
			},
			selectAllGoods(){
				let goods = this.cartData
				if (this.selectAll) {
					goods.forEach(v => v.isSelected = false)
					this.selectAll = false
				} else {
					goods.forEach(v => v.isSelected = true)
					this.selectAll = true
				}
				this.setAllSelect()
	
			},
			clearAllGoods(){
				let _this = this
				Promise.all(this.cartData.map(v=>{
					return _this.Post({s_id: v.id},'/api/shopping/delShopping')
				})).finally(res =>{
					this.cartData = []
					this.setAllSelect()
				})
			},
			setAllSelect() {
				let goods = this.cartData
				if(goods.length>0&& goods.every(v => v.isSelected)){
					this.selectAll = true
				} else {
					this.selectAll = false
				}
				let selectedData = goods.filter(v=>v.isSelected).map(v=>v.specifications_id)
				uni.setStorageSync('cartDataInfo', JSON.stringify(selectedData)); 
				this.calAllPrice()
			},
			
			addBuyNum(item, num,index){
				if (num == -1 && item.num == 1) {
					this.Post({s_id: item.id},'/api/shopping/delShopping').then(res =>{
						this.cartData.splice(index,1)
						this.setAllSelect()
					})
				} else {
					let numData = item.num + num
					this.Post({s_id: item.id, num: numData},'/api/shopping/updateShopping').then(res =>{
						item.num += num
						this.setAllSelect()
					})
				}
			},
			
			calAllPrice () {
				let selectedGoods = this.cartData.filter(v=>v.isSelected)
				let totalPrice = 0
				selectedGoods.forEach(v=>{
					totalPrice += v.Specifications_money/100 * v.num
				})
				totalPrice = totalPrice.toFixed(2)
				console.log(totalPrice)
				this.allPrice = {allPrice: totalPrice, iNum: totalPrice.split('.')[0], fNum: totalPrice.split('.')[1]}
				
				this.paramData.allPrice = totalPrice
				this.paramData.iNum = this.allPrice.iNum
				this.paramData.fNum = this.allPrice.fNum
				this.paramData.num = this.calNum()
				
				this.$emit('changeParamData', this.paramData)
			},
			
			goCartOrder () {
				if(this.cartData.every(v => !v.isSelected)){
					uni.showToast({
						title:'请先选中要购买的商品',
						icon:'none',
					})
					return
				}
				// let merchant_ids = this.cartData.filter(v=>v.isSelected).map(v=>v.merchant_id)
				// if (merchant_ids.some(v=>v!=merchant_ids[0])) {
				// 	uni.showToast({
				// 		title:'购物车只可下单同一供应商的产品',
				// 		icon:'none',
				// 	})
				// 	return
				// }
				
				let orderData = this.cartData.filter(v=>v.isSelected).map(v=>{
					return {
						goodsInfo: {
							image: v.specifications_image,
							title:v.good_name,
							merchant_name: v.merchant_name,
						},
						skuInfo: {
							title:v.Specifications_name,
							buyNum:v.num,
							money: v.Specifications_money,
							id: v.specifications_id,
						},
						
					}
				})
				

				let orderInfo = {
					is_post: 1, // 购物车都是邮寄
					goods: orderData,
					post: 0
				}
				
				uni.setStorageSync('teChanOrder', JSON.stringify(orderInfo)); //规格
				// uni.setStorageSync('teChanInfo', JSON.stringify(this.info)); //商品
				uni.navigateTo({
					url: '/subPackages/techan/order'
				});
			},
		},
		
	}
</script>

<style scoped lang="scss">
	*{
		box-sizing: border-box;
	}
	.bg{
		width: 100%;
		height: 100%;
	}
	.cart-container{
		display: flex;
		flex-direction: column;
		background-color: white;
		height: 933rpx;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		display: flex;
		flex-direction: column;
		position: absolute;
		width: 100%;
		bottom: 0;
		z-index: 20;
		
		.header-container{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 40rpx 26rpx;
			
			.select-area{
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 37rpx;
				color: #000000;
			}
			
			
			
			.delete-area{
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 27rpx;
				color: #999999;
				image{
					width: 26rpx;
					height: 26rpx;
				}
			}
		}
	}
	
	.content-container{
		flex: 1;
		height: 10rpx;
		overflow-y: auto;
		padding:0 26rpx 26rpx; 
		
		.content-item{
			margin-bottom: 48rpx;
		}
		
		.commodity {
			display: flex;
			.add-num-area{
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 160rpx;
				
				image{
					width: 49rpx;
					height: 49rpx;
				}
				
			}
			.goods-text-area{
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}
			.commodity-price{
				font-weight: 500;
				font-size: 24rpx;
				color: #F84A56;
				display: flex;
				align-items: baseline;
			}
			.commodity-info{
				font-family: PingFangSC;
				font-weight: 500;
				font-size: 32rpx;
				color: #2C2C2C;
			}
			// align-items: center;
			.img {
				width: 217rpx;
				height: 179rpx;
				border-radius: 13rpx;
				flex-shrink: 0;
			}
			.title {
				flex: 1;
				margin-left: 20rpx;
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #000000;
		
				.price-list {
					display: flex;
					margin-top: 18rpx;
					align-items: center;
					.price-r {
						font-size: 32rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #fc5109;
						&:before {
							content: '¥';
							display: inline-block;
							color: #fc5109;
							font-size: 24rpx;
						}
					}
					.price-g {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #b5bcc9;
						text-decoration: line-through;
						margin-left: 10rpx;
					}
				}
			}
			.num-box {
				display: flex;
				align-items: center;
				margin-left: 20rpx;
				width: 160rpx;
				justify-content: space-between;
				.num {
					text-align: center;
					width: 50rpx;
				}
				.ctrl {
					width: 46rpx;
					height: 46rpx;
				}
			}
		}
		
		
	}
	
	
	
	.select-cycle{
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		border: 1px solid #999999;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.select-cycle.selected {
		border: none;
		image{
			width: 40rpx;
			height: 40rpx;
		}
	}
	
.ctrl {
			width: 47rpx;
			height: 47rpx;
			background: #74A5AA;
			border-radius: 50%;
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 34rpx;
			color: #FFFFFF;
			line-height: 47rpx;
			text-align: center;
		}
		.ctrl.disabled{
			background: #E8E8E8;
			color: #999999;
		}
	
</style>