<template>
	<view class="confirmOrder" v-if="showPage">
		<view class="addr">
			<view class="info">
				<text class="store">{{store}}</text>
				<text class="type">到店消费</text>
			</view>
			<view class="addrText">{{addr}}</view>
		</view>
		<view class="orderDetail">
			<view class="row1">
				<view class="row1Sub">
					<image
						src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/coffee/cup4.png"
						mode="" style="width: 150rpx;height: 150rpx;"></image>
					<view class="coffeeInfo">
						<view class="num">
							星巴克咖啡{{item.BuyNum||0}}杯
						</view>
						<view class="give" v-if="item.GiveAwayNum>0">
							买{{item.BuyNum||0}}杯赠送{{item.GiveAwayNum||0}}杯
						</view>
						<view class="tip">
							(赠送咖啡可随意选择)
						</view>
					</view>
				</view>
				<view class="price">
					<text class="icon">¥</text>{{detailData.total_price}}
				</view>
			</view>
			<view class="row2">
				<view class="label">购买数量</view>
				<view class="value">{{item.BuyNum||0}} 杯</view>
			</view>
			<view class="row2" v-if="item.GiveAwayNum>0">
				<view class="label">赠送数量</view>
				<view class="value">{{item.GiveAwayNum||0}} 杯</view>
			</view>
			<view class="row3">
				<text class="name">应付</text>
				<text class="totalPrice"> ¥{{detailData.total_price||0}}</text>
			</view>
		</view>
		<view class="payRow">
			<view class="label">
				支付方式
			</view>
			<view class="value">
				<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/coffee/wechat.png"
					mode="heightFix" style="height: 55rpx;width: auto;margin-right: 20rpx;"></image>
				微信支付
			</view>
		</view>
		<view class="payRow2">
			<view class="name">
				需支付
				<text class="payMomey">¥{{detailData.total_price||0}}</text>
			</view>
			<view class="payBtn" @click="setOrder">
				去支付
			</view>
		</view>
		<payCom v-if="payBtn" :payInfo="payInfo" @closePay="closePay"></payCom>
		<u-popup v-model="payExit" mode="center" :mask-close-able="false">
			<view style="background:#fff;width:500rpx;border-radius: 10rpx;">
				<view style="padding:10px 0 0 10px">提交失败</view>
				<view style="text-align:center;padding-bottom:40rpx">
					<view style="margin:80rpx 0">支付取消</view>
					<span @click="exitPay"
						style="padding:10rpx 50rpx;color:#fff;background:#19be6b;border-radius: 12px;">确定</span>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import PayCom from '@/components/pay/pay';
	export default {
		components: {
			PayCom
		},
		data() {
			return {
				showPage: false,
				payBtn: false,
				payExit: false,
				item: {},
				store: "",
				addr: "",
				formdata: {
					AddressId: 0,
					DeliveryMethod: 0,
					DetailList: [],
					Use_Integral: 0,
					User_Coupon_Id: 0,
					Use_Deposit_Id: 0,
				},
				detailData: {},
				detailList: [],
				payInfo: {
					OpenId: 'ow_7I5XC1-RGwwk8QANBmWKYKmOc',
					OrderId: '',
					OrderPayType: 1,
					GoodsName: '',
					type: 2, //是甲鹤付款
					total_price: 0,
					isCoffee: true,
				},
			}
		},
		onLoad(options) {
			this.payInfo.OpenId = uni.getStorageSync('mall_UserInfo').OpenId;
			const data = JSON.parse(decodeURIComponent(options.item))
			this.item = data
			let address = data.addr
			this.store = address.split('|')[0]
			this.addr = address.split('|')[1]
			this.formdata.DetailList = [{
				GoodsId: data.GoodsId,
				Number: data.BuyNum,
				SpecificationSort: data.SpecificationSort,
			}]
			uni.setNavigationBarTitle({
				title: "确认订单"
			})
			this.getInfo()
		},
		methods: {
			getInfo() {
				this.request2({
						url: '/api/AppletOrder/GetAppletGoodsSettlementInfoForZY',
						data: this.formdata
					},
					res => {
						if (res.resultCode == 1) {
							this.showPage = true
							this.detailData = res.data
							this.payInfo.total_price = res.data.total_price
							this.payInfo.GoodsName = res.data.mch_list[0].goods_list[0].name.slice(0, 10);
							res.data.mch_list.forEach(item => {
								item.goods_list.forEach(list => {
									let obj = {
										SpecificationSort: list.goods_attr.sign_id,
										Number: list.num,
										GoodsId: list.id,
										SpecificationList: list.specificationNameList,
										PresentCoffeeNum: this.item.GiveAwayNum
									};
									this.detailList.push(obj);
								});
							});
						}
					}
				);
			},
			setOrder() {
				let form = {}
				form.OrderEduType = 1; //1:咖啡间
				form.Consignee = '';
				form.Mobile = '';
				form.Province = 0;
				form.City = 0;
				form.VersionSource = 0;
				form.District = 0;
				form.ShoppingAddress = '';
				form.BuyerMessage = '';
				form.DeliveryMethod = 2;
				form.DetailList = this.detailList; //商品详情
				form.User_Coupon_Id = 0; //使用优惠券id
				form.Use_Deposit_Id = 0;
				form.DepositMoney = 0; //储蓄卡抵扣金额
				form.DepositFreightMoney = 0; //储蓄卡抵扣运费
				form.CouponMoney = 0; //优惠金额
				form.FreightMoney = 0; //快递费用
				form.Income = this.detailData.total_price; //实付款金额
				form.IsFormShoppingCart = 2; //来自购物车 1是 2否
				form.Use_Integral = 2; //是否使用积分 1是 2否
				form.ShoppingCartIdList = [];
				form.AnchorName = ''; //直播名称
				form.DeductionCommission = 0;
				let that = this
				uni.requestSubscribeMessage({
					tmplIds: this.detailData.template_message_list,
					complete(res) {
						that.request2({
								url: '/api/AppletOrder/SetAppletGoodsOrderInfo',
								data: form
							},
							res => {
								if (res.resultCode == 1) {
									that.payInfo.OrderId = res.data.OrderId
									that.payBtn = true
								} else {
									uni.showToast({
										title: res.data.message,
										duration: 2000,
										icon: 'none'
									});
								}
							}
						);
					}
				})
			},
			closePay() {
				this.payBtn = false;
				this.payExit = true;
			},
			exitPay() {
				this.payExit = false;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.confirmOrder {
		min-height: 100vh;
		background-color: #F5F5F5;
		padding-top: 40rpx;
		padding-bottom: 150rpx;
	}

	.addr {
		width: 684rpx;
		background-color: #FFFFFF;
		border-radius: 4rpx;
		margin: 0 auto;
		padding: 30rpx 40rpx;
		margin-bottom: 36rpx;

		.info {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;

			.store {
				font-size: 28rpx;
				font-weight: bold;
				color: #000000;
			}

			.type {
				font-size: 24rpx;
				font-weight: 400;
				color: #BABABA;
			}
		}

		.addrText {
			font-size: 24rpx;
			font-weight: 400;
			color: #999999;
		}
	}

	.orderDetail {
		width: 684rpx;
		background-color: #FFFFFF;
		border-radius: 4rpx;
		margin: 0 auto;
		padding: 40rpx 30rpx 0;

		.row1 {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 40rpx;

			.row1Sub {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.coffeeInfo {
				margin-left: 48rpx;
				padding-top: 20rpx;

				.num {
					font-size: 28rpx;
					font-weight: bold;
					color: #000000;
					margin: 10rpx 0;
				}

				.give {
					font-size: 24rpx;
					font-weight: 400;
					color: #666666;
					margin-bottom: 10rpx;
				}

				.tip {
					font-size: 24rpx;
					font-weight: 400;
					color: #999999;
				}
			}

			.price {
				font-size: 34rpx;
				font-weight: bold;
				color: #F65C10;

				.icon {
					font-size: 28rpx;
					font-weight: 400;
				}
			}
		}

		.row2 {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 40rpx;

			.label {
				font-size: 28rpx;
				color: #000000;
			}

			.value {
				font-size: 24rpx;
				font-weight: 500;
				color: #000000;
			}
		}

		.row3 {
			height: 106rpx;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			border-top: 1px solid #E8E8E8;

			.name {
				font-size: 24rpx;
				font-weight: 800;
				color: #666666;
			}

			.totalPrice {
				font-size: 28rpx;
				color: #000000;
				margin-left: 8rpx;
			}
		}
	}

	.payRow {
		width: 684rpx;
		height: 100rpx;
		background-color: #FFFFFF;
		border-radius: 4rpx;
		margin: 36rpx auto 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 40rpx;

		.label {
			font-size: 28rpx;
			font-weight: bold;
			color: #000000;
		}

		.value {
			font-size: 24rpx;
			font-weight: 400;
			color: #000000;
			display: flex;
			align-items: center;
		}
	}

	.payRow2 {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100vw;
		height: 130rpx;
		background-color: #FFFFFF;
		padding: 0 40rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;

		.name {
			font-size: 28rpx;
			font-weight: 500;
			color: #000000;

			.payMomey {
				color: #F65C10;
				margin-left: 4rpx;
			}
		}

		.payBtn {
			width: 185rpx;
			height: 78rpx;
			background-color: #3E766E;
			border-radius: 40rpx;
			margin-left: 30rpx;
			text-align: center;
			line-height: 78rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #FFFFFF;
		}
	}
</style>