<template>
	<view class="bg bg-padding">
		<view class="del-all" @click="delAll()">全部删除</view>
		<uni-swipe-action>
			<view class="cart-container" v-for="(item,i) in cartList" :key="i">
				<view class="flex" style="align-items: center;padding: 20rpx;">
					<view class="no-select" v-show="!item.is_seld" @click="changeShopSelect(item,true)"></view>
					<image class="select-img" v-show="item.is_seld" @click="changeShopSelect(item,false)" src="https://static.ticket.sz-trip.com/uploads/20250617/c87afc2e461a01af35c71fb46ef0859d.png"></image>
					<view class="shop-name">{{item.shop_name}} <uni-icons type="right" size="12"></uni-icons></view>
					<view style="font-size: 27rpx;color: #7C7C7C;" @click="delCartByShop(item,index)">删除</view>
				</view>
				<uni-swipe-action-item  v-for="(goods,goodsIndex) in item.goods" :key="goodsIndex">
					<view class="cart-item" :style="{'padding-bottom':goods.product.type=='hotel'?'60rpx':'20rpx'}">
						<view class="flex-between">
							<view class="no-select" v-show="!goods.is_seld" @click="changeGoodsSelect(goods,true)"></view>
							<image class="select-img" v-show="goods.is_seld" @click="changeGoodsSelect(goods,false)" src="https://static.ticket.sz-trip.com/uploads/20250617/c87afc2e461a01af35c71fb46ef0859d.png"></image>
							<image class="cart-img" :src="goods.sku.headimg"></image>
						</view>
						
						<view class="cart-content">
							<view>
								<view class="title text-overflow">{{goods.product.title}}</view>
								<view class="sku-name text-overflow">{{goods.sku.sku_name}}</view>
							</view>
							<view class="flex-between">
								<view class="price">{{goods.sku.price/100}}</view>
								<view class="flex-between">
									<view :class="['ctrl',goods.num<=1?'disabled':'']" @click="addBuyNum(goods,-1)">-</view>
									<view style="padding: 0 20rpx;">{{goods.num}}</view>
									<view class="ctrl" @click="addBuyNum(goods,1)">+</view>
								</view>
							</view>
							
						</view>
						
						<view class="time-select" v-if="goods.product.type=='hotel'">
							<view v-if="goods.start_time&&goods.end_time"></view>
							<view v-else>请选择时间</view>
							>>
						</view>
						
						<view class="off-cover" v-if="goods.sku.flag == 'off'" @click="delItem(goods)">
							<view>商品已失效</view>
							<view class="off-btn">删除</view>
						</view>
					</view>
					<template v-if="goods.sku.flag != 'off'" v-slot:right>
						<view class="cart-item-del" @click="delItem(goods)">
							<uni-icons type="trash" size="16" color="#fff"></uni-icons>
							<view>删除</view>
						</view>
					</template>
				</uni-swipe-action-item>
			
			</view>
		</uni-swipe-action>
		<view style="width: 1rpx;height: 250rpx;"></view>
		
		<view class="bottom-btn">
			<view class="flex" style="align-items: center;">
				<view @click="selectAllData(true)" class="no-select" v-show="!selectAll" style="margin-right: 12rpx;"></view>
				<image @click="selectAllData(false)" class="select-img" v-show="selectAll" style="margin-right: 12rpx;" src="https://static.ticket.sz-trip.com/uploads/20250617/c87afc2e461a01af35c71fb46ef0859d.png"></image>
				<text>全选</text>
				
				<text style="padding-left: 20rpx;">合计</text>
				<text class="price">{{total()}}</text>
			</view>
			<view class="btn" @click="goOrder()">去下单</view>
		</view>
		 
		<CustomTabBar :currentTab="3" />
	</view>
</template>

