<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="https://static.ticket.sz-trip.com/uploads/20250617/c87afc2e461a01af35c71fb46ef0859d.png">
						</view>
						<view style="padding-left: 26rpx;" >全选</view>
					</view>
					<view class="delete-area flex flex-items-center" @click.stop="clearAllGoods">
						<!-- <image src="https://cgc.js-dyyj.com/uploads/20241104/50900c9a5fa5fbdbdee526abc9af4a40.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" style="position: relative;">
						<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="https://static.ticket.sz-trip.com/uploads/20250617/c87afc2e461a01af35c71fb46ef0859d.png">
							</view>
							<view style="padding-left: 26rpx;flex:1">
								<view class="commodity box" v-if="item.sku">
									<view class="img" style="position: relative;">
										<image class="img" :src="showImg(item.sku.headimg)" mode="aspectFill"></image>
										<view class="hover-use-type">
											{{item.sku.user_select_type==1?"邮寄":item.sku.user_select_type==2?"自提":
											item.sku.user_select_type==3?"配送":"核销"}}
										</view>
									</view>
									<view class="title goods-text-area">
										<view class="commodity-info">
											<view class="text-overflowRows" style="font-weight: bold;">{{ item.product.title }}</view>
											<view class="text-overflowRows" style="font-size: 27rpx;color: #999999;padding-top: 10rpx;">{{ item.sku.sku_name }}</view>
										</view>
										<view class="flex flex-between">
											<view class="commodity-price">
												￥ <view style="font-size: 40rpx;">{{item.sku.price/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 class="off-cover" v-if="item.sku.flag == 'off'">
								<view>商品已失效</view>
								<!-- <view class="off-btn">删除</view> -->
							</view>
							
							<view class="off-cover" v-else-if="!item.sku.isInTimeRange">
								<view>商品暂不配送（服务时间 {{item.product.supplier_bsamecity_delivery_start_time}}～{{item.product.supplier_bsamecity_delivery_end_time}}）</view>
							</view>
							
						</view>
					</view>
					
					<view class="no-data-zhanwei" v-if="cartData.length<=0">
						<image src="https://static.ticket.sz-trip.com/uploads/20250618/0c2a469b4216f8cd570822b642d0a0fe.png"></image>
						<view style="padding:50rpx 0 67rpx">暂无数据</view>
					</view>
					
					<view style="height: 140rpx;width: 1rpx;"></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/cart/get_post_list').then(res => {
						if (res) {
							this.cartData = (res.data || []).map(v=>{
								if (v.delivery_method) {
									v.sku.user_select_type = v.delivery_method
								} else {
									// 邮寄
									if (v.sku.use_type === 0 || v.sku.use_type === 3) {v.sku.user_select_type=1}
									// 配送(3)
									else if (v.sku.is_delivery) {v.sku.user_select_type=3}
									// 自提(2)
									else if (v.sku.use_type === 1) {v.sku.user_select_type=2}
									else{
										// 此时 use——type 是2 强制变4 核销
										v.sku.user_select_type = 4
									}
								}
								// 如果是自提 判断是否在配送时间内
								if (v.sku.user_select_type==3) {
									if (v.product.supplier_bsamecity_delivery_start_time && v.product.supplier_bsamecity_delivery_end_time) {
										v.sku.isInTimeRange = this.isInTimeRange(v.product.supplier_bsamecity_delivery_start_time, v.product.supplier_bsamecity_delivery_end_time)
									} else {
										v.sku.isInTimeRange = false
									}
								} else {
									v.sku.isInTimeRange = true
								}
								
								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 => {
						if (v.sku.flag=="on"&&v.sku.isInTimeRange) {
							v.isSelected = true
						}
					})
					this.selectAll = true
				}
				this.setAllSelect()
	
			},
			clearAllGoods(){
				let ids = this.cartData.map(v=>v.id)
				if (ids.length>0) {
					this.Post({id:ids.join(',')},'/api/cart/del_sku').then(res=>{
						this.cartData = []
						this.setAllSelect()
					})
				}
			},
			setAllSelect() {
				let goods = this.cartData
				if(goods.length>0){
					if (goods.some(v=>v.sku.flag=="on"&&v.sku.isInTimeRange&&!v.isSelected)) {
						this.selectAll = false
					} else {
						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({id: item.id, num: 0},'/api/cart/del_sku').then(res =>{
						this.cartData.splice(index,1)
						this.setAllSelect()
					})
				} else {
					let numData = item.num + num
					this.Post({id: item.id, num: numData},'/api/cart/update_sku').then(res =>{
						item.num += num
						this.setAllSelect()
					})
				}
			},
			
			calAllPrice () {
				let selectedGoods = this.cartData.filter(v=>v.isSelected)
				let totalPrice = 0
				selectedGoods.forEach(v=>{
					totalPrice += v.sku.price/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 techanOrderList = {
					list1: [], // 邮寄
					list2: [], // 自提
					list3: [], //配送
				}; // 邮寄自提下单
				let groups = {};
				let dataList = this.cartData.filter(v=>v.isSelected);
				dataList.forEach(v=>{
					let data = {
						pInfo: v.product,
						sInfo: {...v.sku, buyNum: v.num},
						user_select_type: v.sku.user_select_type,
						// user_select_type: 3,
					}
					// techanOrderList.list3.push(data)
					if (v.sku.user_select_type == 1) {techanOrderList.list1.push(data)}
					if (v.sku.user_select_type == 2) {techanOrderList.list2.push(data)}
					// 配送要带上店铺
					if (v.sku.user_select_type == 3) {
						let shopInfo = {
							id: data.pInfo.supplier_id,
							shop_name: data.pInfo.supplier_name,
							goods: data // 这里不用数组，下面可以直接push
						}
						if (groups[shopInfo.id]) {
							// 如果已存在，将data添加到数组中
							groups[shopInfo.id].goods.push(shopInfo.goods);
						} else {
							// 如果不存在，创建新的分组对象，并将data初始化为数组
							groups[shopInfo.id] = {
								...shopInfo,
								goods: [shopInfo.goods]
							};
						}
					}
				})
				techanOrderList.list3 = Object.values(groups);
				
				
				// 数据储存 todo
				this.$store.commit("changeTechanOrderList", techanOrderList);
				// 邮寄 > 门票 > 农家乐 > 酒店
				this.goCartNextPage(0)
			},
		},
		
	}
</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 0rpx 0rpx; 
		
		.content-item{
			padding: 24rpx 26rpx;
			// 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;
			border-radius: 50%;
		}
	}
	
.ctrl {
			width: 47rpx;
			height: 47rpx;
			background: #6A8A2D;
			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;
		}
	.off-cover{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.3);
		font-weight: 400;
		font-size: 27rpx;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		.off-btn{
			width: 67rpx;
			height: 67rpx;
			background: #FFFFFF;
			border-radius: 50%;
			font-weight: 400;
			font-size: 27rpx;
			color: #000000;
			text-align: center;
			line-height: 67rpx;
			margin-left: 18rpx;
		}
	}
	
</style>