<template>
  <div class="number-box">{{ number }}</div>
</template>
<script>
export default {
  name:'TslNumFlap',
  data() {
    return {
      number: 0,
      timer: null,
    };
  },
  props: {
    valueNumber: {
      default: "0",
      type: [String, Number],
    },
    isProgressive: {
      default: false,
      type: Boolean,
    },
    timeTotal: {
      default: 1500,
      type: Number,
    },
  },
  watch: {
    valueNumber: function (newValue, oldValue) {
      this.NumAutoPlusAnimation(
        {
          time: this.timeTotal,
          num: parseFloat(this.valueNumber),
        },
        oldValue
      );
    },
  },
  mounted() {
    this.NumAutoPlusAnimation(
      {
        time: this.timeTotal,
        num: parseFloat(this.valueNumber),
      },
      0
    );
  },
  methods: {
    NumAutoPlusAnimation(options, initalValue) {
      let finalNum = options.num; //要显示的真实数值
      if (finalNum == 0) {
        return;
      }

      let step = Math.ceil(
        finalNum / (options.time / 30)
      ); /*每30ms增加的数值--*/
      let count = this.isProgressive ? initalValue : 0;
      this.timer = setInterval(() => {
        count += step;
        if (count >= finalNum) {
          clearInterval(this.timer);
          count = finalNum;
        }
        // this.number = Math.floor(count).toLocaleString()
        this.number = count.toLocaleString();
      }, 30);
    },
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
};
</script>
<style scoped>
.number-box {
  display: inline-block;
}
</style>
