<template>
	<view class="bg" >
		<view class="goods-container" v-if="hotelOrderList.length>0">
			<view class="goods-type-tag">酒店</view>
			
			<view class="cal-price">
				小计: <text class="price">{{priceParam.hotelPrice/100}}</text>
			</view>
		</view>
	
		<view class="goods-container" v-if="postOrderList.length>0">
			<view class="goods-type-tag">自提</view>
			<view class="post-item" v-for="(item,i) in pickupOrderList" :key="i">
				<view class="sku-item">
					<image class="sku-img" :src="item.sInfo.headimg"></image>
					<view class="sku-content">
						<view class="sku-title flex-between" style="align-items: flex-start;">
							<view class="title flex-1 w-1rpx text-overflowRows">{{item.pInfo.title}}</view>
							<view class="flex-shrink-0 price">￥{{item.sInfo.price/100}}</view>
						</view>
						<view class="flex-between subtitle" >
							<view class=" flex-1 w-1rpx text-overflow">{{item.sInfo.sku_name}}</view>
							<view class="flex-shrink-0">x{{item.sInfo.buyNum}}</view>
						</view>
						<view class="flex text-overflow" v-if="item.sInfo.display_tags">
							<view class="tag" v-for="(tag,tagIndex) in item.sInfo.display_tags.split(',')" :key="tagIndex">{{tag}}</view>
						</view>
					</view>
				</view>
				<view class="other-info">
					<view class="flex-between">
						<view>自提点:</view>
						<view>{{item.pickupAddress.title}}</view>
					</view>
				</view>
			</view>
			<view class="cal-price">
				小计: <text class="price">{{priceParam.pickupPrice/100}}</text>
			</view>
		</view>
		
		<view class="goods-container" v-if="pickupOrderList.length>0">
			<view class="goods-type-tag">邮寄</view>
			<view class="post-item" v-for="(item,i) in postOrderList" :key="i">
				<view class="sku-item">
					<image class="sku-img" :src="item.sInfo.headimg"></image>
					<view class="sku-content">
						<view class="sku-title flex-between" style="align-items: flex-start;">
							<view class="title flex-1 w-1rpx text-overflowRows">{{item.pInfo.title}}</view>
							<view class="flex-shrink-0 price">￥{{item.sInfo.price/100}}</view>
						</view>
						<view class="flex-between subtitle" >
							<view class=" flex-1 w-1rpx text-overflow">{{item.sInfo.sku_name}}</view>
							<view class="flex-shrink-0">x{{item.sInfo.buyNum}}</view>
						</view>
						<view class="flex text-overflow" v-if="item.sInfo.display_tags">
							<view class="tag" v-for="(tag,tagIndex) in item.sInfo.display_tags.split(',')" :key="tagIndex">{{tag}}</view>
						</view>
					</view>
				</view>
				<view class="other-info">
					<view class="flex-between">
						<view>运费:</view>
						<view>￥{{item.post}}</view>
					</view>
					<view class="flex-between" style="align-items: flex-start;">
						<view class="flex-shrink-0">收货人信息:</view>
						<view style="padding-left: 20rpx;">{{item.contacts.name}} {{item.contacts.tel}}</view>
					</view>
					<view class="flex-between" style="align-items: flex-start;">
						<view class="flex-shrink-0">收货人地址:</view>
						<view style="padding-left: 20rpx;">{{item.contacts.address}}</view>
					</view>
				</view>
			</view>
			<view class="cal-price">
				小计: <text class="price">{{priceParam.postPrice/100}}</text>
			</view>
			
		</view>
		
		<view class="goods-container" v-if="playOrderList.length>0">
			<view class="goods-type-tag">游玩</view>
			<view class="ticket-item" v-for="(item,i) in playOrderList" :key="i">
				<view class="sku-item">
					<image class="sku-img" :src="item.sInfo.headimg"></image>
					<view class="sku-content">
						<view class="sku-title flex-between" style="align-items: flex-start;">
							<view class="title flex-1 w-1rpx text-overflowRows">{{item.pInfo.title}}</view>
							<view class="flex-shrink-0 price">￥{{item.sInfo.price/100}}</view>
						</view>
						<view class="flex-between subtitle" >
							<view class=" flex-1 w-1rpx text-overflow">{{item.sInfo.sku_name}}</view>
							<view class="flex-shrink-0">x{{item.sInfo.buyNum}}</view>
						</view>
					</view>
				</view>
				<view class="other-info">
					<view class="flex" v-if="item.showDate">
						<view class="flex-shrink-0">使用日期:</view>
						<view style="padding-left: 20rpx;">
							{{item.showDate.date}}
							<text style="padding-left: 10rpx;" v-if="item.showDate.startTime && item.showDate.endTime">
								{{item.showDate.startTime}} 至 {{item.showDate.endTime}}
							</text>
						</view>
					</view>
					<view class="flex" v-if="item.phone">
						<view class="flex-shrink-0">出行人信息:</view>
						<view style="padding-left: 20rpx;">{{item.phone}}</view>
					</view>
				</view>
			</view>
			<view class="cal-price">
				小计: <text class="price">{{priceParam.playPrice/100}}</text>
			</view>
			
		</view>
		
		<!-- 优惠券 -->
		<view @click="goOrderCoupon" class="tickets-container flex-between">
			<view class="order-title">优惠券</view>
			<view class="coupon-btn" v-if="coupon==''">
				<view class="select">选择优惠券</view>
				<uni-icons style="height: 42rpx;" color="#999999" type="right" size="18"></uni-icons>
			</view>
			<div class="coupon-price" v-else>
				<span v-if="coupon.activity.fold == 0">-￥{{coupon.activity.money/100}}</span>
				<span v-else>-{{coupon.activity.fold*10}}%</span>
				<span style="margin:0 31rpx 0 8rpx;color: #6C7A94;">></span>
			</div>
		 </view>

		
		<view style="width: 1rpx;height: 200rpx;"></view>

		
		<view class="btn-list">
			<view class="price-box">
				<view class="text">合计:</view>
				<view class="price">{{ calAllPrice() }}</view>
				<!-- <view class="post-text" v-if="info.is_user_post==1&&post">含邮费:¥{{ post / 100 }}</view> -->
			</view>
			<view class="btn" @click="order()">提交订单</view>
		</view>

	</view>