<script>
	import CustomTabBar from '@/components/CustomTabBar.vue';
	export default {
		components: {
			CustomTabBar
		},
		data() {
			return {
				cartList: [],
				allPrice: 0,
				selectAll: false,
			}
		},
		onLoad() {

		},
		onShow() {
			this.getList()
		},
		methods: {
			getList () {
				this.Post({},"/api/cart/get_list").then(res=>{
					let resData = (res.data ||[])
					let shopSelectIds = []
					let skuSelectIds = []
					this.cartList.forEach(v=>{
						if (v.is_seld) {shopSelectIds.push(v.id)}
						v.goods.forEach(x=>{
							if(x.is_seld) {skuSelectIds.push(x.sku_id)}
						})
					})
					
					resData.forEach(v=>{
						v.is_seld = shopSelectIds.includes(v.id)
						// v.show = true
						v.goods.forEach(x=>{
							x.is_seld = skuSelectIds.includes(x.sku_id)
							// v.show = true
						})
					})
					this.cartList = resData
					this.judgeSelectAll()
				}).finally(()=>{
					uni.hideLoading()
				})
			},
			// 单个增加/减少
			addBuyNum(item,num,index){
				console.log(item)
				if (num == -1 && item.num == 1) {
					return // 单独走删除
					this.delItem(item)
				} else {
					let numData = item.num + num
					this.Post({sku_id: item.sku_id, num: numData},'/api/cart/update_sku').then(res =>{
						item.num += num
					})
				}
			},
			// 单个删除
			delItem(item){
				this.Post({sku_id: item.sku_id},'/api/cart/del_sku').then(res =>{
					// this.cartData.splice(index,1)
					this.getList()
				})
				
			},
			// 把店铺下的所有商品删除
			delCartByShop (item, index) {
				let goods = item.goods.map(v=>v.sku_id)
				this.Post({sku_id: goods.join(',')},'/api/cart/del_sku').then(res =>{
					this.getList()
				})
			},
			// 删除全部
			delAll () {
				let goods = []
				this.cartList.forEach(v=>{
					v.goods.forEach(x=>{goods.push(x.sku_id)})
				})
				this.Post({sku_id: goods.join(',')},'/api/cart/del_sku').then(res =>{
					this.getList()
				})
			},
			
			// 全选
			selectAllData (flag) {
				this.selectAll = flag
				if (flag) {
					this.cartList.forEach(t=>{
						t.goods.forEach(v=>{
							if (v && v.product &&v.sku) {
								if (v.sku.flag== "off") {
									v.is_seld = false
								} else {
									if (v.product.type == 'hotel'&&(!v.strat_time||!v.end_time)) {
										v.is_seld = false
									} else {
										v.is_seld = true
									}
								}
							}
						})
					})
				} else {
					this.cartList.forEach(v=>{
						v.is_seld = false
					})
				}
				this.judgeSelectAll()
			},
			// 店铺选中
			changeShopSelect(item, flag) {
				if (flag) {
					item.goods.forEach(v=>{
						if (v.sku.flag== "off") {
							v.is_seld = false
						} else {
							if (v.product.type == 'hotel'&&(!v.strat_time||!v.end_time)) {
								v.is_seld = false
							} else {
								v.is_seld = true
							}
						}
					})
					item.is_seld = true
				} else {
					item.goods.forEach(v=>{
						v.is_seld = false
					})
					item.is_seld = false
				}
				this.judgeSelectAll()
			},
			// 单个选中
			changeGoodsSelect(item,flag) {
				if (flag) {
					if (item.sku.flag== "off") {
						item.is_seld = false
					} else {
						if (item.product.type == 'hotel'&&(!item.strat_time||!item.end_time)) {
							item.is_seld = false
							uni.showToast({
								title:'酒店产品需要选择时间',
								icon:'none'
							})
						} else {
							item.is_seld = true
						}
					}
				} else {
					item.is_seld = false
				}
				this.judgeSelectAll()
			},
			// 判断全选
			judgeSelectAll () {
				this.cartList.forEach(v=>{
					if(v.goods.some(x=>x.sku&& x.sku.flag!= "off"&&!x.is_seld)) {
						v.is_seld = false;
					} else {
						v.is_seld = true;
					}
				})
				
				if (this.cartList.every(v=>v.is_seld)) {
					this.selectAll = true
				} else {
					this.selectAll = false
				}
				
			},
			
			
			// 去下单
			goOrder () {
				let buyGoods = this.cartList.filter(v=>v.is_seld)
				if (buyGoods.length<=0) {
					uni.showToast({
						title: '请选择要购买的产品',
						icon: 'none'
					})
				}
				
				let ticketOrderList = [] // 门票类下单
		        let foodOrderList = [] // 农家烟火下单
		        let techanOrderList = [] // 邮寄自提下单
				let hotelOrderList = [] // 酒店下单
				
				buyGoods.forEach(v=>{
					if (v.product.is_package == 1) {
						foodOrderList.push({
							pInfo: v.product,
							sInfo: {...v.sku, buyNum: v.num}
						})
					} else if (v.product.type == "ticket") {
						ticketOrderList.push({
							pInfo: v.product,
							sInfo: {...v.sku, buyNum: v.num}
						})
					} else if (v.product.type == "post") {
						techanOrderList.push({
							pInfo: v.product,
							sInfo: {...v.sku, buyNum: v.num}
						})
					} else if (v.product.type == "hotel") {
						hotelOrderList.push(v)
					}
				})
				
				// 数据储存 todo
				this.$store.commit("changeTechanOrderList", techanOrderList);
				this.$store.commit("changeTicketOrderList", ticketOrderList);
				this.$store.commit("changeFoodOrderList", foodOrderList);
				this.$store.commit("changeHotelOrderList", hotelOrderList);
				// 邮寄 > 门票 > 农家乐 > 酒店
				this.goCartNextPage(0)
				
			},
			
			total () {
				return 0
			},
		},
		onReachBottom() {
		}
	}
