<template>
	<!-- <uni-nav-bar
		left-icon="left" 
		title="购买积分" 
		@clickLeft="goBack" 
		fixed 
		color="#8B2316" 
		height="180rpx" 
		:border="false" 
		backgroundColor="#eeeeee"
	></uni-nav-bar> -->
	<navBar :title="'购买积分'" ></navBar>
	<view class="buy-point-page">
		

		<!-- 主要内容区域 -->
		<view class="main-content">
			<!-- 页面标题 -->
			<view class="page-title">购买积分</view>
			
			<!-- 积分套餐选择 -->
			<view class="package-grid">
				<view 
					class="package-item" 
					:class="{ active: selectedPackage === pkg.id }"
					v-for="pkg in packages" 
					:key="pkg.id"
					@click="selectPackage(pkg.id)"
				>
					<text class="package-points">{{ pkg.points }}</text>
				</view>
			</view>
             <view class="bar"></view>
			<!-- 所需金额显示 -->
			<view class="amount-section">
				<view class="amount-row">
					<text class="amount-label">所需金额</text>
					<text class="amount-value">¥{{ selectedPackageData.price }}</text>
				</view>
			</view>
		</view>

		<!-- 底部购买按钮 -->
		<view class="bottom-actions">
			<view class="buy-btn" @click="confirmPurchase">
				<text class="btn-text">立即购买</text>
			</view>
		</view>
	</view>
	<unidialog
    :visible="freeVisible"
    :content="freeContent"
    @close="freeClose"
    @confirm="freeConfirm"
  ></unidialog>
</template>

<script setup>
	import { ref, computed } from 'vue';
	import api from '@/api/api';
	import { onLoad } from '@dcloudio/uni-app';
	import unidialog from '@/components/dialog/dialog.vue';
	import navBar from '@/components/navBar/navBar.vue';
	const freeVisible = ref(false);
	const freeContent = ref('您确定是否购买？');
	const freeClose = () => {
		freeVisible.value = false;
	};
	const freeConfirm = () => {
		freeVisible.value = false;
		api.createBointsOrder({
			point: selectedPackageData.value.points
		}).then(res => {
			if(res.code==200){
				uni.sendNativeEvent('payPonitPage', {
            msg: {
              "price":res.data.amount,
              "order_id":res.data.order_id,
			  "trade_no":res.data.trade_no,
			  'jifen':res.data.point,
            },
             });
			}
		});
	};
	onLoad(() => {
		getPointUnitPrice();
	});
   const pointUnitPrice = ref(1);
	// 积分套餐数据 - 根据图片显示5个选项
	const packages = ref([
		{ id: 1, points: 500, price: 500*pointUnitPrice.value/100 },
		{ id: 2, points: 1000, price: 1000*pointUnitPrice.value/100 },
		{ id: 3, points: 2500, price: 2500*pointUnitPrice.value/100 },
		{ id: 4, points: 5000, price: 5000*pointUnitPrice.value/100 },
		{ id: 5, points: 10000, price: 10000*pointUnitPrice.value/100 }
	]);

const getPointUnitPrice = () => {
	api.getPointUnitPrice().then(res => {
		if(res.code==200){
			pointUnitPrice.value=Number(res.data);
			console.log(pointUnitPrice.value);
			packages.value.forEach(pkg => {
				pkg.price = pkg.points * pointUnitPrice.value / 100;
			});
		}
	});
};
	// 选择状态
	const selectedPackage = ref(0); // 默认未选择

	// 计算属性
	const selectedPackageData = computed(() => {
		if (selectedPackage.value === 0) {
			return { points: 0, price: '0.00' };
		}
		return packages.value.find(p => p.id === selectedPackage.value) || { points: 0, price: '0.00' };
	});

	// 方法
	const goBack = () => {
		uni.navigateBack({
			fail() {
				uni.redirectTo({
					url: '/pages/index/index'
				});
			}
		});
	};

	const selectPackage = (packageId) => {
		selectedPackage.value = packageId;
	};

	const confirmPurchase = () => {
		if (selectedPackage.value === 0) {
			uni.showToast({
				title: '请选择积分套餐',
				icon: 'none'
			});
			return;
		}

		const packageData = selectedPackageData.value;
		freeVisible.value=true;
	};
