<template>
	<view class="confirmOrder">
		<view class="status">
			<image
				src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/coffee/starbuckslogo.png"
				mode="widthFix" style="width: 190rpx;height: auto;"></image>
			<view class="orderStatus">
				<text v-if="detailData.OrderStatus==5">已完成</text>
				<text v-if="detailData.OrderStatus==1">待付款</text>
			</view>
		</view>
		<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">
							星巴克咖啡{{detailData.DetailList[0].Number||0}}杯
						</view>
						<view class="give">
							买{{detailData.DetailList[0].Number||0}}杯赠送{{detailData.DetailList[0].PresentCoffeeNum||0}}杯
						</view>
						<view class="tip">
							(赠送咖啡可随意选择)
						</view>
					</view>
				</view>
				<view class="price">
					<text class="icon">¥</text>{{detailData.DetailList[0].Final_Price||0}}
				</view>
			</view>
			<view class="row2">
				<view class="label">购买数量</view>
				<view class="value">{{detailData.DetailList[0].Number||0}} 杯</view>
			</view>
			<view class="row2">
				<view class="label">赠送数量</view>
				<view class="value">{{detailData.DetailList[0].PresentCoffeeNum||0}} 杯</view>
			</view>
			<view class="row3">
				<text class="name">应付</text>
				<text class="totalPrice"> ¥{{detailData.PreferPrice||0}}</text>
			</view>
			<view class="row4">
				下单时间：{{detailData.CreateDate}}
				<view class="payBtn" v-if="detailData.OrderStatus==1" @click="setOrder">
					去支付
				</view>
			</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 {
				store:"",
				addr: '',
				detailData: {},
				msg:{
					OrderId:0
				},
				payBtn: false,
				payExit: false,
				payInfo: {
					OpenId: 'ow_7I5XC1-RGwwk8QANBmWKYKmOc',
					OrderId: '',
					OrderPayType: 1,
					GoodsName: '',
					type: 2, //是甲鹤付款
					total_price: 0,
					isCoffee:true,
				},
			}
		},
		onLoad(options) {
			
			uni.setNavigationBarTitle({
				title: "订单详情"
			})
			this.msg.OrderId=options.id
			this.getInfo()
			this.payInfo.OpenId = uni.getStorageSync('mall_UserInfo').OpenId;
		},
		methods: {
			getInfo() {
				this.request2({
						url: '/api/AppletCoffee/GetMyCoffeeOrderInfo',
						data: this.msg
					},
					res => {
						if (res.resultCode == 1) {
							this.detailData=res.data
							let address=res.data.Address
							this.store=address.split('|')[0]
							this.addr=address.split('|')[1]
						}
					}
				);
			},
			
			setOrder() {
				this.payInfo.total_price = this.detailData.PreferPrice
				this.payInfo.OrderId =this.detailData.OrderId
				this.payInfo.GoodsName =this.detailData.DetailList[0].GoodsName
				this.payBtn = true
			},
			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: 30rpx;
	}
	.status{
		height: 340rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-content: flex-start;
		.orderStatus{
			width: 100%;
			font-size: 34rpx;
			font-weight: bold;
			color: #000000;
			text-align: center;
			margin-top: 26rpx;
		}
	}
	.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: 15rpx;

			.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;

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

			.totalPrice {
				font-size: 28rpx;
				color: #000000;
				margin-left: 8rpx;
			}
		}
		.row4{
			line-height:80rpx;
			font-size: 24rpx;
			color: #999999;
			border-top:1px solid #E8E8E8;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.payBtn{
				height: 60rpx;
				border-radius: 30rpx;
				background-color: #3E766E;
				text-align: center;
				line-height: 60rpx;
				padding: 0 20rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #FFFFFF;
			}
		}
	}
</style>
