<template>
	<view style="background: #fff">
		<view class="scroll">
			<view class="card-roll">
				<image class="file-pet" :src="imgPrefix + 'integral-ground.png'" mode="widthFix" />
				<view class="points-content">
					<view class="points-top-row">
						<text class="points-label">积分数量 (个)</text>
					<view class="points-right" @click="goToPointsDetails">
						<text class="points-details-text">积分明细</text>
						<image class="points-arrow" :src="imgPrefix + 'recharge-whiteArrow.png'" mode="widthFix" />
					</view>
					</view>
					<text class="points-value">{{ totalPoints || 0 }}</text>
				</view>
			</view>
		</view>
		<view class="select-amount">
			<text class="select">请选择充值金额</text>
			<view class="select-recharge">
				<view @click.stop="giftOrderStatus(item)" v-for="item in giftList" :key="item.id">
					<view class="recharge" :class="{ recharge2: item.id === giftStatus }">
						<view class="first">
							<image class="integral-icon" :src="imgPrefix + 'integral-icon.png'" mode="widthFix" />
							<text class="f">{{ item.points }}</text>
						</view>
						<text class="s">¥{{ item.amount }} </text>
					</view>
				</view>
			</view>
			<text class="select">请选择充值方式</text>
			<view class="recharge-method">
				<view class="wechat"  @click.stop="selectOption1">
					<view class="select">
						<image class="w" src="@/static/images/douy.png" mode="widthFix" />
						<text class="x">抖音</text>
					</view>
					<image v-if="selected1" class="not-selected"
						src="@/static/images/w.png" mode="widthFix" />
					<image v-if="selected2" class="not-selected" src="@/static/images/y.png" mode="widthFix" />
				</view>
			</view>
			<view class="remk-reservation">
				<view class="rese-bom" @click="rechargeNow()">
					<text class="l" style="color: #fff;">立即充值</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { pointsRechargeList, walletWxpay } from '@/api/login';
	import { getUserInfo } from '@/api/user';
	import { imgPrefix } from '@/utils/common';

	export default {
		props: {
			user_id: {
				type: String,
				default: ""
			}
		},
		data() {
			return {
				imgPrefix,
				giftList: [],
				giftStatus: null,
				giftLabel: null,
				selected1: true,
				selected2: false
			};
		},
		mounted() {
			this.getGiftList();
		},
		computed: {
			totalPoints() {
				return this.$store.state?.user?.userInfo.totalPoints || 0;
			}
		},
		methods: {
			getGiftList() {
				pointsRechargeList().then((res) => {
					this.giftList = res.data;
				});
			},
			giftOrderStatus(item) {
				// 如果点击的是已选中的项，不做处理
				if (this.giftStatus === item.id) {
					return;
				}
				// 更新选中状态
			this.giftStatus = item.id;
			this.giftLabel = item.amount;
		},
		goToPointsDetails() {
			uni.navigateTo({
				url: '/pages/client/recharge/points-details'
			});
		},
		// 刷新用户信息
		refreshUserInfo() {
			getUserInfo().then((res) => {
				if (res && res.data) {
					this.$store.dispatch("user/setUserInfo", res.data);
				}
			}).catch((err) => {
				console.error('刷新用户信息失败:', err);
			});
		},
		selectOption1() {
				this.selected1 = false;
				this.selected2 = true;
			},
		rechargeNow() {
			// 验证是否选择了充值金额
			if (!this.giftStatus || !this.giftLabel) {
				uni.showToast({
					title: '请选择充值金额',
					icon: 'none'
				});
				return;
			}
			// 验证是否选择了支付方式
			if (this.selected1) {
				uni.showToast({
					title: '请选择支付方式',
					icon: 'none'
				});
				return;
			}
			uni.showLoading({
				title: '处理中...',
				mask: true
			});
			const data = {
				type: 6, // 购买积分传6
				total_fee: +this.giftLabel
			};
			walletWxpay(data).then((res) => {
				uni.hideLoading();
				// 使用获取的支付参数进行支付
				 tt.pay({
							 orderInfo: { 
                   order_id:res.data.orderInfo.order_id,
                   order_token:res.data.orderInfo.order_token,
                    },
                    service:5,
					success: (payRes) => {
						uni.showToast({
							title: '支付成功',
							icon: 'success'
						});
						// 刷新用户信息，更新 totalPoints
						this.refreshUserInfo();
					},
					fail: (err) => {
						uni.showToast({
							title: '支付失败',
							icon: 'none'
						});
					}
				});
			}).catch((err) => {
				uni.hideLoading();
				console.error('获取支付参数失败:', err);
				uni.showToast({
					title: err.msg || '获取支付参数失败',
					icon: 'none'
				});
			});
		}
		},
	};