</template>

<script>

export default {

	data() {
		return {
			hotelOrderList: [], // 酒店
			postOrderList: [], // 邮寄
			pickupOrderList: [], // 自提
			playOrderList: [], // 游玩
			
			coupon: "",
			allprice: 0, // 总价不包含优惠券
			skuIds: [],
			priceParam: {
				hotelPrice: 0,
				postPrice: 0,
				pickupPrice: 0,
				playPrice: 0,
			},
		};
	},
	onLoad(options) {
		this.$store.commit("choseCoupon", "");
		this.handleOrderGoods()
	},
	onShow() {
		this.coupon = this.$store.state.user.coupon
		// 不要删输出
		console.log(this.coupon, this.$store.state.user.coupon)
	},

	onReady () {

	},
	methods: {
		handleOrderGoods () {
			// 特产处理
			// let techanOrderList = this.$store.state.user.techanOrderList;
			let techanOrderList = JSON.parse(uni.getStorageSync("techanOrderList"))
			// console.log(techanOrderList)
			// 邮寄
			this.postOrderList = techanOrderList.filter(v=>v.is_user_post == 1)
			// 自提
			this.pickupOrderList = techanOrderList.filter(v=>v.is_user_post == 2)
			// 游玩处理  采摘  农家烟火
			// let ticketOrderList = this.$store.state.user.ticketOrderList;
			// let foodOrderList = this.$store.state.user.foodOrderList;
			let ticketOrderList = (uni.getStorageSync("ticketOrderList")) || []
			let foodOrderList = (uni.getStorageSync("foodOrderList")) || []
			console.log(ticketOrderList, foodOrderList)
			this.playOrderList = ticketOrderList.concat(foodOrderList)
			// 酒店
			// let hotelOrderList = this.$store.state.user.hotelOrderList;
			
			this.calPrice()
		},
		
		calPrice () {
			let price1 = 0, price2 = 0, price3 =0 , price4 = 0;
			let skuIds = []
			this.postOrderList.forEach(v=>{
				price1+= v.sInfo.price * v.sInfo.buyNum + v.post
				skuIds.push(v.sInfo.id)
			})
			this.pickupOrderList.forEach(v=>{
				price2+= v.sInfo.price * v.sInfo.buyNum 
				skuIds.push(v.sInfo.id)
			})
			this.playOrderList.forEach(v=>{
				price3+= v.sInfo.price * v.sInfo.buyNum 
				skuIds.push(v.sInfo.id)
			})
			this.hotelOrderList.forEach(v=>{
				// price4+= v.sInfo.price * v.sInfo.buyNum 
			})
			
			this.skuIds = skuIds
			this.priceParam = {
				hotelPrice: price4,
				postPrice: price1,
				pickupPrice: price2,
				playPrice: price3,
			}
			this.allprice = price1+price2+price3+price4
			// this.calAllPrice()
			this.getMaxCouponData()
		},
		calAllPrice () {
			let price = 0
			let allPrice =  this.allprice
			if (this.coupon) {
				if (this.coupon.activity.fold == 0) {
					if (this.coupon.activity.money>allPrice) {
						price =0
					}else{
						price = allPrice  - (this.coupon.activity.money)
					}
					
				} else{
					price = allPrice - allPrice * (this.coupon.activity.fold*10/100)
				}
			} else {
				price = allPrice
			}
			return price < 0 ? 0 : (price/100).toFixed(2)
		},

		
		goOrderCoupon () {
			
			uni.navigateTo({
				url: `/subPackages/order/orderCoupon?allprice=${this.allPrice}&sku_ids=${this.skuIds.join(',')}`
			})
		},
		
		// 下单
		order() {
			let goods = []
			// 邮寄
			this.postOrderList.forEach(item=>{
				let param = {
					type: item.pInfo.type,
					product_id: item.pInfo.id,
					sku_id: item.sInfo.id,
					product_num: item.sInfo.buyNum,
					remark: item.remark,
					use_type:1,
					post: item.contacts.id
				}
				goods.push(param)
			})
			// 自提
			this.pickupOrderList.forEach(item=>{
				let param = {
					type: item.pInfo.type,
					product_id: item.pInfo.id,
					sku_id: item.sInfo.id,
					product_num: item.sInfo.buyNum,
					remark: item.remark,
					use_type:2,
					pickup_shop_id : item.pickupAddress.id,
					pickup_shop_info : item.pickupAddress,
				}
				goods.push(param)
			})
			// 游玩
			this.playOrderList.forEach(item=>{
				let param = {
					type: item.pInfo.type,
					product_id: item.pInfo.id,
					sku_id: item.sInfo.id,
					product_num: item.sInfo.buyNum,
					phone: item.phone,
					remark: item.remark,
				}
				if (item.showDate) {
					param.use_date= item.showDate.date ||'';
					param.start_time = item.showDate.start_time || '';
					param.end_time = item.showDate.end_time || '';
				}
				goods.push(param)
			})
		
			let data = {
				product_list: goods,
				coupon_id: this.coupon ? this.coupon.id : null,
			}
			
			this.Post({
				method: 'POST',
				data: JSON.stringify(data)
			}, '/api/order/create').then(res => {
				if (res.code == 1) {
					console.log(res.data.order_id);
					let order_id = res.data.order_id
					this.$store.commit("choseCoupon", "");
					this.$store.commit("changeTechanOrderList", []);
					this.$store.commit("changeTicketOrderList", []);
					this.$store.commit("changeFoodOrderList", []);
					this.$store.commit("changeHotelOrderList", []);
				}
			})
			
		},
		
		
		// 获取最大优惠券
		async getMaxCouponData () {
			let allPrice =0
			let param = {money:this.allprice,sku_ids:this.skuIds.join(',')}
			let res = await this.getMaxCoupon(param)
			if (res.id) {
				this.coupon = res
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.bg {
	min-height: 100vh;
	overflow-x: hidden;
	background: #f2f4f7;
	padding: 26rpx;
}
view {
	box-sizing: border-box;
}
.flex-shrink-0{
	flex-shrink: 0;
}
.goods-container{
	width: 697rpx;
	background: #FFFFFF;
	border-radius: 20rpx;
	padding: 73rpx 27rpx 27rpx;
	position: relative;
	margin-bottom: 20rpx;
	.goods-type-tag{
		width: 107rpx;
		height: 53rpx;
		background: #F2F8E6;
		border-radius: 20rpx 0rpx 20rpx 0rpx;
		position: absolute;
		top: 0;
		left: 0;
		font-weight: 500;
		font-size: 31rpx;
		color: #6A8A27;
		text-align: center;
		line-height: 53rpx;
	}
}

.sku-item{
	display: flex;
	.sku-img{
		width: 173rpx;
		height: 173rpx;
		border-radius: 7rpx;
	}
	.sku-content{
		flex: 1;
		width: 1rpx;
		display: flex;
		flex-direction: column;
		padding-left: 10rpx;
		.sku-title{
			.price{
				font-weight: bold;
				font-size: 28rpx;
				color: #000000;
			}
		}
		.title{
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
			padding-right: 20rpx;
			
		}
		.subtitle{
			font-weight: 500;
			font-size: 24rpx;
			color: #666666;
			padding-top: 18rpx;
		}
		.tags{
			height: 31rpx;
			border-radius: 7rpx;
			border: 1px solid #6A8A2D;
			font-weight: 500;
			font-size: 20rpx;
			color: #6A8A2D;
			padding: 0 11rpx;
			line-height: 31rpx;
		}
	}
}

.post-item{
	margin-bottom: 26rpx;
	border-bottom: 1px solid #D8D8D8;
	.other-info{
		font-weight: bold;
		font-size: 28rpx;
		color: #333333;
		&>view{
			padding: 20rpx 0 0;
			&:last-child{
				padding-bottom: 20rpx;
			}
		}
		
	}
}

.ticket-item{
	margin-bottom: 26rpx;
	border-bottom: 1px solid #D8D8D8;
	.other-info{
		font-weight: 500;
		font-size: 28rpx;
		color: #333333;
		&>view{
			padding: 20rpx 0 0;
			&:last-child{
				padding-bottom: 20rpx;
			}
		}
		
	}
}

.cal-price{
	font-weight: 500;
	font-size: 28rpx;
	color: #111111;
	text-align: right;
	.price{
		font-size: 28rpx;
		color: #D62828;
		font-weight: bold;
		padding-left: 20rpx;
		&::before{
			content: "￥";
			font-size: 24rpx;
		}
	}
}

.btn-list {
	width: 100%;
	height: 166rpx;
	background: #ffffff;
	box-shadow: 0rpx -3rpx 9rpx 1rpx rgba(227, 229, 232, 0.5);
	display: flex;
	position: fixed;
	bottom: 0;
	padding: 20rpx 20rpx;
	align-items: center;
	justify-content: space-between;
	left: 0;
	.btn {
			width: 294rpx;
			height: 88rpx;
			background: #6A8A2D;
			border-radius: 11rpx;
			text-align: center;
			line-height: 88rpx;

			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
	
	}
	.price-box {
		display: flex;
		align-items: center;
		.text {
			font-size: 29rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 500;
			color: #333;
		}
		.price {
			margin-left: 15rpx;
			font-size: 36rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: bold;
			color: #DC2525;
			&:before {
				content: '¥';
				display: inline-block;
				font-size: 36rpx;
			}
		}
		.post-text {
			margin-left: 15rpx;
			color: #fc5109;
			font-size: 24rpx;
		}
	}
}


	.tickets-box {
		width: 698rpx;
		margin: 26rpx auto 0;
		border-radius: 13rpx;
		background: #fff;
		height: 120rpx;
		.order-title {
			margin: 31rpx 0 31rpx 30rpx;
			font-size: 31rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #000000;
		}

		.coupon-price {
			color:#DD0000;
			font-size: 30rpx;
			font-weight: bold;
		}
	}

	.top-line{
		border-top:rgba(216, 216, 216, 1) solid 2rpx ;
	}
	.post{
		height: 120rpx;
		padding: 0 30rpx;

		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #000000;

	}
	.tickets-container {
		width: 698rpx;
		background: #fff;
		height: 120rpx;
		margin: 22rpx auto 0;
		border-radius: 13rpx;
		.order-title {
			margin: 31rpx 0 31rpx 30rpx;
			font-size: 31rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #000000;
		}

		.coupon-price {
			color:#DD0000;
			font-size: 30rpx;
			font-weight: bold;
		}
		.coupon-btn {
			color: #999999;;
			display: flex;
			align-items: center;
			.select {
				display: block;
				width: 153rpx;
				height: 40rpx;
				background: #6A8A2D;
				border-radius: 9rpx;
				font-weight: 500;
				font-size: 24rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 40rpx;
				font-family: PingFang SC;
				margin-right: 20rpx;
		
			}
		}
		
	}
	
</style>