<template>
  <view class="gif-container">
    <view class="dynamic-container">
      <image 
        :src="gifSrc" 
        mode="widthFix"
        class="gif-image"
        :style="{ display: isPlaying ? 'block' : 'none' }"
        @load="startGifPlay"
      ></image>
      <image 
        :src="staticCover" 
        mode="widthFix"
        class="gif-image"
        :style="{ display: isPlaying ? 'none' : 'block' }"
      ></image>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    // GIF图片路径
    gifSrc: {
      type: String,
      required: true
    },
    // 静态封面图
    staticCover: {
      type: String,
      default: ''
    },
    // GIF播放时长(毫秒)
    duration: {
      type: Number,
      default: 2000
    }
  },
  data() {
    return {
      isPlaying: false,
      playTimer: null
    }
  },
  methods: {
    // 开始播放GIF
    startGifPlay() {
      this.isPlaying = true;
      
      // 清除之前的定时器
      if (this.playTimer) {
        clearTimeout(this.playTimer);
      }
      
      // 播放完成后显示静态封面
      this.playTimer = setTimeout(() => {
        this.isPlaying = false;
      }, this.duration);
    }
  },
  onUnload() {
    // 页面卸载时清除定时器
    if (this.playTimer) {
      clearTimeout(this.playTimer);
    }
  }
}
</script>

<style scoped>
.gif-container {
  width: 100vw;
  display: flex;
  justify-content: center;
}

.gif-image {
  width: 100vw;
  height: auto;
}

.dynamic-container {
  position: relative;
  width: 100vw;
  display: flex;
  justify-content: center;
}

.dynamic-container image {
  position: absolute;
  top: 0;
  left: 0;
}
</style>
