<template>
	<view class="box">
		<view class="paybox">

			<view class="payitem">
				<view class="payitemleft">
					套餐名称
				</view>
				<view class="payitemright">{{orderdetail.name}}</view>
			</view>
			<view class="payitem">
				<view class="payitemleft">
					适用功能
				</view>
				<view class="payitemright">数管功能</view>
			</view>
			<view class="payitem">
				<view class="payitemleft">
					套餐详情
				</view>
				<view class="payitemright" v-if="orderdetail.is_day==0">{{orderdetail.duration}}天使用权限</view>
				<view class="payitemright" v-if="orderdetail.is_day==1">{{orderdetail.duration}}次使用权限</view>
			</view>
			<view class="taocan">套餐描述</view>
			<view class="taocandes">
				{{orderdetail.introduce}}
			</view>

			<view class="jine">
				<view class="moneyleft">金额</view>
				<view class="moneyright">{{orderdetail.money}}</view>
			</view>


		</view>
		<view class="surezhifu" @click="surezhifu">确认支付</view>
	</view>
</template>

<script>
	import app from "../../App.vue"
	export default {
		data() {
			return {
				id: '',
				orderdetail: '',
				shebeinum: '',
				paytype:'',
				pay_order_sn:''
			}
		},
		methods: {
			//获取套餐详情
			gettaocandetail() {
				let param = {
					id: this.id
				}
				app.post("api/wxpay/orderPayDetail", param, 'get')
					.then(res => {

						console.log(res);
						this.orderdetail = res;

					})
					.catch(err => {});
			},
			//确认支付
			surezhifu() {
				let that=this;
				let param = {
					openid: uni.getStorageSync('openid'),
					type: 1,
					m_id: this.id
				}
				app.post("api/wxpay/pay", param, 'post')
					.then(res => {

						console.log(res);
						this.paytype=res.type;
						this.pay_order_sn=res.pay_order_sn;
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: res.pay_setting.timeStamp,
							nonceStr: res.pay_setting.nonceStr,
							package: res.pay_setting.package,
							signType: res.pay_setting.signType,
							paySign: res.pay_setting.paySign,
							success: function(res) {
								console.log(res);
								that.zhifusuccess()
							},
							fail: function(err) {
								console.log(err)
							}
						});

					})
					.catch(err => {});
			},
			//支付成功调用
			zhifusuccess(){
				let param={
					type:this.paytype,
					pay_order_sn:this.pay_order_sn
				}
				app.post("api/wxpay/updatePayStatus", param, 'post')
					.then(res => {
				
						console.log(res);
						uni.navigateBack({
							checked:true
						})
						
				
					})
					.catch(err => {});
			}

		},
		mounted() {
			this.gettaocandetail()
		},
		onLoad(options) {
			console.log(options)
			this.id = options.id
		}
	}
</script>

<style>
	.paybox {
		width: 686rpx;
		background: #fff;
		padding: 0 32rpx;
		box-sizing: border-box;

		margin: 38rpx auto 0;

	}

	.payitem {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 40rpx 0rpx;
		box-sizing: border-box;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.payitemleft {
		color: #0A0808;
		font-size: 30rpx;
	}

	.payitemright {
		color: #7F8389;
		font-size: 28rpx;
	}

	.payitemright input {
		text-align: right;
	}

	.taocan {
		color: #0A0808;
		font-size: 30rpx;
		margin-top: 40rpx;
	}

	.taocandes {
		height: 120rpx;
		margin-top: 26rpx;
		color: #7F8389;
		font-size: 28rpx;
	}

	.taocandes textarea {
		width: 100%;
		height: 120rpx;
	}

	.enterdes {
		color: #7F8389;
		font-size: 28rpx;
	}

	.jine {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 64rpx 0;
	}

	.moneyleft {
		color: #000000;
		font-size: 30rpx;
	}

	.moneyright {
		color: #F39800;
		font-size: 42rpx;
	}

	.surezhifu {
		width: 686rpx;
		height: 100rpx;
		background: rgba(243, 152, 0, 1);
		box-shadow: 0rpx 4rpx 18rpx rgba(0, 0, 0, 0.04);
		opacity: 1;
		border-radius: 10rpx;
		color: #fff;
		font-size: 32rpx;
		text-align: center;
		line-height: 100rpx;
		margin: 60rpx auto;
	}
</style>