<template>
	<view class="placeOrder">
		<view class="placetop">
			<view class="placetopone">
				<view style="display: flex;">
					<image :src="info.proImg"
						style="width: 102rpx;height: 102rpx;border-radius: 50%;margin-left: 28rpx;" mode=""></image>
					<view class="placetopInfo">
						<view>{{info.proName.length>12?info.proName.substring(0,12)+'...':info.proName}} </view>
						<view>{{info.avaTime}} </view>
						<view>{{info.proDetail}} </view>
					</view>
				</view>
				<view class="placetopmoney">
					<view>
						<text>￥{{info.originPrice}}</text>
						<text>￥{{info.salePrice}}</text>
					</view>
					<u-number-box v-model="Quantity">
						<view slot="minus" class="minus">
							<u-icon name="minus" color="#CCCCCC" bold size="40"></u-icon>
						</view>
						<text slot="input" style="width: 20px;text-align: center;">{{Quantity}}</text>
						<view slot="plus" class="plus">
							<u-icon name="plus" color="#FF4B10" bold size="30"></u-icon>
						</view>
					</u-number-box>
				</view>
			</view>
			<view class="redMoney" v-if="false">
				<view>
					<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/hongbao.png"
						style="width: 30rpx;height: 30.24rpx;;" mode=""></image>
					红包/低佣券
				</view>
				<view>
					{{info.couponDetail.name}}
				</view>
			</view>
			<view style="background-color: #F6F6F6;height: 2rpx;width: 100%;margin-top: 8rpx;"></view>
			<view class="jiesuanmoney">
				<text>
					优惠<text style="color: #FF4C11;font-weight: 500;">￥{{info.save * Quantity}}</text>
				</text>
				<text>
					小计<text style="color: #FF4C11;font-weight: 500;">￥{{info.salePrice * Quantity}}</text>
				</text>
			</view>
		</view>
		<view class="placeBottom">
			<view class="">
				<text style="font-size: 24rpx;font-weight: bold;"> 合计 </text><text
					style="font-size: 32rpx;font-weight: bold;color:#FF4C11"> ￥{{info.salePrice * Quantity}} </text>
				<text style="font-size: 24rpx;font-weight: 400;color: #	999;">含优惠卷包￥0</text>
			</view>
			<view class="">
				共{{Quantity}}件 已优惠￥{{info.save * Quantity}}
			</view>
			<button class="btnStyle" @click="sumbitFrom">提交订单</button>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad(e) {
			this.getInfo(e.id)
		},
		data() {
			return {
				info: null,
				Quantity: 1
			}
		},
		methods: {
			async sumbitFrom() {
				let payMoney = this.info.salePrice * this.Quantity
				let res = await this.api.creatGroupOrder({
					num: this.Quantity,
					proId: this.info.proId,
					shopId: this.info.shopId,
					payAmount: payMoney,
					orderAmount: payMoney
				})
				if (res.code == 0) {
					// 调用支付接口
					this.payEvent(res.data.id)
				}
			},
			async payEvent(id) {
				let res = await this.api.payOrderPay({
					payType:'wechatPay',
					orderId:id,  
					orderType:'group'
				})
				if (res) {
					uni.requestPayment({
						provider: 'wxpay', //支付类型-固定值
						partnerid: res.data.payAppId, // 微信支付商户号
						timeStamp: res.data.payTimeStamp, // 时间戳（单位：秒）
						nonceStr: res.data.paynonceStr, // 随机字符串
						package: res.data.payPackage, // 固定值
						signType: res.data.paySignType, //固定值
						paySign: res.data.paySign, //签名
						success: (res) => {
							uni.showToast({
								title: "支付成功"
							})
							uni.navigateBack()
						},
						fail: (err) => {
							setTimeout(res => {
								uni.showToast({
									icon: 'none',
									title: '支付失败'
								})
								uni.hideLoading()
							}, 2000)
						}
					});
				}
		
			},
			async getInfo(id) {
				let res = await this.api.getproductorderConfirm({
					productId: id,
				})
				if (res.code == 0) {
					this.info = res.data
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.placeOrder {

		.placetop {
			width: 750rpx;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			padding: 20rpx 30rpx;

			.placetopone {
				.df(space-between);

				.placetopInfo {
					margin-left: 18rpx;

					>view:first-child {
						font-weight: 400;
						font-size: 32rpx;
						color: #333333;
					}

					>view:nth-child(2),
					>view:last-child {
						font-weight: 400;
						font-size: 24rpx;
						color: #666666;

					}
				}

				.placetopmoney {

					>view:first-child {
						margin-bottom: 20rpx;

						>text:first-child {
							text-decoration: line-through;
							color: #999;
							font-weight: 400;
							font-size: 24rpx;
						}

						>text:last-child {
							font-weight: bold;
							font-size: 28rpx;
							color: #333333;
						}
					}

				}
			}

			.redMoney {
				.df(space-between);
				margin-top: 30rpx;
				.m(30rpx);

				>view:first-child {
					.df;
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
				}

				>view:last-child {
					background: #FFE9E9;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #FF3333;
					text-align: center;
					padding: 9rpx 13rpx;
				}
			}

			.jiesuanmoney {
				height: 50rpx;
				line-height: 50rpx;
				text-align: right;
				margin-top: 8rpx;

				>text:first-child {
					font-size: 24rpx;
				}

				>text:last-child {
					font-size: 32rpx;
					margin-left: 20rpx;
				}
			}

		}

		.placeBottom {
			position: fixed;
			bottom: 0%;
			left: 0;
			width: 100%;
			height: 148rpx;
			background-color: #fff;
			padding: 16rpx 34rpx;

			>view:last-child {
				margin-top: 16rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;

			}

			.btnStyle {
				width: 302rpx;
				height: 72rpx;
				line-height: 72rpx;
				text-align: center;
				background: linear-gradient(110deg, #F1A666 0%, #FF4C11 100%);
				border-radius: 48rpx 48rpx 48rpx 48rpx;
				font-weight: bold;
				font-size: 36rpx;
				color: #FFFFFF;
				position: absolute;
				right: 58rpx;
				top: 30rpx;
			}
		}
	}

	.m(@top, @right: 0, @bottom: 0, @left: 0) {
		margin: @top, @right, @bottom, @left
	}

	.df(@start: flex-start, @position: center) {
		display: flex;
		align-items: @position;
		justify-content: @start;
	}
</style>
<style lang="scss">
	.minus {
		width: 22px;
		height: 22px;
		border-width: 1px;
		border-color: #F0F0F0;
		border-style: solid;
		border-top-left-radius: 100px;
		border-top-right-radius: 100px;
		border-bottom-left-radius: 100px;
		border-bottom-right-radius: 100px;
		@include flex;
		justify-content: center;
		align-items: center;
	}

	.plus {
		width: 22px;
		height: 22px;
		background-color: #FFF1EC;
		border-radius: 50%;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
	}
</style>