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

<script>
	import {
		myMixins
	} from "@/mixins/mixins.js";
export default {
  data() {
    return {
      currentFrameIndex: 0,
      imgList: [
        'static/an/btn/0.png', 'static/an/btn/1.png', 'static/an/btn/2.png', 'static/an/btn/3.png',
        'static/an/btn/4.png', 'static/an/btn/5.png', 'static/an/btn/6.png', 'static/an/btn/7.png',
        'static/an/btn/8.png', 'static/an/btn/9.png', 'static/an/btn/10.png', 'static/an/btn/11.png',
        'static/an/btn/12.png', 'static/an/btn/13.png', 'static/an/btn/14.png', 'static/an/btn/15.png',
        'static/an/btn/16.png', 'static/an/btn/17.png', 'static/an/btn/18.png', 'static/an/btn/19.png',
        'static/an/btn/20.png', 'static/an/btn/21.png', 'static/an/btn/22.png', 'static/an/btn/23.png',
        'static/an/btn/24.png', 'static/an/btn/25.png', 'static/an/btn/26.png', 'static/an/btn/27.png',
        'static/an/btn/28.png', 'static/an/btn/29.png', 'static/an/btn/30.png', 'static/an/btn/31.png',
        'static/an/btn/32.png', 'static/an/btn/33.png', 'static/an/btn/34.png', 'static/an/btn/35.png',
        'static/an/btn/36.png', 'static/an/btn/37.png', 'static/an/btn/38.png', 'static/an/btn/39.png',
        'static/an/btn/40.png', 'static/an/btn/41.png', 'static/an/btn/42.png', 'static/an/btn/43.png',
        'static/an/btn/44.png', 'static/an/btn/45.png', 'static/an/btn/46.png', 'static/an/btn/47.png',
        'static/an/btn/48.png', 'static/an/btn/49.png'
      ],
      delay: 40,
	  timer:null
    };
  },
  computed: {
    currentImgSrc() {
      return this.imgList[this.currentFrameIndex];
    }
  },
  watch:{
	  btnTimer(){
		  console.log("this.btnTimerthis.btnTimer:",this.btnTimer)
		  if(this.btnTimer){
			  this.startAnimation();
		  }
	  }
  },
  mounted() {
	
    this.startAnimation();
  },
  methods: {
	  open(){
		  this.$emit('click')
	  },
    startAnimation() {
      this.btnTimer = setInterval(() => {
        this.currentFrameIndex = (this.currentFrameIndex + 1) % this.imgList.length;
      }, this.delay);
    }
  },
  beforeDestroy() {
  	// 在页面离开时清除定时器
  	clearInterval(this.btnTimer)
  }
};
</script>

<style lang="scss" scoped>
	.btn-img {
		width: 576rpx;
		height: 250rpx;
		object-fit: contain;
	}
</style>

