<template>
	<view class="box">
		<view class="paybox">
			<view class="payitem">
				<view class="payitemleft">
					设备编号
				</view>
				<view class="payitemright">
					<!-- <input type="text" placeholder="请输入设备编号" v-model="shebeinum"/>	 -->
					{{shuban_number}}
				</view>
			</view>
			<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}}
				<!-- <textarea value="" placeholder="新年送好礼，低价购权限" placeholder-class="enterdes" /> -->
			</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: '',
				// 数板编号
				shuban_number: ""

			}
		},
		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;
// 				if (this.shuban_number == '') {
// 					uni.showToast({
// 						title: '请输入设备编号',
// 						icon: 'none'
// 					})
// 
// 					return false
// 				}
				let param = {
					openid: uni.getStorageSync('openid'),
					type: 0,
					number: this.shuban_number,
					m_id: this.id
				}
				app.post("api/wxpay/pay", param, 'post')
					.then(res => {
						console.log(res);
						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: 0,
					pay_order_sn: this.pay_order_sn
				}
				app.post("api/wxpay/updatePayStatus", param, 'post')
					.then(res => {
						console.log(res);
						// uni.navigateBack({
						// 	checked: true
						// })
						uni.navigateBack({})
					})
					.catch(err => {});
			}

		},
		mounted() {
			this.gettaocandetail()
		},
		onLoad(options) {
			console.log(options)
			this.id = options.id;
			this.shuban_number = options.shuban_number
		}
	}
</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>