<template>
  <div ref="number"
       class="vue-scroll-num"></div>
</template>
<script>
export default {
  name: 'VueScrollNum',
  props: {
    vv: {
      type: String,
      default: '0'
    },
    isFloat: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      oldValue: '0',
      newValue: '0',
      html: ''
    };
  },
  methods: {
    comDigitsScroll(startArr, endArr) {
      const l = startArr.length;
      startArr.forEach((v, k) => {
        const t = (l - k) / 3;
        if ((Math.floor(t) === t) && k !== 0) {
          // this.html += '<div class="vsn__wrap vsn__wrap-dian"><i>,</i><ul class="vsn__list pos' + endArr[parseInt(k)] + ' scroll' + v + '-' + endArr[parseInt(k)] + '">';
          this.html += '<div class="vsn__wrap"><i>,</i><ul class="vsn__list pos' + endArr[parseInt(k)] + ' scroll' + v + '-' + endArr[parseInt(k)] + '">';
        } else {
          this.html += '<div class="vsn__wrap"><ul class="vsn__list pos' + endArr[parseInt(k)] + ' scroll' + v + '-' + endArr[parseInt(k)] + '">';
        }
        for (let i = 0; i <= 9; i++) {
          this.html += '<li>' + i + '</li>';
        }
        this.html += '</ul></div>';
      });
    },
    comDigitsScrollFloat(startArr, endArr, len) {
      const l = startArr.length;
      startArr.forEach((v, k) => {
        const t = (l - (k + len)) / 3;
        if ((Math.floor(t) === t) && k !== 0 && k < (l - len)) {
          if ((l - len) === k) {
            this.html += '<div class="vsn__wrap vsn__wrap-point"><i>.</i><ul class="vsn__list pos' + endArr[parseInt(k)] + ' scroll' + v + '-' + endArr[parseInt(k)] + '">';
          } else {
            // this.html += '<div class="vsn__wrap vsn__wrap-dian"><i>,</i><ul class="vsn__list pos' + endArr[parseInt(k)] + ' scroll' + v + '-' + endArr[parseInt(k)] + '">';
            this.html += '<div class="vsn__wrap"><i>,</i><ul class="vsn__list pos' + endArr[parseInt(k)] + ' scroll' + v + '-' + endArr[parseInt(k)] + '">';
          }
        } else {
          if ((l - len) === k) {
            this.html += '<div class="vsn__wrap vsn__wrap-point"><i>.</i><ul class="vsn__list pos' + endArr[parseInt(k)] + ' scroll' + v + '-' + endArr[parseInt(k)] + '">';
          } else {
            this.html += '<div class="vsn__wrap"><ul class="vsn__list pos' + endArr[parseInt(k)] + ' scroll' + v + '-' + endArr[parseInt(k)] + '">';
          }
        }
        for (let i = 0; i <= 9; i++) {
          this.html += '<li>' + i + '</li>';
        }
        this.html += '</ul></div>';
      });
    },
    // 补零函数
    addEle(startArr, endArr) {
      if (startArr.length < endArr.length) {
        const tmpArr = [];
        for (let i = 0; i < (endArr.length - startArr.length); i++) {
          tmpArr.push('0');
        }
        startArr = tmpArr.concat(startArr);
      } else {
        startArr = startArr.slice((startArr.length - endArr.length), startArr.length);
      }
      return {
        start: startArr,
        end: endArr
      };
    },
    changeMove(t, tt) {
      let startArr = t.toString().split('');
      const endArr = tt.toString().split('');
      if (startArr.length < endArr.length) {
        const tmpArr = [];
        for (let i = 0; i < (endArr.length - startArr.length); i++) {
          tmpArr.push('0');
        }
        startArr = tmpArr.concat(startArr);
      } else {
        startArr = startArr.slice((startArr.length - endArr.length), startArr.length);
      }
      this.comDigitsScroll(startArr, endArr);
    },
    changeMoveFloat(t, tt) {
      let startOne = [];
      let startTwo = [];
      let endOne = [];
      let endTwo = [];
      if (t.toString().indexOf('.') !== -1) {
        startOne = t.toString().split('.')[0].split('');
        endOne = t.toString().split('.')[1].split('');
      } else {
        startOne = t.toString().split('');
        endOne = [];
      }
      if (tt.toString().indexOf('.') !== -1) {
        startTwo = tt.toString().split('.')[0].split('');
        endTwo = tt.toString().split('.')[1].split('');
      } else {
        startTwo = tt.toString().split('');
        endTwo = [];
      }
      const start = this.addEle(startOne, startTwo);
      const end = this.addEle(endOne, endTwo);
      const startArr = start.start.concat(end.start);
      const endArr = start.end.concat(end.end);
      const l = end.start.length >= end.end.length ? end.start.length : end.end.length;
      this.comDigitsScrollFloat(startArr, endArr, l);
    }
  },
  watch: {
    vv: {
      handler(cur, old) {
        this.$nextTick(() => {
          this.newValue = cur || 0;
          this.oldValue = old || 0;
          this.html = '';
          if (!this.isFloat) {
            this.changeMove(this.oldValue, this.newValue);
          } else {
            // 如果是小数
            this.changeMoveFloat(this.oldValue, this.newValue);
          }
          this.$refs.number.innerHTML = this.html;
        });
      },
      immediate: true
    }
  }
};
</script>
