<template>
  <view>
    <!-- <img style="width: 0%; height: 0%;display: none;" :src="webpUrl"> -->
    <view class="content-container" :class="{ 'fade-out': isFadingOut }" v-if="isVisible && isInitialized">
      <img id="animatedWebp" style="width: 100%; height: 100%" :src="webpUrl" alt="超神特效" />
      <view style="color: #484848;font-size: 19rpx;text-align: center;position: fixed;bottom: 10%;width: 99.5vw;">
        动画结果因设备差异可能会显示异常，获得赏品以（恭喜获得）结果为准</view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    // 移除prizeList props
  },
  data() {
    return {
      isVisible: false, // 控制组件显示/隐藏
      isInitialized: false, // 控制是否已初始化
      webpUrl: "https://youdas-1308826010.cos.ap-shanghai.myqcloud.com/static/image/lucky/grand.webp",
      isFadingOut: false, // 控制淡出动画
    };
  },
  computed: {},
  methods: {
    // 初始化老虎机组件
    init() {
      this.isInitialized = true;
      this.webpUrl = "";
    },
    playWebP() {
      const webpImg = document.getElementById("animatedWebp");
      // 重新加载图片实现从头播放
      webpImg.src = ""; // 先清空
      webpImg.src = "https://youdas-1308826010.cos.ap-shanghai.myqcloud.com/static/image/lucky/grand.webp"; // 重新设置相同的URL
      webpImg.style.animationPlayState = "running";
      if (this.bgmCtx && this.bgmCtx.csBgm) {
        this.bgmCtx.csBgm.seek(0);
        this.bgmCtx.csBgm.play();
      }
    },

    pauseWebP() {
      const webpImg = document.getElementById("animatedWebp");
      webpImg.style.animationPlayState = "paused";
    },
    // 显示老虎机组件
    show() {
      if (!this.isInitialized) {
        console.error("尚未初始化，请先调用init方法");
        return this;
      }
      this.isVisible = true;
      this.isFadingOut = false; // 重置淡出状态
      this.webpUrl =
        "https://youdas-1308826010.cos.ap-shanghai.myqcloud.com/static/image/lucky/grand.webp?v=" + new Date().getTime();
      this.audioManager.playCsBgm();
      // 设置动画结束后的淡出效果
      setTimeout(() => {
        // 开始淡出动画
        this.isFadingOut = true;
        // 等待淡出动画完成后再隐藏组件
        setTimeout(() => {
          this.audioManager.stop();
          this.isVisible = false;
          this.$emit("end");
        }, 400); // 淡出动画持续800ms

      }, 3800); // 4秒后开始淡出（总时间仍维持在4.2秒左右）

      return this;
    },
  },
  mounted() {
    // 不再自动初始化
  },
};
</script>

<style lang="scss" scoped>
// 内容容器样式
.content-container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  //background-image: url('https://youdas-1308826010.cos.ap-shanghai.myqcloud.com/static/image/lucky/grand.webp');
  background-size: cover;
  background-position: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  opacity: 1;
  transition: opacity 0.8s ease;
}

// 淡出动画样式
.fade-out {
  opacity: 0;
}
</style>