</script>

<style scoped lang="scss">
	.bg {
		min-height: 100vh;
		padding: 26rpx 26rpx 0;
	}
	.cart-container{
		width: 100%;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-bottom: 26rpx;
		padding-bottom: 20rpx;
		.shop-name{
			font-weight: 500;
			font-size: 35rpx;
			color: #000000;
			flex: 1;
			width: 1rpx;
			line-height: 57rpx;
			padding-right: 24rpx;
		}
	}
	.no-select{
		width: 37rpx;
		height: 37rpx;
		border-radius: 50%;
		border: 1px solid #666666;
		flex-shrink: 0;
		margin-right: 24rpx;
	}
	.select-img{
		width: 37rpx;
		height: 37rpx;
		border-radius: 50%;
		flex-shrink: 0;
		margin-right: 24rpx;
	}

	.cart-item{
		display: flex;
		align-items: flex-start;
		position: relative;
		padding: 20rpx;
		.cart-img{
			width: 173rpx;
			height: 173rpx;
			border-radius: 13rpx;
			flex-shrink: 0;
		}
		.cart-content{
			flex: 1;
			min-height: 173rpx;
			padding-left: 20rpx;
			width: 1rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}
		.title{
			font-weight: normal;
			font-size: 31rpx;
			color: #000000;
		}
		.sku-name{
			font-weight: 500;
			font-size: 27rpx;
			color: #7C7C7C;
		}
		.price{
			font-size: 37rpx;
			font-weight: 500;
			color: #C3282E;
			&::before{
				content: '￥';
				font-size: 27rpx;
			}
		}
		.ctrl{
			width: 47rpx;
			height: 47rpx;
			background: #6A8A27;
			border-radius: 50%;
			font-weight: 400;
			font-size: 34rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 47rpx;
			&.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;
		}
	}
	
	.cart-item-del{
		width: 80rpx;
		height: 100%;
		background: #FF0505;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-weight: normal;
		font-size: 24rpx;
		color: #FFFFFF;
		margin-left: 10rpx;
	}
	
	.bottom-btn{
		width: 100%;
		height: 125rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		position: fixed;
		justify-content: space-between;
		padding:0 26rpx;
		bottom: 133rpx;
		left: 0;
		z-index: 50;
		border-bottom: 1px solid #F7F7F7;
		font-weight: 400;
		font-size: 28rpx;
		color: #393B3E;
		.price{
			font-size: 44rpx;
			font-weight: 500;
			color: #C3282E;
			padding-left: 33rpx;
			line-height: 0;
			&::before{
				content: "￥";
				font-size: 24rpx;
			}
		}
		.btn{
			width: 300rpx;
			height: 80rpx;
			background: #6A8A27;
			border-radius: 13rpx;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 80rpx;
		}
	}
	.time-select{
		height: 43rpx;
		background: rgba(106,138,39,0.2);
		border-radius: 8rpx;
		font-weight: 400;
		font-size: 27rpx;
		color: #6A8A27;
		text-align: center;
		line-height: 43rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 20rpx;
		position: absolute;
		bottom: 0;
		right: 20rpx;
	}
	.del-all{
		font-weight: normal;
		font-size: 32rpx;
		color: #000000;
		text-align: right;
		padding-bottom: 25rpx;
	}
</style>
