<template>
	<view class="prize-announcement" v-if="announcements && announcements.length > 0" @click="handleClick">
		<!-- 左侧头像区域 -->
		<view class="avatar-container">
			<image 
				class="avatar" 
				:src="currentAnnouncement.userAvatar || defaultAvatar" 
				mode="aspectFill"
				@error="onAvatarError"
			></image>
		</view>
		
		<!-- 右侧装饰图标 -->
		<image 
			class="reward-icon" 
			:src="$img1('common/reward_notice.png')"
		></image>
		
		<!-- 中间公告内容区域 -->
		<view class="content-container">
			<view class="content-bg"></view>
			<!-- 公告文字 - 带动画 -->
			<view class="announcement-text-wrapper">
				<text 
					class="announcement-text" 
					:class="animationClass"
				>{{ formattedText }}</text>
			</view>
		</view>
	</view>
	
	<!-- 空状态：隐藏公告区域或显示默认内容 -->
	<view class="prize-announcement prize-announcement--empty" v-else-if="showEmpty">
		<view class="avatar-container">
			<image class="avatar" :src="defaultAvatar" mode="aspectFill"></image>
		</view>
		<image class="reward-icon" :src="$img1('common/reward_notice.png')"></image>
		<view class="content-container">
			<view class="content-bg"></view>
			<view class="announcement-text-wrapper">
				<text class="announcement-text">暂无中奖公告</text>
			</view>
		</view>
	</view>
</template>

<script>
/**
 * 中奖公告轮播组件
 * 
 * @description 在首页展示中奖公告，支持自动轮播、进出动画、循环展示
 * @property {Array} announcements - 公告列表数据
 * @property {Number} interval - 轮播间隔时间（毫秒），默认4000
 * @property {Boolean} showEmpty - 列表为空时是否显示默认内容，默认false（隐藏）
 * @event {Function} click - 点击公告时触发，返回当前公告数据
 */
export default {
	name: 'PrizeAnnouncement',
	
	props: {
		// 公告列表
		announcements: {
			type: Array,
			default: () => []
		},
		// 轮播间隔时间（毫秒）
		interval: {
			type: Number,
			default: 4000
		},
		// 列表为空时是否显示默认内容
		showEmpty: {
			type: Boolean,
			default: false
		}
	},
	
	data() {
		return {
			currentIndex: 0,           // 当前展示的公告索引
			timer: null,               // 轮播定时器
			animationClass: '',        // 动画类名
			isAnimating: false         // 是否正在执行动画
		};
	},
	
	computed: {
		/**
		 * 默认头像URL
		 */
		defaultAvatar() {
			return this.$img1('common/logo.png');
		},
		
		/**
		 * 当前展示的公告
		 */
		currentAnnouncement() {
			if (!this.announcements || this.announcements.length === 0) {
				return {};
			}
			return this.announcements[this.currentIndex] || {};
		},
		
		/**
		 * 格式化的公告文字
		 * 格式：用户{用户名}抽中了{奖品等级}的{奖品名称}！
		 * Validates: Requirements 3.5
		 */
		formattedText() {
			const { userName, prizeLevel, prizeName } = this.currentAnnouncement;
			if (!userName || !prizeLevel || !prizeName) {
				return '';
			}
			return `用户${userName}抽中了${prizeLevel}的${prizeName}！`;
		}
	},
	
	watch: {
		/**
		 * 监听公告列表变化，重新开始轮播
		 */
		announcements: {
			handler(newVal) {
				this.resetCarousel();
			},
			deep: true
		}
	},
	
	mounted() {
		this.startCarousel();
	},
	
	beforeDestroy() {
		this.stopCarousel();
	},
	
	methods: {
		/**
		 * 开始轮播
		 * Validates: Requirements 3.1
		 */
		startCarousel() {
			// 清除已有定时器
			this.stopCarousel();
			
			// 如果只有一条或没有公告，不需要轮播
			if (!this.announcements || this.announcements.length <= 1) {
				return;
			}
			
			// 设置定时器，每隔 interval 毫秒切换到下一条
			this.timer = setInterval(() => {
				this.nextAnnouncement();
			}, this.interval);
		},
		
		/**
		 * 停止轮播
		 */
		stopCarousel() {
			if (this.timer) {
				clearInterval(this.timer);
				this.timer = null;
			}
		},
		
		/**
		 * 重置轮播
		 */
		resetCarousel() {
			this.currentIndex = 0;
			this.animationClass = '';
			this.isAnimating = false;
			this.startCarousel();
		},
		
		/**
		 * 切换到下一条公告
		 * Validates: Requirements 3.2, 3.3
		 */
		nextAnnouncement() {
			if (this.isAnimating) return;
			if (!this.announcements || this.announcements.length <= 1) return;
			
			this.isAnimating = true;
			
			// 播放退出动画
			this.animationClass = 'slide-out';
			
			// 动画结束后切换内容并播放进入动画
			setTimeout(() => {
				// 计算下一个索引，循环回到第一条
				// Property 5: Carousel Index Cycling - (currentIndex + 1) % length
				this.currentIndex = (this.currentIndex + 1) % this.announcements.length;
				
				// 播放进入动画
				this.animationClass = 'slide-in';
				
				// 动画完成后重置状态
				setTimeout(() => {
					this.animationClass = '';
					this.isAnimating = false;
				}, 300);
			}, 300);
		},
		
		/**
		 * 点击公告
		 */
		handleClick() {
			if (this.currentAnnouncement && this.currentAnnouncement.id) {
				this.$emit('click', this.currentAnnouncement);
			}
		},
		
		/**
		 * 头像加载失败时使用默认头像
		 */
		onAvatarError() {
			// 图片加载失败时，Vue会自动使用默认头像（通过 || defaultAvatar）
		}
	}
};
</script>

