<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="30"></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: 16rpx 0;"></view>
			<view class="jiesuanmoney">
				<text>
					优惠<text style="color: #FF4C11;font-weight: 500;">￥{{calculateEvent(info.save)}}</text>
				</text>
				<text>
					小计<text style="color: #FF4C11;font-weight: 500;">￥{{calculateEvent(info.salePrice) }}</text>
				</text>
			</view>

		</view>
		<!-- 支付方式 -->
		<view class="payType">
			<view class="">
				支付方式
			</view>
			<view class="">
				<u-radio-group v-model="radiovalue1" iconPlacement="right" :size="28" placement="column">
					<u-radio activeColor="#ffd158" name="1">
						<view class="dfs">
							<image style="width:44rpx;height:44rpx"
								src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/balance.png" mode="">
							</image>
							<text style="font-size: 28rpx;margin-left: 16rpx;">
								微信支付
							</text>
						</view>
					</u-radio>
					<view style="margin: 22rpx 0;width: 100%;height: 2rpx;background-color: #E5E5E5;"
						v-if="info.isUseVip==1"> </view>
					<u-radio activeColor="#ffd158" name="2" v-if="info.isUseVip==1">
						<view class="dfs">
							<image style="width:44rpx;height:44rpx"
								src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/wechat.png" mode="">
							</image>
							<text style="font-size: 28rpx;margin-left: 16rpx;">
								会员卡支付</text>
						</view>
					</u-radio>
				</u-radio-group>
				<view style="font-weight: 400;font-size: 24rpx;color: #333333;margin-left: 60rpx;"
					v-if="info.isUseVip==1">
					会员卡余额{{ amountVIP.amount}} <text
						style="font-weight: 500;font-size: 28rpx;margin-left: 16rpx;color: #FF4C11;"
						@click="goRecharge">去充值</text>
				</view>
			</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"> ￥{{calculateEvent(info.salePrice)}}
				</text>
				<text style="font-size: 24rpx;font-weight: 400;color: #	999;">含优惠卷包￥0</text>
			</view>
			<view class="">
				共{{Quantity}}件 已优惠￥{{calculateEvent(info.save) }}
			</view>
			<button class="btnStyle" @click="fangdouevent">提交订单</button>
		</view>
		<payPassword ref="payPwd" @accountPayevent="accountPayevent" v-show="ispws"></payPassword>
	</view>
</template>

<script>
	import payPassword from '@/components/payPassword.vue'
	export default {
		components: {
			payPassword
		},
		onLoad(e) {
			this.$store.dispatch("set_shopid"); //获取shapid
			this.getInfo(e.id)
			this.orderIds = e.id
			this.amount = uni.cache.get('userInfo').amount
			this.vipId = uni.cache.get('userInfo').id
		},
		data() {
			return {
				info: null,
				Quantity: 1,
				radiovalue1: '1',
				amount: 0,
				orderIds: null,
				vipId: null,
				ispws: false,
				amountVIP: null,
				listinfoid: null
			}
		},
		methods: {
			async getAount() {
				let res = await this.api.shopUserInfo({
					// shopId:店铺ID
					"shopId": this.$store.state.shopId,
					"userId": uni.cache.get('userInfo').id
				})
				if (res.code == 0) {
					this.amountVIP = res.data

				}
			},
			// 余额支付
			async accountPayevent(pwd) {
				this.ispws = false
				let res = await this.api.payOrderPay({
					orderId: this.listinfoid.id,
					payType: "deposit",
					pwd
				})
				if (res.code == 0) {
					let orderInfo = {
						createdAt: this.listinfoid.createTime,
						orderNo: this.listinfoid.orderNo,
						orderAmount: this.calculateEvent(this.info.salePrice)
					}
					uni.showToast({
						icon: 'none',
						title: '支付成功',
						success: () => {
							setTimeout(res => {
								uni.redirectTo({
									url: '/pages/order/successful?orderId=' + this
										.listinfoid.id + '&orderInfo=' + JSON.stringify(orderInfo)+'&radiovalue1=' + this.radiovalue1
								});
							}, 1000)
						}
					})
				} else if (res.data == 1) {
					setTimeout(() => {
						// 去充值
						this.goRecharge()
					}, 2000)
				}
			},
			calculateEvent(d) {
				return (d * 1000 * this.Quantity) / 1000
			},
			goRecharge() {
				uni.pro.navigateTo('/pages/member/index', {
					shopId: this.info.shopId
				})
			},
			fangdouevent() {
				this.$u.debounce(() => {
					this.sumbitFrom()
				}, 1000)
			},
			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.listinfoid = res.data
					// radiovalue1:为1的时候微信支付,为2是会员卡,需要输入支付密码
					if (this.radiovalue1 == 1) {
						// 调用支付接口
						this.payEvent(res.data.id)
					} else {
						// 先判断是否设置支付密码。0是没设置。没设置的情况下跳转到设置页面。有的话输入支付密码
						let isVip = uni.cache.get('userInfo').isPwd
						if (isVip == 0) {
							uni.pro.navigateTo('/pages/user/repairpassword', {
								shopId_id: uni.cache.get('shopUser')
							})
						} else {
							this.ispws = true
							this.$nextTick(() => {
								this.$refs.payPwd.onPayUp();
							})
						}
					}
				}

			},
			async payEvent(id) {
				let res = await this.api.payOrderPay({
					payType: 'wechatPay',
					orderId: id,
					orderType: 'group'
				})
				if (res) {
					uni.requestPayment({
						provider: 'wxpay', //支付类型-固定值
						partnerid: res.data.appId, // 微信支付商户号
						timeStamp: res.data.timeStamp, // 时间戳（单位：秒）
						nonceStr: res.data.nonceStr, // 随机字符串
						package: res.data.package, // 固定值
						signType: res.data.signType, //固定值
						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
					uni.cache.set('shopUser', res.data.shopId);
					// 获取余额
					this.getAount()
				}
			}
		}
	}
</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;

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

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


		}

		.payType {
			padding: 32rpx 34rpx;
			margin-top: 48rpx;
			background-color: #fff;

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

			>view:last-child {
				margin-top: 32rpx;
			}

			.dfs {
				display: flex;
				align-items: center;
			}

		}

		.placeBottom {
			position: fixed;
			bottom: 0%;
			left: 0;
			width: 100%;
			height: 180rpx;
			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;
			}
		}
	}

	.dfs {
		display: flex;
		align-items: center;
	}

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