<template>
	<u-overlay :show="show" class="flex">
		<u-notify ref="uNotify" message=""></u-notify>
		<view class="box flex flex-col">
			<u-icon name="close" @click="close" class="icon" color="white" size="50"></u-icon>
			<view class="content">
				<view class="x-between flex">
					<text class="money" v-for="item in moneyList" :key="item">{{item}}</text>
				</view>
				<u--input class="mt-2" inputAlign="center" style="background-color: white;" placeholder="请输入其他金额"
					border="surround" v-model="value"></u--input>
			</view>
			<text class="font-pay" @click="pay_reward">支付</text>
		</view>
	</u-overlay>
</template>

<script>
	export default {
		name: "reward",
		props: ["show"],
		data() {
			return {
				moneyList: ["1元", "2元", "3元"],
				value: ""
			};
		},
		methods: {
			close() {
				this.$emit("onClose")
			},
			pay_reward() {
				this.$api.createwxorder(this.value,'').then(res => {
					console.log(res);
					if (res.data.data) {
						var num = res.data.data.orderNum
						var parms = res.data.data.url
						var jWeixin = require('jweixin-module')
						jWeixin.config({
							debug: false,
							appId: parms.jsapiAppid,
							timestamp: parms
							.timeStamp, // 支付签名时间戳，注意微信 jssdk 中的所有使用 timestamp 字段均为小写。但最新版的支付后台生成签名使用的 timeStamp 字段名需大写其中的 S 字符
							nonceStr: parms.nonceStr, // 支付签名随机串，不长于 32 位
							package: parms.jsapipackage, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
							signType: parms.signType, // 微信支付V3的传入 RSA ,微信支付V2的传入格式与V2统一下单的签名格式保持一致
							paySign: parms.paySign, // 支付签名
						});
						jWeixin.chooseWXPay({
							appId: parms.jsapiAppid,
							timestamp: parms
							.timeStamp, // 支付签名时间戳，注意微信 jssdk 中的所有使用 timestamp 字段均为小写。但最新版的支付后台生成签名使用的 timeStamp 字段名需大写其中的 S 字符
							nonceStr: parms.nonceStr, // 支付签名随机串，不长于 32 位
							package: parms.jsapipackage, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
							signType: parms.signType, // 微信支付V3的传入 RSA ,微信支付V2的传入格式与V2统一下单的签名格式保持一致
							paySign: parms.paySign, // 支付签名
							success: function(e) {
								that.$refs.uNotify.show({
									top: 30,
									type: 'success',
									message: '支付成功',
									duration: 1000 * 3,
									fontSize: 20,
									safeAreaInsetTop: true
								})
								that.$api.roomwatchytypeverifyPay(num).then(res => {
									console.log(res);
								})
								setTimeout(() => {
									location.reload()
								}, 1500);
							},
							fail: function() {
								that.$refs.uNotify.show({
									top: 30,
									type: 'error',
									message: '支付失败',
									duration: 1000 * 3,
									fontSize: 20,
									safeAreaInsetTop: true
								})
							},
						});
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.mt-2 {
		margin-top: 24rpx;
	}

	.mt-5 {
		margin-top: 50rpx;
	}

	.flex {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.flex-col {
		flex-direction: column;
	}

	.x-between {
		justify-content: space-between;
	}

	.icon {
		position: absolute;
		top: 380rpx;
		right: 150rpx;
	}

	.money {
		display: inline-block;
		width: 112rpx;
		height: 64rpx;
		line-height: 64rpx;
		background-color: #FEE287;
		color: #FF7A00;
		border-radius: 10rpx;
		text-align: center;
	}

	.font-pay {
		color: white;
		font-size: 26rpx;
		font-weight: bold;
		transform: translate(0, 50rpx);
	}

	.box {
		width: 560rpx;
		height: 678rpx;
		background-image: url("../../../static/images/reword/bg-reward.png");
		background-repeat: no-repeat;
		background-size: contain;

		.content {
			width: 360rpx;
			text-align: center;
			margin-top: 300rpx;
		}
	}
</style>
