<style>
.num-roll {
  font-size: 48px;
  font-family: "DISPLAYFREETFB";
  font-weight: 400;
  text-align: right;
  height: 48px;
  display: inline-flex;
  position: absolute;
  right: 0;
  top: 0;
  margin-bottom: 5px;
  margin-top: 5px;
}
.num-roll .number {
  height: 50px;
  text-align: right;
  margin-right: 0px;
  overflow: hidden;
  width: 30px;
  position: relative;
}
.num-roll .number .v-line {
  width: 30px;
  position: absolute;
  right: 0px;
  top: 0px;
}
.num-roll .number .v-line span {
  display: block;
  margin-bottom: 50px;
}
.num-roll .dian {
  width: 16px;
  height: 50px;
  margin-right: 0px;
  font-family: 'pingfang'
}
</style>
<template>
  <div class="num-roll" :style="{color:color}">
    <template v-for="(item, index) in len">
      <div class="number" :ref="'number_'+index" :key="index" v-if="item!='.'">
        <div class="v-line" :ref="'line_'+index">
          <span v-for="(num, i) in nums" :key="i">{{num}}</span>
        </div>
      </div>
      <div class="dian" :key="index" v-else>.</div>
    </template>
  </div>
</template>
<script>
require("velocity-animate");
export default {
  props: {
    money: {
      type: String,
      default: "0.00"
    },
    color: {
      type: String,
      default: "#00dbef"
    },
    decimal: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      nums: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
      len: ["0", "0", "0", "0", ".", "0", "0"]
    };
  },
  watch:{
    money:{
      handler: function (val, oldVal) {
        if (val) {
          this.changeData(parseFloat(val));
        }
      }
    }
  },
  mounted() {
    if (!this.decimal) {
      this.len.splice(4, 3);
    }
    setTimeout(() => {
      this.changeData(parseFloat(this.money));
    }, 2000);
    // setInterval(() => {
    //   this.changeData();
    // }, 2000 * 30);
  },
  methods: {
    changeData(money) {
      let decimalCount = 2;
      if (!this.decimal) decimalCount = 0;
      this.initLen(money.toFixed(decimalCount));
    },
    initLen(m) {
      try {
        for (let i = 0; i < m.length; i++) {
          let j = this.len.length - m.length + i;
          if (m[i] != this.len[j]) {
            let dom = this.$refs["number_" + j][0];
            let lineDom = this.$refs["line_" + j][0];
            if (m[i] == "1") dom.style.width = "16px";
            else dom.style.width = "30px";
            Velocity(
              lineDom,
              {
                top: -parseInt(m[i]) * 113 + "px"
              },
              {
                duration: 1000
              }
            );
            this.len[j] = m[i];
          }
        }
        if (this.len.length - m.length > 0) {
          for (let i = 0; i < this.len.length - m.length; i++) {
            let lineDom = this.$refs["line_" + i][0];
            Velocity(
              lineDom,
              {
                top: 100 + "px"
              },
              {
                duration: 2000
              }
            );
          }
        }
      } catch (error) {}
    }
  },
  updated(){
    // this.money = "98"
    // setTimeout(()=>{
    //   this.money = "100"
    // },2000)
  }
};
</script>
