<template>
	<view class="buy">
		<view class="title">
			<!-- <image src="../../static/image/travel/matching/buy.png"></image> -->
			<text class="text">当前余额：</text>
			<text class="num">{{info.balance}}</text>
		</view>
		<view class="number">
			<view class="list">
				<view :class="num == index ? 'item real' : 'item'" v-for="(item, index) in list" :key="index" @click="pick(item, index)">
					<view class="card">
						<view class="top">
							<text>{{ item.number }}</text>
						</view>
						<!-- <text class="money">{{ item.money }}元</text> -->
					</view>
				</view>
				<view :class="num == 'input' ? 'item real' : 'item'" @click="pick('input', 'input')">
					<view class="card">
						<view class="top" style="padding: 0 15rpx; text-align: center">
							<input @change="inputChange" placeholder="其他面额" style="font-weight: bold; color: #666666" v-model="moneyNum" type="number" />
						</view>
						<!-- <text class="money">{{ item.money }}元</text> -->
					</view>
				</view>
			</view>
			<view class="tip">
				<text class="titl">温馨提示</text>
				<view>
					<text>1、本次充值金额尽可用于充电消费</text>
				</view>
				<view>
					<text>2、若充值时若使用了第三方优惠抵扣时,该笔金额不支持直接退款</text>
				</view>
			</view>
		</view>
		<view style="position: fixed; bottom: 0; left: 0; width: 750rpx">
			<view style="display: flex; align-items: center; justify-content: center; font-size: 26rpx; background-color: rgba(72, 121, 230, 0.3); padding: 15rpx 0">
				<up-checkbox shape="circle" name="agree" usedAlone @change="change"></up-checkbox>
				我已阅读并同意《
				<text style="color: #4879e6">云充电用户充值协议</text>
				》
			</view>
			<view style="display: flex; align-items: center; justify-content: space-between; padding: 20rpx 30rpx">
				<view style="font-size: 40rpx; font-weight: bold">
					{{ money }}
					<text style="font-size: 26rpx; font-weight: 500">元</text>
				</view>
				<view style="width: 220rpx">
					<up-button @click="toUp" color="#4879e6" text="充值" shape="circle" :disabled="!aloneChecked"></up-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { jqbPay,userInfo,adaPay } from '@/api/api.js';
import { onShow, onLoad } from '@dcloudio/uni-app';
let info = ref({});
let money = ref(30);
let moneyNum = ref('');
let num = ref(0);
let aloneChecked = ref(false);
let list = ref([
	{
		number: '￥30',
		money: '30'
	},
	{
		number: '￥50',
		money: '50'
	},
	{
		number: '￥80',
		money: '80'
	},
	{
		number: '￥100',
		money: '100'
	},
	{
		number: '￥200',
		money: '200'
	},
	{
		number: '￥300',
		money: '300'
	},
	{
		number: '￥400',
		money: '400'
	},
	{
		number: '￥500',
		money: '500'
	}
]);

const pick = (item, index) => {
	if (item != 'input') {
		money.value = item.money;
		moneyNum.value = '';
	}
	num.value = index;
};

const change = (e) => {
	aloneChecked.value = e;
	console.log(e);
};

const toUp = () => {
	adaPay({
		amount: money.value
	}).then((res) => {
		let data = res;
		uni.requestPayment({
			provider: 'wxpay',
			timeStamp: data.timeStamp,
			nonceStr: data.nonceStr,
			package: data.package,
			signType: data.signType,
			paySign: data.paySign,
			success: function (r) {
				uni.showModal({
					title: '提示',
					content: '充值成功',
					showCancel: false,
					success: function (res) {
						if (res.confirm) {
							uni.navigateBack();
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			fail: function (err) {
				console.log('fail:' + JSON.stringify(err));
			}
		});
	});
	
	// jqbPay({
	// 	amount: money.value
	// }).then((res) => {
	// 	let data = JSON.parse(res.payData);
	// 	uni.requestPayment({
	// 		provider: 'wxpay',
	// 		timeStamp: data.timeStamp,
	// 		nonceStr: data.nonceStr,
	// 		package: data.package,
	// 		signType: data.signType,
	// 		paySign: data.paySign,
	// 		success: function (r) {
	// 			uni.showModal({
	// 				title: '提示',
	// 				content: '充值成功',
	// 				showCancel: false,
	// 				success: function (res) {
	// 					if (res.confirm) {
	// 						uni.navigateBack();
	// 					} else if (res.cancel) {
	// 						console.log('用户点击取消');
	// 					}
	// 				}
	// 			});
	// 		},
	// 		fail: function (err) {
	// 			console.log('fail:' + JSON.stringify(err));
	// 		}
	// 	});
	// });
};


onShow(async () => {
	let _res = await userInfo();
	info.value = _res;
});

const inputChange = (e) => {
	money.value = e.detail.value;
};
</script>

<style lang="scss" scoped>
.buy {
	width: 100%;
	height: 100%;
	.title {
		display: flex;
		align-items: center;
		padding: 20rpx 0 20rpx 50rpx;
		background-color: #ffffff;
		> image {
			width: 32rpx;
			height: 32rpx;
			margin-right: 6rpx;
		}
		> text {
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
			line-height: 40rpx;
		}
		.num {
			color: #ff4141;
		}
	}
	.number {
		width: 100%;
		background-color: #ffffff;
		margin-top: 18rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		.list {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			padding: 38rpx 40rpx 0rpx 40rpx;
			.item {
				width: 194rpx;
				height: 194rpx;
				background: #ffffff;
				box-shadow: 0rpx 0rpx 6rpx 0rpx rgba(0, 0, 0, 0.1);
				border-radius: 20rpx;
				margin-bottom: 44rpx;
				display: flex;
				.card {
					width: 194rpx;
					height: 194rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					.top {
						display: flex;
						align-items: center;
						> text {
							font-size: 32rpx;
							font-family: PingFangSC-Semibold, PingFang SC;
							font-weight: 600;
							color: #666666;
							line-height: 44rpx;
							margin-right: 12rpx;
						}
						> image {
							width: 30rpx;
							height: 30rpx;
						}
					}
					.money {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
						line-height: 34rpx;
						margin-top: 12rpx;
					}
				}
				.recommend {
					width: 112rpx;
					height: 36rpx;
					background: #f3f2ea;
					border-radius: 8rpx 0rpx 8rpx 0rpx;
					position: absolute;
					text-align: center;
					margin-top: -18rpx;
					> text {
						font-size: 20rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #666666;
						line-height: 36rpx;
					}
				}
			}
			.real {
				border: 2rpx solid #f88700;
				background-color: rgba(248, 135, 0, 0.1);
			}
			&:after {
				content: '';
				width: 194rpx;
			}
		}
		.sure {
			width: 582rpx;
			height: 80rpx;
			background: #ff6a5f;
			border-radius: 40rpx;
			text-align: center;
			> text {
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 600;
				color: #ffffff;
				line-height: 80rpx;
			}
		}
	}
	.tip {
		background: #ffffff;
		padding: 40rpx;
		padding-top: 0;
		.titl {
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 600;
			color: #666666;
			line-height: 40rpx;
			margin-bottom: 6rpx;
		}
		> view {
			> text {
				font-size: 22rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				color: #999999;
				line-height: 32rpx;
			}
			&:nth-child(2) {
				> text:nth-child(2) {
					color: #333333;
				}
			}
			&:nth-child(5) {
				> text:nth-child(2) {
					color: #ff6a5f;
					font-weight: 600;
					border-bottom: 2rpx solid #ff6a5f;
				}
			}
		}
	}
}
</style>