</script>

<style lang="scss" scoped>
	// 变量定义
	$bg-color: #ffffff;
	$text-primary: #333333;
	$text-secondary: #666666;
	$text-light: #999999;
	$border-color: #e5e5e5;
	$white: #ffffff;
	$theme-color: #e74c3c;
	$teal-color: #00cbc0;
	$light-teal: #e6f7f6;

	// 混合器
	@mixin flex-center {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	@mixin flex-between {
		display: flex;
		align-items: center;
		justify-content: space-between;
		
	}

	.buy-point-page {
		height: 100vh;
		background-color: $bg-color;
		overflow: hidden; // 隐藏滚动条
		
		.bar{
			width:100%;
			height: 20rpx;
			background:#eeeeee;
		}
	}

	.status-bar {
		height: 44rpx;
		background-color: $white;
		@include flex-between;
		padding: 0 30rpx;
		font-size: 24rpx;
		color: $text-primary;

		.status-left {
			display: flex;
			align-items: center;
			gap: 20rpx;

			.time {
				font-weight: 500;
			}

			.app-icons {
				display: flex;
				gap: 8rpx;

				.app-icon {
					width: 24rpx;
					height: 24rpx;
					border-radius: 4rpx;
					@include flex-center;
					font-size: 16rpx;
					color: $white;

					&.blue { background-color: #007aff; }
					&.red { background-color: #ff3b30; }
					&.red-white { background-color: #ff3b30; }
				}
			}
		}

		.status-right {
			display: flex;
			align-items: center;
			gap: 20rpx;

			.network-info,
			.signal,
			.wifi,
			.battery {
				font-size: 22rpx;
			}
		}
	}

	.header {
		height: 88rpx;
		background-color: $white;
		@include flex-between;
		padding: 0 30rpx;
		border-bottom: 1rpx solid $border-color;

		.header-left {
			.back-btn {
				font-size: 48rpx;
				color: $theme-color;
				font-weight: bold;
			}
		}

		.header-center {
			.title {
				font-size: 36rpx;
				color: $theme-color;
				font-weight: bold;
			}
		}
	}

	.main-content {
		margin-top: calc(var(--status-bar-height) + 44px);
		padding: 40rpx 0rpx;

		.page-title {
			font-size: 36rpx;
			color: $text-primary;
			font-weight: normal;
			padding:0 30rpx;
			margin-bottom: 60rpx;
			text-align: left;
		}

		.package-grid {
			display: grid;
			padding:0 30rpx;
			grid-template-columns: repeat(3, 1fr);
			gap: 30rpx;
			margin-bottom: 80rpx;

			// 第一行3个，第二行2个
			

			.package-item {
				height: 120rpx;
				border: 2rpx solid $teal-color;
				border-radius: 16rpx;
				@include flex-center;
				background-color: $white;
				transition: all 0.3s ease;
				cursor: pointer;

				&.active {
					background-color: $teal-color;
					border-color: $teal-color;

					.package-points {
						color: $white;
					}
				}

				.package-points {
					font-size: 36rpx;
					color: $teal-color;
					font-weight: normal;
				}
			}
		}

		.amount-section {
			.amount-row {
				@include flex-between;
				padding: 30rpx;
				

				.amount-label {
					font-size: 32rpx;
					color: $text-primary;
					font-weight: normal;
				}

				.amount-value {
					font-size: 36rpx;
					color: $theme-color;
					font-weight: normal;
				}
			}
		}
	}

	.bottom-actions {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: $white;
	
		z-index: 100;

		.buy-btn {
			background-color: $teal-color;
			
			height: 88rpx;
			@include flex-center;
			cursor: pointer;

			.btn-text {
				color: $white;
				font-size: 32rpx;
				
			}
		}
	}
</style>