<!-- 会员充值 -->
<template>
	<view class="member">
		<view class="card" :style="{'background-image':'url(../../static/icon/charge_bg.webp)'}">
			<view class="card-info">
				<u-image width="100rpx" height="100rpx" :src="userInfo.avatar" />
				<view class="card-info-right">
					<view class="phone">{{userInfo.mobile}}</view>
					<view class="level">初级会员 享受{{userInfo.discount}}折优惠</view>
				</view>
			</view>

			<view class="charge">
				<view class="charge-left">
					<view>
						<text>当前已充值{{userInfo.total_recharge_amount}}，升级还需{{userInfo.next_limit}}</text>
						<text>{{userInfo.next_level}}</text>
					</view>
					<up-line-progress :percentage="30" activeColor="#A26341" inactiveColor="#fff"
						height="8rpx"></up-line-progress>
				</view>
				<view class="charge-right">升级会员</view>
			</view>
		</view>

		<!-- 充值规格 -->
		<view class="rules">
			<view class="rules-title">
				<view class="rules-title-main">充值规格</view>
				<view class="rules-title-record" @click="onPageToRecord">
					充值记录
					<up-icon name="arrow-right"></up-icon>
				</view>
			</view>
			<view class="rules-con">
				<block v-for="item in chargeRulesList" :key="item.id">
					<view class="rules-con-item" :class="{'active':isChooseMoney==item.id?true:false}"
						@click="isChooseMoney = item.id">
						<view class="rules-con-item-main">{{item.name}}</view>
						<view class="rules-con-item-sub">{{item.remark?item.remark:'永久'}}</view>
						<view class="rules-con-item-amount">
							<text class="symbol">￥</text>
							<text>{{item.value}}</text>
						</view>
					</view>
				</block>

				<view class="rules-con-item" :class="{'active':isChooseMoney=='input'?true:false}"
					@click="isChooseMoney = 'input'">
					<view class="rules-con-item-main">自定义金额</view>
					<view class="rules-con-item-sub">永久</view>
					<view class="rules-con-item-amount">
						<up-input v-model="chargeMoney" placeholder="点击输入金额" border="none" type="number" color="#333"
							fontSize="28rpx" inputAlign="center"
							placeholderStyle="color:'#989898';'font-size':'24rpx';text-align:center;"></up-input>
					</view>
				</view>
			</view>
		</view>

		<!-- 注意事项 -->
		<view class="attention">
			<view class="attention-title"><text>注意事项：</text></view>
			<view class="attention-tips">1、充值后帐户的金额不能提现，可用于消费使用</view>
			<view class="attention-tips">2、账户充值出现问题可联系平台客服，也可拨打平台客服咨询热线4008888888</view>
		</view>

		<view class="member-btn" @click="onConfirmCharge">
			<view class="btn-wrap">
				确认充值
			</view>
		</view>
	</view>
</template>
<script setup>
	import {
		rechargeApi,
		rechargeAmountApi
	} from "@/api/user.js";
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		ref
	} from "vue";
	import useUserStore from "@/store/user";

	//用户信息
	const userInfo = useUserStore().userInfo;
	const isChooseMoney = ref('');
	const chargeMoney = ref('');

	// 充值规则
	const chargeRulesList = ref([]);
	const getChargeRules = () => {
		rechargeAmountApi().then(rs => {
			chargeRulesList.value = rs.data;
		})
	}

	// 充值记录产看
	const onPageToRecord = () => {
		uni.navigateTo({
			url: '/pages/charge/charge_record',
			fail(err) {
				console.log(err);
			}
		})
	}

	// 确认充值
	const onConfirmCharge = () => {
		if (!isChooseMoney.value) return uni.$u.toast('充值金额不能为空');
		let money = 0;
		if (isChooseMoney.value == 'input') {
			money = chargeMoney.value;
		} else {
			const rule = chargeRulesList.value.find(i => i.id == isChooseMoney.value);
			if (rule != undefined) {
				money = rule.value;
			}
		}

		rechargeApi({
			price: money
		}).then(res => {
			if (!res.data?.nonceStr) return uni.$u.toast('支付失败!');
			uni.requestPayment({
				provider: 'wxpay',
				timeStamp: res.data.timeStamp,
				nonceStr: res.data.nonceStr,
				package: res.data.package,
				signType: res.data.signType,
				paySign: res.data.paySign,
				success: (e) => {
					if (e.errMsg == 'requestPayment:ok') {
						uni.showModal({
							title: '充值成功',
							confirmText: '查看记录',
							cancelText: '继续充值',
							success: (e) => {
								chargeMoney.value = '';
								isChooseMoney.value = '';
								if (e.confirm) {
									uni.navigateTo({
										url: '/pages/charge/charge_record'
									})
								}
							},
							fail(err) {
								console.log(err);
							}
						})
					} else uni.$u.toast('支付失败')
				},
				fail: (e) => {
					uni.$u.toast('用户取消支付');
				}
			})
		})
	}

	onLoad(() => {
		getChargeRules();
	})
