
<template>
  <ul class="fp-box">
    <!-- 默认进来是7位，超过自动加 -->
    <li ref="lis" v-for="i in countStr.length > 5 ? countStr.length : 5" :key="i" :class="bg">
      <!-- 每列中的10行数字 -->
      <span v-for="num in 10" :key="num">
        <span class="num-wrap">{{ num - 1 }}</span>
      </span>
    </li>
  </ul>
</template>
<script setup>
import { onMounted, ref, watch } from "vue";
const props = defineProps({
  count: Number,
  len: {
    type: Number,
    default: 7
  },
  bg: String
});
const lis = ref();
const list = ref([]);
const countStr = ref(""); // 需要展示的数字
const numberArr = ref([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]); // 固定每列中的19行数字
const numStr = ref(""); // 需要展示的数字字符串
const numArr = ref([0, 0, 0, 0, 0, 0, 0]); // 默认展示7个数字数组
watch(
  () => props.count,
  (val) => {
    let str = val.toString();
    let num = 0;
    if (str.length < props.len) num = props.len - str.length;
    for (let i = 0; i < num; i++) {
      str = "0" + str;
    }
    countStr.value = str;
    initNumCard();
  },
  { immediate: true, deep: true }
);
onMounted(() => {
  initNumCard();
});
function initNumCard() {
  numStr.value = countStr.value;
  numArr.value = numStr.value.split("");
  const numArrlen = numArr.value.length;
  // 展示数字的处理，不够7位前面补0
  // 默认进来是7位，超过自动加
  for (
    let i = 0;
    i < (countStr.value.length > 5 ? countStr.value.length : 5) - numArrlen;
    i++
  ) {
    numArr.value.unshift(0);
  }
  if (lis.value) {
    lis.value.forEach((item, index) => {
      const ty = numArr.value[index];
      item.style.transform = `translateY(-${ty * 32}px)`; // 滚动数字(li标签)
    });
  }
}
</script>

<style lang="scss" scoped>
.fp-box {
  display: flex;
  justify-content: center;
  overflow: hidden;
  li {
    width: 26px;
    height: 32px;
    flex-direction: column;
    transition: transform 1s ease-in-out;
    & > span {
      text-align: center;
      font-size: 20px;
      color: #ffffff;
      display: flex;
      display: inline-block;
      width: 20px;
      height: 32px;
      line-height: 25px; 
      float: left;
      .num-wrap {
        font-family: "DigifaceWide";
      }
    }
  }
}
</style>
