<template>
	<view class="content">
		<view class="remain">
			<text class="label">我的剩余次数：</text>
			<text class="count">0</text>
		</view>
		<view class="listBox">
			<view class="custom">
				<text class="text">自定义</text>
				<input class="input" type="number" v-model="count" placeholder="请输入购买数量" />
			</view>
			
			<view class="list flex">
				<view @click="changeCount(index)" :class="{action:count==item}" class="item flex" 
					v-for="(item,index) in countList">
					<text>{{item}}次</text>
				</view>
			</view>
			
			<view class="estimate">
				<text>预计需{{estimatedPoints}}积分</text>
			</view>
		</view>
		
		<view class="points-info" @click="navToRecharge">
			<view class="left flex">
				<text>积分支付(余额:300)</text>
			</view>
			<view class="right flex">
				<text>充值积分</text>
				<image class="arrow" src="../../../static/icon/next1.png" mode="widthFix"></image>
			</view>
		</view>
		
		<view class="buy-btn" @click="buy">立即购买</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				actionIndex: 0, //当前选中的次数索引
				count: 10, //购买次数
				countList: [10, 20, 30, 40, 50, 60], //预设次数选项
				pointsPerCount: 20, //每次需要的积分
			};
		},
		computed: {
			estimatedPoints() {
				return this.count * this.pointsPerCount;
			}
		},
		methods: {
			// 跳转
			navTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			// 跳转到充值积分页面
			navToRecharge() {
				this.navTo('/pages/user/jf/jfcz');
			},
			// 选择次数
			changeCount(ind) {
				this.actionIndex = ind;
				this.count = this.countList[ind];
			},
			// 购买
			buy() {
				if (!this.count || this.count <= 0) {
					uni.showModal({
						title: '提示',
						content: '请输入有效的购买次数',
						showCancel: false
					});
					return;
				}
				
				// 这里可以添加购买逻辑
				uni.showToast({
					title: '购买成功',
					icon: 'success'
				});
				
				// 购买成功后返回
				setTimeout(() => {
					this.navBack();
				}, 1500);
			}
		}
	};
</script>

<style lang="scss">
	page {
		height: 100%;
		background-color: #F5F5F5;
	}

	.content {
		min-height: 100%;
	}

	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		height: 80rpx;
		background-color: #FFFFFF;
		
		.back {
			width: 40rpx;
			height: 40rpx;
			
			image {
				width: 100%;
				height: 100%;
			}
		}
		
		.title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
		}
		
		.right {
			width: 40rpx;
		}
	}

	.remain {
		padding: 30rpx;
		background-color: #FFFFFF;
		
		.label {
			font-size: 28rpx;
			color: #666666;
		}
		
		.count {
			font-size: 28rpx;
			font-weight: bold;
			color: #f55586;
			margin-left: 10rpx;
		}
	}

	.listBox {
		margin: 30rpx 0;
		margin-top: 20rpx;
		padding: 30rpx;
		background-color: #FFFFFF;
		position: relative;
	}

	.custom {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 30rpx;
		
		.text {
			font-size: 28rpx;
			color: #333333;
		}
		
		.input {
			width: 200rpx;
			height: 60rpx;
			border-radius: 10rpx;
			padding: 0 20rpx;
			font-size: 28rpx;
			text-align: right;
			color: #333333;
		}
	}

	.list {
		flex-wrap: wrap;
		
		.item {
			justify-content: center;
			align-items: center;
			width: 30%;
			height: 80rpx;
			margin-bottom: 20rpx;
			margin-right: 5%;
			background-color: #F5F5F5;
			border-radius: 10rpx;
			font-size: 28rpx;
			color: #666666;
			
			&:nth-child(3n) {
				margin-right: 0;
			}
			
			&.action {
				background-color: #f55586;
				color: #FFFFFF;
			}
		}
	}

	.estimate {
		margin-top: 30rpx;
		text-align: right;
		font-size: 26rpx;
		color: #f55586;
	}

	.points-info {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx;
		background-color: #FFFFFF;
		margin-top: 20rpx;
		
		.left {
			align-items: center;
			
			.icon {
				width: 40rpx;
				height: 40rpx;
				margin-right: 10rpx;
			}
			
			text {
				font-size: 28rpx;
				color: #333333;
			}
		}
		
		.right {
			align-items: center;
			
			text {
				font-size: 26rpx;
				color: #f55586;
				margin-right: 10rpx;
			}
			
			.arrow {
				width: 20rpx;
				height: 20rpx;
			}
		}
	}

	.buy-btn {
		margin: 50rpx 30rpx;
		height: 90rpx;
		background-color: #f55586;
		border-radius: 45rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>