</script>

<style lang="scss">
	.member {
		padding: 40rpx 0 300rpx 0;

		.card {
			background: linear-gradient(to right, #F7EED7, #E7DAAF);
			background-size: 100%;
			background-repeat: no-repeat;
			height: 272rpx;
			margin: 0 30rpx 30rpx;
			border-radius: 10rpx;
			padding: 20rpx 0 0 20rpx;
			box-sizing: border-box;

			.card-info {
				display: flex;
				align-items: center;
				margin-bottom: 30rpx;

				.card-info-right {
					margin-left: 40rpx;

					.phone {
						margin-bottom: 12rpx;
						font-weight: 600;
						font-size: 32rpx;
						color: #444444;
					}

					.level {
						font-size: 28rpx;
						color: #7B5232;
					}
				}
			}

			.charge {
				display: flex;
				align-items: center;
				padding-right: 38rpx;

				.charge-left {
					flex: 1;
					margin-right: 30rpx;

					&>view {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-bottom: 10rpx;

						text {
							font-size: 22rpx;
							color: #A26341;
						}
					}
				}

				.charge-right {
					width: 148rpx;
					height: 52rpx;
					line-height: 52rpx;
					background: #7B5232;
					border-radius: 30rpx;
					font-size: 22rpx;
					color: #FFFFFF;
					text-align: center;
				}
			}
		}

		.rules {
			background: #FFFFFF;
			border-radius: 16rpx;
			margin: 0 30rpx 30rpx;
			padding: 30rpx;

			.rules-title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 34rpx;

				.rules-title-main {
					font-weight: 600;
					font-size: 32rpx;
					color: #444444;
				}

				.rules-title-record {
					display: flex;
					align-items: center;
					font-size: 28rpx;
					color: #444444;
				}
			}

			.rules-con {
				display: flex;
				flex-wrap: wrap;

				.rules-con-item {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					width: 188rpx;
					height: 220rpx;
					border: 2rpx solid #F1F1F1;
					border-radius: 16rpx;
					margin-bottom: 28rpx;

					&:not(:nth-child(3n)) {
						margin-right: 26rpx;
					}

					.rules-con-item-main {
						margin-bottom: 10rpx;
						font-size: 30rpx;
						color: #333333;
					}

					.rules-con-item-sub {
						margin-bottom: 30rpx;
						font-size: 24rpx;
						color: #777777;
					}

					.rules-con-item-amount {
						text {
							font-weight: 600;
							font-size: 32rpx;
							color: #333333;
						}

						.symbol {
							font-size: 20rpx;
						}
					}
				}

				.active {
					border: 2rpx solid #EFCC6E;
					background: #FEF8E7;
				}
			}
		}

		.attention {
			margin: 0 30rpx;

			.attention-title {
				position: relative;
				font-weight: 600;
				font-size: 32rpx;
				color: #262626;
				margin-bottom: 20rpx;
				margin-left: 10rpx;

				text {
					margin-left: 14rpx;
				}

				&::before {
					content: "";
					display: block;
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
					width: 6rpx;
					height: 70%;
					border-radius: 4rpx;
					background: #FF8056;
				}
			}

			.attention-tips {
				font-size: 24rpx;
				color: #7A7A7A;
				margin-bottom: 30rpx;
			}
		}

		.member-btn {
			position: fixed;
			bottom: 0rpx;
			left: 50%;
			transform: translateX(-50%);
			height: 110rpx;
			background-color: #F6F6F6;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			padding-bottom: constant(safe-area-inset-bottom);
			/* 兼容 iOS < 11.2 */
			padding-bottom: env(safe-area-inset-bottom);
			/* 兼容 iOS >= 11.2 */

			.btn-wrap {
				width: 670rpx;
				height: 80rpx;
				line-height: 80rpx;
				margin: 0 auto;
				background: #EFCC6E;
				border-radius: 40rpx;
				font-size: 32rpx;
				color: #FFFFFF;
				text-align: center;
			}
		}
	}
</style>