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

<script>
	export default {
		data() {
			return {
				delay: 40,
				 currentFrameIndex: 0,
				imgList: ['static/an/xian/0.png', 'static/an/xian/1.png', 'static/an/xian/2.png', 'static/an/xian/3.png',
					'static/an/xian/4.png', 'static/an/xian/5.png', 'static/an/xian/6.png', 'static/an/xian/7.png',
					'static/an/xian/8.png', 'static/an/xian/9.png', 'static/an/xian/10.png', 'static/an/xian/11.png',
					'static/an/xian/12.png', 'static/an/xian/13.png', 'static/an/xian/14.png', 'static/an/xian/15.png',
					'static/an/xian/16.png', 'static/an/xian/17.png', 'static/an/xian/18.png', 'static/an/xian/19.png',
					'static/an/xian/20.png', 'static/an/xian/21.png', 'static/an/xian/22.png', 'static/an/xian/23.png',
					'static/an/xian/24.png', 'static/an/xian/25.png', 'static/an/xian/26.png', 'static/an/xian/27.png',
					'static/an/xian/28.png', 'static/an/xian/29.png', 'static/an/xian/30.png', 'static/an/xian/31.png',
					'static/an/xian/32.png', 'static/an/xian/33.png', 'static/an/xian/34.png', 'static/an/xian/35.png',
					'static/an/xian/36.png', 'static/an/xian/37.png', 'static/an/xian/38.png', 'static/an/xian/39.png',
					'static/an/xian/40.png', 'static/an/xian/41.png', 'static/an/xian/42.png', 'static/an/xian/43.png',
					'static/an/xian/44.png', 'static/an/xian/45.png', 'static/an/xian/46.png', 'static/an/xian/47.png',
					'static/an/xian/48.png', 'static/an/xian/49.png', 'static/an/xian/50.png', 'static/an/xian/51.png',
					'static/an/xian/52.png', 'static/an/xian/53.png', 'static/an/xian/54.png', 'static/an/xian/55.png',
					'static/an/xian/56.png', 'static/an/xian/57.png', 'static/an/xian/58.png', 'static/an/xian/59.png',
					'static/an/xian/60.png', 'static/an/xian/61.png', 'static/an/xian/62.png', 'static/an/xian/63.png',
					'static/an/xian/64.png', 'static/an/xian/65.png', 'static/an/xian/66.png', 'static/an/xian/67.png',
					'static/an/xian/68.png', 'static/an/xian/69.png', 'static/an/xian/70.png', 'static/an/xian/71.png',
					'static/an/xian/72.png', 'static/an/xian/73.png', 'static/an/xian/74.png', 'static/an/xian/75.png',
					'static/an/xian/76.png', 'static/an/xian/77.png', 'static/an/xian/78.png', 'static/an/xian/79.png',
					'static/an/xian/80.png', 'static/an/xian/81.png', 'static/an/xian/82.png', 'static/an/xian/83.png',
					'static/an/xian/84.png', 'static/an/xian/85.png', 'static/an/xian/86.png', 'static/an/xian/87.png',
					'static/an/xian/88.png', 'static/an/xian/89.png', 'static/an/xian/90.png', 'static/an/xian/91.png',
					'static/an/xian/92.png', 'static/an/xian/93.png', 'static/an/xian/94.png', 'static/an/xian/95.png',
					'static/an/xian/96.png', 'static/an/xian/97.png', 'static/an/xian/98.png',
					'static/an/xian/99.png','static/an/xian/100.png','static/an/xian/101.png','static/an/xian/102.png','static/an/xian/103.png','static/an/xian/104.png','static/an/xian/105.png','static/an/xian/106.png','static/an/xian/107.png','static/an/xian/108.png','static/an/xian/109.png',
				],
				timer:null
			}
		},
		computed: {
			// currentImgSrc() {
			// 	return `${this.basePath}${this.currentFrame}.png`;
			// },
			 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(".line-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() {
			//   setInterval(() => {
			//     this.currentFrame = (this.currentFrame + 1) % this.imgCount;
			//   }, this.delay);
			// },
			// animateFrames() {
			//       const img = document.querySelector(".line-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(".line-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("line-img")[0]
		// 	const delay = 40
		// 	const imgCount = 109
		// 	const animationLine = (i) => {
		// 		if (i === imgCount) {
		// 			animationLine(0)
		// 			return
		// 		}
		// 		img.src = `static/an/xian/${i}.png`
		// 		img.onload = () => {
		// 			setTimeout(() => {
		// 				animationLine(i + 1)
		// 			}, delay);
		// 		}
		// 	}
		// 	animationLine(0)
		// }
	}
</script>

<style lang="scss" scoped>
	.line-img {
		width: 100%;
		// height: 500rpx;
		object-fit: contain;
	}
</style>