<style lang="scss" scoped>
.prize-announcement {
	width: 686rpx;
	height: 100rpx;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 10rpx auto 0;
	
	// 左侧头像容器
	.avatar-container {
		width: 88rpx;
		height: 88rpx;
		background-color: #1e88e5;
		position: absolute;
		border-radius: 50%;
		left: 0;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: center;
		
		.avatar {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			background-color: #ffffff;
		}
	}
	
	// 右侧装饰图标
	.reward-icon {
		width: 84rpx;
		height: 94rpx;
		position: absolute;
		right: 0;
		z-index: 2;
	}
	
	// 中间内容区域
	.content-container {
		width: 566rpx;
		height: 72rpx;
		position: relative;
		display: flex;
		align-items: center;
		overflow: hidden;
		
		.content-bg {
			position: absolute;
			width: 100%;
			height: 100%;
			background: radial-gradient(circle at center, #FFE95B 0%, #FFC402 100%);
			border-radius: 8rpx;
		}
		
		.announcement-text-wrapper {
			position: relative;
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			padding-left: 50rpx;
			padding-right: 20rpx;
			box-sizing: border-box;
			overflow: hidden;
		}
		
		.announcement-text {
			font-size: 26rpx;
			font-weight: bold;
			color: #5a4a2a;
			text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			max-width: 100%;
		}
	}
	
	// 空状态样式
	&--empty {
		opacity: 0.6;
		
		.announcement-text {
			color: #8a7a5a;
		}
	}
}

// 进出动画
.slide-out {
	animation: slideOut 0.3s ease-out forwards;
}

.slide-in {
	animation: slideIn 0.3s ease-out forwards;
}

@keyframes slideOut {
	0% {
		opacity: 1;
		transform: translateY(0);
	}
	100% {
		opacity: 0;
		transform: translateY(-20rpx);
	}
}

@keyframes slideIn {
	0% {
		opacity: 0;
		transform: translateY(20rpx);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}
</style>
