<template>
  <view class="content">
    <!-- num 是字符串，会被切成片渲染 -->
    <view class="l-num" :style="{width: key===',' || key==='.'?'12rpx':'28rpx'}" 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: 48rpx;
  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>
