<template>
  <view class="content">
    <!-- num 是字符串，会被切成片渲染 -->
    <view class="l-num" :style="{ width: key === ',' || key === '.' ? '12rpx' : '24rpx' }" v-for="(key, value) in num"
      :key="value">
      <template v-if="key !== '.' && key !== ','">
        <view class="l-son" :style="'transform: translateY(-' + (key * 52) + 'rpx);'">
          <view class="l-num l-posi" v-for="(s, i) in range" :style="'transform: translateY(' + (i * 52) + 'rpx);'" :key="i">
            {{ s }}
          </view>
        </view>
      </template>
      <!-- 小数点 -->
      <view class="l-num l-posi" v-else>{{ key }}</view>
    </view>
  </view>
</template>

<script>

let range = new Array(10).fill(0).map((e, i) => i);

export default {
  data() {
    return {
      num: '0.00',	//当前显示数字
      value: '',	//当前数字
      range: range,//0-9
      turnTime: 100//定时器时间 单位毫秒  可控制数字滚动快慢 数字越高滚动频率越慢
    }
  },
  props: {
    number: {
      type: String,
      default: ''
    }
  },
  watch: {
    number: {
      handler(value) {
        this.value = value;
        this._getNumber();
      },
      immediate: true,
      deep: true
    }
  },
  onLoad() { },
  methods: {

    // 这里是保留两位小数的
    _getNumber() {
      let value = this.value
      let num = this.num;

      if (num == value) {
        return
      }
      // 我的思路是把数字切成一个数组，每个字符对应一个下标
      this.showNumber = num.toString().split('');
      this.nowNumber = value.toString().split('');
      let newShowNumber = []
      let newNowNumber = []

      this.showNumber.forEach(item => {
        if (item !== ',' && item !== '.') {
          newShowNumber.push(Number(item))
        } else {
          newShowNumber.push(item)
        }
      })
      this.nowNumber.forEach(item => {
        if (item !== ',' && item !== '.') {
          newNowNumber.push(Number(item))
        } else {
          newNowNumber.push(item)
        }
      })
      this.showNumber = newShowNumber
      this.nowNumber = newNowNumber

      let sl = this.showNumber.length;
      let ol = this.nowNumber.length;

      let key = sl > ol ? 'nowNumber' : 'showNumber';

      // 这个函数是用来补位的，例如原来是1，新数字是100，那么要给位数少的补位 1 ==> 001
      this._formatNumber(key, sl, ol);

      // 这个是数字变化滚动的具体函数
      this._turnNumber();
    },

    _formatNumber(key, oldV, newV) {
      let length = Math.abs(oldV - newV);
      let arr = new Array(length).fill(0);
      this[key] = arr.concat(this[key]);
    },

    _turnNumber() {

      let _this = this;
      // 循环数字数组，
      _this.showNumber.forEach((e, i) => {
        // 判断对应位数的值，如果相等就跳过
        if (e == _this.nowNumber[i]) return;

        let inter = setInterval(() => {
          // 数值相等后清除定时器
          if (e == _this.nowNumber[_this._index(i)]) {
            clearInterval(inter);
          } else {
            if (e !== ',' && e !== '.') {
              // 如果大于就 --  小于就 ++
              _this.showNumber[_this._index(i)] = e > _this.nowNumber[_this._index(i)] ? --e : ++e;
              // 每次值变化都更新到视图上，这样看上去就像是滚动了一下。好吧，其实就是滚动了
              _this.num = parseFloat(_this.showNumber.join('')).toFixed(2);
              _this.num = _this.$util.fmoney(_this.num, 2)
            } else {
              clearInterval(inter);
            }
          }
        }, _this.turnTime);
      })
    },
    // 保留当前i的值
    _index(i) {
      return i
    }
  }
}
</script>

<style>
.content {
  width: 100%;
  text-align: center;
}

.l-input {
  padding: 30rpx;
}

.l-num {
  font-size: 32rpx;
  font-family: DINAlternate-Bold, DINAlternate;
  font-weight: bold;
  color: #160002;
  line-height: 56rpx;
  display: inline-block;
  text-align: center;
  height: 56rpx;
  overflow: hidden;
  position: relative;
}

.l-son {
  width: 100%;
  height: calc(100% * 10);
  position: relative;
  transition: all 0.5s;
}

.l-posi {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  border: none;
}
</style>
