<template>
	<view class="test-page">
		<view class="page-title">测试页面 - MonthGift 组件</view>
		
		<!-- 测试控制面板 -->
		<view class="test-controls">
			<view class="control-section">
				<text class="control-title">组件切换</text>
				<view class="component-buttons">
					<button 
						v-for="component in components" 
						:key="component.value"
						class="component-btn"
						:class="{ active: currentComponent === component.value }"
						@click="switchComponent(component.value)"
					>
						{{ component.label }}
					</button>
				</view>
			</view>
			
			<view class="control-section">
				<text class="control-title">用户等级设置</text>
				<view class="level-buttons">
					<button 
						v-for="level in userLevels" 
						:key="level.value"
						class="level-btn"
						:class="{ active: currentUserLevel === level.value }"
						@click="setUserLevel(level.value)"
					>
						{{ level.label }}
					</button>
				</view>
			</view>
			
		
		</view>
		
		<view class="component-container">
			<!-- MonthGift 组件 -->
			<MonthGift 
				v-if="currentComponent === 'monthGift'" 
				:current-level="currentUserLevel" 
				ref="monthGiftRef" 
			/>
			
			<!-- YearGift 组件 -->
			<YearGift 
				v-if="currentComponent === 'yearGift'" 
				:current-level="currentUserLevel" 
				ref="yearGiftRef" 
			/>
			
			<!-- BabyClass 组件 -->
			<BabyClass 
				v-if="currentComponent === 'babyClass'" 
				:current-level="currentUserLevel" 
				ref="babyClassRef" 
			/>
		</view>
		
		<view class="page-info">
			<p class="info-title">组件信息</p>
			<p>当前展示：{{ getCurrentComponentInfo().title }}</p>
			<p>{{ getCurrentComponentInfo().description }}</p>
			<p>包含五个等级：黄金、铂金、钻石、星光、星耀（从低到高）</p>
			<p class="usage-info">使用方法：通过控制面板切换组件和用户等级，组件会根据等级动态显示对应页面</p>
			<p class="note">注意：由于图片资源未配置，部分图片可能无法显示</p>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import BabyClass from '../../components/pointRightsCom/babyClass.vue';
import YearGift from '../../components/pointRightsCom/yearGift.vue';
import MonthGift from '../../components/pointRightsCom/monthGift.vue';

// 用户等级选项
const userLevels = [
	{ label: '黄金', value: 'gold' },
	{ label: '铂金', value: 'platinum' },
	{ label: '钻石', value: 'diamond' },
	{ label: '星光', value: 'starlight' },
	{ label: '星耀', value: 'starshine' }
]

const currentUserLevel = ref('diamond')
const monthGiftRef = ref(null)

// 组件切换选项
const components = [
	{ label: '月礼包', value: 'monthGift' },
	{ label: '年礼包', value: 'yearGift' },
	{ label: '宝宝权益', value: 'babyClass' }
]

const currentComponent = ref('monthGift')

// 切换组件
const switchComponent = (componentValue) => {
	currentComponent.value = componentValue
	console.log('切换组件到:', componentValue)
}

// 设置用户等级
const setUserLevel = (level) => {
	currentUserLevel.value = level
	console.log('用户等级设置为:', level)
	
	// 这里应该通过props或事件传递给MonthGift组件
	// 暂时通过console输出，实际项目中需要通过组件通信
}



// 获取当前组件的标题和描述
const getCurrentComponentInfo = () => {
	switch (currentComponent.value) {
		case 'monthGift':
			return {
				title: '月礼包权益组件',
				description: '包含好券区域、购买区域、时间状态等'
			}
		case 'yearGift':
			return {
				title: '年礼包权益组件',
				description: '包含好券区域、购买区域、时间状态等'
			}
		case 'babyClass':
			return {
				title: '宝宝权益组件',
				description: '包含好券区域、购买区域、时间状态等'
			}
		default:
			return {
				title: '未知组件',
				description: '请切换到具体组件查看'
			}
	}
}
</script>

<style lang="less" scoped>
.test-page {
	width: 100%;
	min-height: 100vh;
	background-color: #f5f5f5;
	display: flex;
	flex-direction: column;
	align-items: center;
	// padding: 20rpx;
	box-sizing: border-box;
	
	.page-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 30rpx;
		text-align: center;
	}
	
	.test-controls {
		width: 100%;
		max-width: 700rpx;
		background-color: #fff;
		padding: 30rpx;
		border-radius: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		margin-bottom: 30rpx;
		
		.control-section {
			margin-bottom: 30rpx;
			
			&:last-child {
				margin-bottom: 0;
			}
			
			.control-title {
				display: block;
				font-size: 28rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 20rpx;
			}
			
			.component-buttons, .level-buttons, .time-buttons {
				display: flex;
				flex-wrap: wrap;
				gap: 20rpx;
				
				.component-btn, .level-btn, .time-btn {
					padding: 20rpx 30rpx;
					border: 2rpx solid #e0e0e0;
					border-radius: 25rpx;
					background-color: #fff;
					color: #666;
					font-size: 26rpx;
					transition: all 0.3s ease;
					
					&.active {
						border-color: #FF6B6B;
						background-color: #FF6B6B;
						color: #fff;
					}
					
					&:active {
						transform: scale(0.95);
					}
				}
				
				.component-btn {
					&.active {
						border-color: #4ECDC4;
						background-color: #4ECDC4;
						color: #fff;
					}
				}
			}
			
			.reset-btn {
				width: 100%;
				padding: 25rpx;
				border: 2rpx solid #FF6B6B;
				border-radius: 25rpx;
				background-color: #fff;
				color: #FF6B6B;
				font-size: 28rpx;
				font-weight: bold;
				transition: all 0.3s ease;
				
				&:active {
					background-color: #FF6B6B;
					color: #fff;
					transform: scale(0.98);
				}
			}
		}
	}
	
	.component-container {
		width: 750rpx;
		height: 1384rpx;
		position: relative;
		margin-bottom: 30rpx;
		// background-color: #fff;
		border-radius: 20rpx;
		// overflow: hidden;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
		
		// 添加组件切换动画
		.component-fade-in {
			animation: fadeIn 0.3s ease-in-out;
		}
	}
	
	@keyframes fadeIn {
		from {
			opacity: 0;
			transform: translateY(20rpx);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
	
	.page-info {
		width: 100%;
		max-width: 700rpx;
		background-color: #fff;
		padding: 30rpx;
		border-radius: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		
		.info-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			text-align: center;
			margin-bottom: 20rpx;
		}
		
		p {
			font-size: 28rpx;
			color: #666;
			line-height: 1.6;
			margin: 10rpx 0;
			text-align: center;
		}
		
		.usage-info {
			color: #555;
			font-style: italic;
			margin-top: 10rpx;
			padding: 10rpx;
			background-color: #f0f0f0;
			border-radius: 8rpx;
			border-left: 4rpx solid #666;
		}
		
		.note {
			color: #ff6b6b;
			font-weight: 500;
			margin-top: 20rpx;
			padding: 20rpx;
			background-color: #fff5f5;
			border-radius: 10rpx;
			border-left: 4rpx solid #ff6b6b;
		}
	}
}
</style>