</script>

<style lang="scss" scoped>
	.scroll {
		display: flex;
		margin-top: 20rpx;

		.card-roll {
			position: relative;
			margin: 0 auto;

			.file-pet {
				width: 710rpx;
				height: 300rpx;
				margin-left: 10rpx;
			}

			.card {
				font-family: PingFangSC;
				font-size: 40rpx;
				color: #ffffff;
			}

			.points-content {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				display: flex;
				flex-direction: column;
				justify-content: center;
				padding: 32rpx 40rpx;
				box-sizing: border-box;
			}

			.points-top-row {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 16rpx;
			}

			.points-label {
				font-size: 28rpx;
				color: rgba(255, 255, 255, 0.8);
			}

			.points-value {
				font-size: 32px;
				font-weight: 500;
				color: #fff;
			}

			.points-right {
				display: flex;
				flex-direction: row;
				align-items: center;
				gap: 8rpx;
			}

			.points-details-text {
				font-size: 28rpx;
				color: rgba(255, 255, 255, 0.5);
			}

			.points-arrow {
				width: 11rpx;
				height: 18rpx;
			}

			.effectiveTime {
				display: flex;
				margin-top: 16rpx;

				.surplus {
					font-family: PingFang SC;
					font-size: 24rpx;
					font-weight: normal;
					line-height: 24rpx;
					letter-spacing: normal;
					color: #ffffff;
				}

				.first {
					font-family: PingFang SC;
					font-size: 24rpx;
					font-weight: normal;
					line-height: 24rpx;
					letter-spacing: normal;
					color: #ffffff;
				}
			}

			.recharge {
				position: absolute;
				left: 35rpx;
				top: 185rpx;
				width: 577rpx;
				height: 41rpx;
				display: flex;
				flex-direction: column;
				padding: 16rpx 24rpx;
				gap: 20rpx;
				// border: 1px solid #000;
				border-radius: 179px;
				

				// background: linear-gradient(263deg, #ffea7b 0%, #ece5bf 137%);
				.immediately {
					font-family: PingFangSC;
					font-size: 28rpx;
					font-weight: normal;
					line-height: 24rpx;
					letter-spacing: normal;
					color: #3a3d55;
				}
			}

			.discount {
				position: absolute;
				right: 0;
				top: 0;
				width: 50rpx;
				height: 20rpx;
				/* 自动布局 */
				display: flex;
				align-items: center;
				padding: 8rpx 24rpx;
				gap: 4rpx;
				border-radius: 0 24rpx 0 24rpx;
				background: linear-gradient(270deg, #ff3c4a 0%, #f4c24e 107%);

				.break {
					font-family: PingFangSC;
					font-size: 20rpx;
					font-weight: 500;
					letter-spacing: normal;
					color: #ffffff;
				}
			}

			.use-record {
				position: absolute;
				right: 34rpx;
				top: 27rpx;
				display: flex;
				align-items: center;
				// border: 1px solid #000;
				width: 142rpx;
				height: 46rpx;

				.record {
					font-family: PingFang SC;
					font-size: 24rpx;
					font-weight: normal;
					line-height: 24rpx;
					display: flex;
					align-items: center;
					letter-spacing: normal;
					color: #ffffff;
					margin-right: 10rpx;
				}

				.s {
					width: 11rpx;
					height: 18rpx;
				}
			}
		}
	}

	.select-amount {
		padding: 20rpx;
		border-radius: 30rpx 30rpx 0 0;
		background: #ffffff;

		.select {
			font-family: PingFangSC;
			font-size: 32rpx;
			font-weight: 500;
			color: #272427;
		}

		.select-recharge {
			display: flex;
			flex-wrap: wrap;
			margin-bottom: 10rpx;
			justify-content: space-between;

			.recharge {
				width: 125rpx;
				height: 76rpx;
				margin: 10rpx 0;
				/* 自动布局 */
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				padding: 32rpx 44rpx;
				gap: 16rpx;
				z-index: 0;
				border-radius: 16rpx;
				background: #F8F8F8;
				border: 1px solid #F8F8F8;
				

				.s {
					font-family: PingFangSC;
					font-size: 24rpx;
					font-weight: normal;
					line-height: 24rpx;
					letter-spacing: normal;
					color: #9B939A;
				}

			.first {
				display: flex;
				align-items: center;
				gap: 8rpx;

				.integral-icon {
					width: 24rpx;
					height: 24rpx;
				}

				.f {
					font-family: PingFangSC;
					font-size: 40rpx;
					font-weight: 500;
					letter-spacing: normal;
					color: #272427;
				}

					.t {
						font-family: PingFangSC;
						font-size: 24rpx;
						font-weight: 500;
						line-height: 24rpx;
						letter-spacing: normal;
						color: #272427;
						margin-left: 2rpx;
					}
				}
			}

			.recharge2 {
				width: 125rpx;
				height: 76rpx;
				margin: 10rpx  0;
				/* 自动布局 */
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				padding: 32rpx 44rpx;
				gap: 16rpx;
				z-index: 0;
				border-radius: 16rpx;
				background: #fee9f3;
				border: 1px solid #FF0097;

				.s {
					font-family: PingFangSC;
					font-size: 24rpx;
					font-weight: normal;
					line-height: 24rpx;
					letter-spacing: normal;
					color: #FF0097;
				}

				.first {
					.f {
						font-family: PingFangSC;
						font-size: 40rpx;
						font-weight: 500;
						letter-spacing: normal;
						color: #FF0097;
					}

					.t {
						font-family: PingFangSC;
						font-size: 24rpx;
						font-weight: 500;
						line-height: 24rpx;
						letter-spacing: normal;
						color: #FF0097;
						margin-left: 2rpx;
					}
				}
			}
		}

		.recharge-method {
			display: flex;
			flex-direction: column;

			.wechat {
				height: 58px;
				/* 自动布局 */
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 12px;
				border-radius: 8px;
				box-sizing: border-box;
				border: 1px solid #ececec;
				margin-top: 30rpx;
			}

			.select {
				display: flex;
				align-items: center;

				.w {
					width: 48rpx;
					height: 48rpx;
				}

				.x {
					font-family: PingFangSC;
					font-size: 30rpx;
					font-weight: 500;
					line-height: 16px;
					letter-spacing: normal;
					color: #3d3d3d;
					display: flex;
					margin-left: 16rpx;
				}
			}

			.not-selected {
				width: 36rpx;
				height: 36rpx;
			}
		}

		.remk-reservation {
			position: fixed;
			width: 100%;
			bottom: 0;
			left: 0;
			height: 150rpx;
			background: #fff;
			display: flex;
			padding-top: 12rpx;
			// align-items: center;
			justify-content: center;
			box-shadow: 0px 0px 22px 0px rgba(0, 0, 0, 0.1);
			border-radius: 16px 16px 0px 0px;

			.rese-bom {
				width: calc(100vw - 48rpx);
				height: 48px;
				/* 自动布局 */
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 12px;
				// gap: 10px;
				z-index: 0;
				border-radius: 100px;
				box-sizing: border-box;
				/* 主色1 */
				border: 1px solid #FE019B;
				background-color: #FE019B;
				color: #fff;

				.l {
					font-family: PingFang SC;
					font-size: 16px;
					font-weight: normal;
					line-height: 16px;
					text-align: center;
					letter-spacing: normal;
					/* 主色1 */
					color: #FE019B;
				}
			}
		}
	}
</style>

