<template>
  <div class="box" :style="{ zIndex: hidden ? 1 : 999 }">
    <div class="animation-container">
      <!-- 添加绝对定位的图片 -->
      <img
        class="animation-img cover"
        :src="imageList[0]"
        :hidden="!showCover"
      />
      <div class="animation-img-container" :hidden="showCover || isTemplate">
        <img
          class="animation-img"
          v-for="(item, index) in imageList"
          :src="item"
          :hidden="currentFrame !== index"
          @load="handleImageLoad"
        />
      </div>
      <img
        :class="isTemplate ? 'header' : 'header headerMove'"
        :src="headerImg"
        :hidden="!showHeader"
      />
    </div>
  </div>
</template>
<script>
export default {
  props: ["isTemplate"],
  components: {},
  data() {
    return {
      imageList: [
        "https://img10.360buyimg.com/imgzone/jfs/t1/233762/18/4859/30782/6568262bF0f86b188/d23593222c2a19fe.jpg",
        "https://img10.360buyimg.com/imgzone/jfs/t1/236325/13/5126/30402/6568262fFb81928e5/d858aac652a0f0fc.jpg",
        "https://img10.360buyimg.com/imgzone/jfs/t1/190007/32/42037/28340/65682636F210b90a8/5d25880d7dbe2d7c.jpg",
        "//img10.360buyimg.com/imgzone/jfs/t1/88734/31/48090/2477/655725a9F69d06165/0bd932fad030ef15.png"
      ],
      currentFrame: 0, // 当前显示的帧索引
      frameCount: 0, // 已加载的帧数量
      frameWidth: 0, // 单帧宽度，用于计算背景位置
      showCover: true, // 添加showCover属性
      duration: 3000,
      timer: null,
      headerImg:
        "//img10.360buyimg.com/imgzone/jfs/t1/225677/21/5390/184545/65680404F26ca0bf8/75637a3e60d5b905.png",
      showHeader: false,
      hidden: false,
      acImageList: [
        "//img10.360buyimg.com/imgzone/jfs/t1/182786/40/40949/380588/655ac681F01fcf16d/381937a7b76a1bf1.png",
        "//img10.360buyimg.com/imgzone/jfs/t1/227409/18/3632/95655/6556d91fF6394d569/8a5d32bd7694ab1b.png",
        "//img10.360buyimg.com/imgzone/jfs/t1/234244/32/2824/46057/6556d91eF2ec5b011/6618700217d2bab6.png",
        "//img10.360buyimg.com/imgzone/jfs/t1/178366/1/38909/7291/6556e25bFaf9af3c7/6dc450224d6eb9b0.png",
        "//img10.360buyimg.com/imgzone/jfs/t1/194869/34/42635/17497/655725aaF9673c570/9d98e18f584c1336.png",
        "//img10.360buyimg.com/imgzone/jfs/t1/225677/21/5390/184545/65680404F26ca0bf8/75637a3e60d5b905.png"
      ],
      preloadImgstate: false //预加载图片状态
    };
  },
  created() {
    // this.preloadImages(this.acImageList, () => {
    //   this.preloadImgstate = true;
    //   this.handleImageLoad();
    // });
  },
  mounted() {
    // this.initDatas();
  },
  destroyed() {
    clearTimeout(this.animationTimer);
  },
  methods: {
    // 活动图片预加载（例背景图、主KV图等）
    preloadImages(imageUrls, callback) {
      let loadedImages = 0;
      for (let i = 0; i < imageUrls.length; i++) {
        let img = new Image();
        img.onload = function() {
          loadedImages++;
          if (loadedImages === imageUrls.length) {
            callback();
          }
        };
        img.src = imageUrls[i];
      }
    },
    // 图片加载完成时的回调
    handleImageLoad() {
      console.log("===", this.isTemplate);
      if (this.isTemplate) {
        this.hidden = true;
        this.showCover = false;
        this.showHeader = true;
      } else {
        this.frameCount = this.frameCount + 1;
        // 当所有图片加载完成后，开始播放动画
        if (this.frameCount === this.imageList.length) {
          this.startAnimation();
        }
      }
    },
    // 开始播放动画
    startAnimation() {
      const frameDuration = this.duration / this.imageList.length;
      this.showCover = false;
      const nextFrame = () => {
        if (this.currentFrame >= this.imageList.length) {
          clearInterval(this.timer);
          this.showHeader = true;
          setTimeout(() => {
            this.hidden = true;
          }, 2000);
        } else {
          this.currentFrame = this.currentFrame + 1;
        }
      };
      this.timer = setInterval(nextFrame, frameDuration);

      // const nextFrame = () => {
      //   const newIndex = (this.currentFrame + 1) % this.imageList.length;
      //   this.currentFrame = newIndex

      //   this.animationTimer = setTimeout(nextFrame, frameDuration);
      //   // 当第一轮动画播放结束时，隐藏绝对定位的图片
      //   if (newIndex === 0 && this.showCover) {
      //     this.showCover = false
      //   }

      // };

      // nextFrame();
    }
  }
};
</script>
<style lang="scss" scoped>
.animation-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.animation-img-container {
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.animation-img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.cover {
  position: absolute;
  top: 0;
  left: 0;
}

.box {
  width: 100%;
  height: 100vh;
  position: absolute;
  // background-repeat: no-repeat;
  // background-size: 100% 100%;
  top: 0;
  left: 0;
  // animation-name: move;
  // animation-duration: 4s;
  z-index: 999;
}

.header {
  width: 6.44rem;
  height: 3.09rem;
  position: absolute;
  top: 0.54rem;
  left: calc(50% - 3.22rem);
}

.headerMove {
  animation-name: headerDown;
  animation-duration: 2s;
  animation-timing-function: ease-out;
}

@keyframes headerDown {
  0% {
    top: -6.44rem;
  }

  50% {
    top: 0.46rem;
  }

  70% {
    top: 0.3rem;
  }

  100% {
    top: 0.54rem;
  }
}
</style>
