<template>
	<div>
		<img class="top-img" :src="currentImgSrc" alt="" />
		<img class="top-img" v-for="(imgSrc, index) in imgList" :key="index" :src="imgSrc" alt=""
			style="display: none;" />
	</div>
	<!-- <img :src="currentImgSrc" mode="" class="raffle-img" /> -->
</template>

<script>
	export default {
		data() {
			return {
				currentFrameIndex: 0,
				imgList: ['static/an/top/1.png', 'static/an/top/2.png', 'static/an/top/3.png', 'static/an/top/4.png',
					'static/an/top/5.png', 'static/an/top/6.png', 'static/an/top/7.png', 'static/an/top/8.png',
					'static/an/top/9.png', 'static/an/top/10.png', 'static/an/top/11.png', 'static/an/top/12.png',
					'static/an/top/13.png', 'static/an/top/14.png', 'static/an/top/15.png', 'static/an/top/16.png',
					'static/an/top/17.png', 'static/an/top/18.png', 'static/an/top/19.png', 'static/an/top/20.png',
					'static/an/top/21.png', 'static/an/top/22.png', 'static/an/top/23.png', 'static/an/top/24.png',
					'static/an/top/25.png', 'static/an/top/26.png', 'static/an/top/27.png', 'static/an/top/28.png',
					'static/an/top/29.png', 'static/an/top/30.png', 'static/an/top/31.png', 'static/an/top/32.png',
					'static/an/top/33.png', 'static/an/top/34.png', 'static/an/top/35.png', 'static/an/top/36.png',
					'static/an/top/37.png', 'static/an/top/38.png', 'static/an/top/39.png', 'static/an/top/40.png',
					'static/an/top/41.png', 'static/an/top/42.png', 'static/an/top/43.png', 'static/an/top/44.png',
					'static/an/top/45.png', 'static/an/top/46.png', 'static/an/top/47.png', 'static/an/top/48.png'
				],
				delay: 40,
				timer:null
			};
		},
		computed: {
			currentImgSrc() {
				return this.imgList[this.currentFrameIndex];
			}
		},
		mounted() {
			// this.animateFrames();
			this.startAnimation();
		},
		methods: {
			startAnimation() {
				this.timer = setInterval(() => {
					this.currentFrameIndex = (this.currentFrameIndex + 1) % this.imgList.length;
				}, this.delay);
			},
			// animateFrames() {
			//       const img = document.querySelector(".raffle-img");
			//       const animation = () => {
			//         // 切换到下一帧图片
			//         this.currentFrame = (this.currentFrame + 1) % this.imgCount;
			//         // 如果当前帧已加载过，则直接跳过
			//         if (this.loadedFrames.includes(this.currentFrame)) {
			//           return;
			//         }
			//         img.src = `${this.basePath}${this.currentFrame}.png`;
			//         img.onload = () => {
			//           // 将已加载的图片索引存入数组
			//           this.loadedFrames.push(this.currentFrame);
			//         };
			//       };
			//       setInterval(animation, this.delay);
			//     },
			// animateFrames() {
			//       const img = document.querySelector(".raffle-img");
			//       const animation = () => {
			//         // 切换到下一帧图片
			//         this.currentFrame = (this.currentFrame + 1) % this.imgCount;
			//         // 如果当前帧已加载过，则直接跳过
			//         if (this.loadedFrames.includes(this.currentFrame)) {
			//           return;
			//         }
			//         img.src = `${this.basePath}${this.currentFrame}.png`;
			//         img.onload = () => {
			//           // 将已加载的图片索引存入数组
			//           this.loadedFrames.push(this.currentFrame);
			//         };
			//       };
			//       // 清除之前的定时器
			//       clearInterval(this.animationInterval);
			//       // 启动新的定时器
			//       this.animationInterval = setInterval(animation, this.delay);
			//     },
			animateFrames() {
				const img = document.querySelector(".raffle-img");
				const animation = () => {
					// 切换到下一帧图片
					this.currentFrame = (this.currentFrame + 1) % this.imgCount;
					// 如果当前帧已加载过，则直接跳过
					if (this.loadedFrames.includes(this.currentFrame)) {
						return;
					}
					img.onload = () => {
						// 将已加载的图片索引存入数组
						this.loadedFrames.push(this.currentFrame);
						// 等待当前图片加载完成后再启动下一帧动画
						this.animationInterval = setTimeout(() => {
							animation();
						}, this.delay);
					};
					img.src = `${this.basePath}${this.currentFrame}.png`;
				};
				// 启动动画
				animation();
			},
		},
		
		onUnload() {
			// 在页面离开时清除定时器
			clearInterval(this.timer)
		},
		beforeDestroy() {
			// 组件销毁时清除定时器，防止内存泄漏
			// clearInterval(this.animationInterval);
		},
		// mounted() {
		// 	const img = document.getElementsByClassName("raffle-img")[0]
		// 	const delay = 40
		// 	const imgCount = 64
		// 	const animationRaffle = (i) => {
		// 		if (i === imgCount) {
		// 			animationRaffle(0)
		// 			return
		// 		}
		// 		img.src = `static/an/raffle/${i}.png`
		// 		img.onload = () => {
		// 			setTimeout(() => {
		// 				animationRaffle(i + 1)
		// 			}, delay);
		// 		}
		// 	}
		// 	animationRaffle(0)
		// }
	}
</script>

<style lang="scss" scoped>
	.top-img {
		width: 750rpx;
		object-fit: contain;
		// height: 305rpx;
		// position: absolute;
		// top: 360rpx;
	}

	#id {
		position: absolute;
		top: -40rpx;
		width: 750rpx;
		height: 520rpx;
		border: 1px solid red;
	}

	.bubble-icon {
		position: absolute;
		top: -40rpx;
		width: 750rpx;
		height: 520rpx;
		background-image: url('@/static/an/qp/0.png');
		background-size: cover;
		/* 调整背景图片大小以填充容器 */
		animation-name: bubbleAnimation;
		animation-duration: 10s;
		/* 动画持续时间，根据需要进行调整 */
		animation-timing-function: steps(1);
		/* 动画步进方式，每一帧为一步 */
		animation-iteration-count: infinite;
	}

	$qpCount: 224;

	@keyframes bubbleAnimation {
		@for $i from 0 through $qpCount {
			#{($i * 100%/$qpCount)} {
				background-image: url(@/static/an/qp/#{$i}.png);
			}
		}

	}
</style>