<template>
	<div>
		<img class="raffle-img" :src="currentImgSrc" alt="" />
		    <img class="raffle-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/raffle/0.png', 'static/an/raffle/1.png', 'static/an/raffle/2.png',
					'static/an/raffle/3.png', 'static/an/raffle/4.png', 'static/an/raffle/5.png',
					'static/an/raffle/6.png', 'static/an/raffle/7.png', 'static/an/raffle/8.png',
					'static/an/raffle/9.png', 'static/an/raffle/10.png', 'static/an/raffle/11.png',
					'static/an/raffle/12.png', 'static/an/raffle/13.png', 'static/an/raffle/14.png',
					'static/an/raffle/15.png', 'static/an/raffle/16.png', 'static/an/raffle/17.png',
					'static/an/raffle/18.png', 'static/an/raffle/19.png', 'static/an/raffle/20.png',
					'static/an/raffle/21.png', 'static/an/raffle/22.png', 'static/an/raffle/23.png',
					'static/an/raffle/24.png', 'static/an/raffle/25.png', 'static/an/raffle/26.png',
					'static/an/raffle/27.png', 'static/an/raffle/28.png', 'static/an/raffle/29.png',
					'static/an/raffle/30.png', 'static/an/raffle/31.png', 'static/an/raffle/32.png',
					'static/an/raffle/33.png', 'static/an/raffle/34.png', 'static/an/raffle/35.png',
					'static/an/raffle/36.png', 'static/an/raffle/37.png', 'static/an/raffle/38.png',
					'static/an/raffle/39.png', 'static/an/raffle/40.png', 'static/an/raffle/41.png',
					'static/an/raffle/42.png', 'static/an/raffle/43.png', 'static/an/raffle/44.png',
					'static/an/raffle/45.png', 'static/an/raffle/46.png', 'static/an/raffle/47.png',
					'static/an/raffle/48.png', 'static/an/raffle/49.png', 'static/an/raffle/50.png',
					'static/an/raffle/51.png', 'static/an/raffle/52.png', 'static/an/raffle/53.png',
					'static/an/raffle/54.png', 'static/an/raffle/55.png', 'static/an/raffle/56.png',
					'static/an/raffle/57.png', 'static/an/raffle/58.png', 'static/an/raffle/59.png',
					'static/an/raffle/60.png', 'static/an/raffle/61.png', 'static/an/raffle/62.png',
					'static/an/raffle/63.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>
	.raffle-img {
		width: 750rpx;
		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>