<template>
  <div class="demo">
    <ul class="fp-box">
      <!-- 默认进来是7位，超过自动加 -->
      <li ref="li" v-for="i in countStr.length > 4 ? countStr.length : 4" :key="i">
        <!-- 每列中的10行数字 -->
        <span v-for="num in 10" :key="num">
          <!-- <span class="line"></span> -->
          <span class="num-wrap">{{ num - 1 }}</span>
        </span>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { onMounted, ref, watch, defineProps } from "vue";
const props = defineProps({
  count: Number
});
const countStr = ref("100"); // 需要展示的数字
const numStr = ref(""); // 需要展示的数字字符串
const numArr = ref([0, 0, 0, 0]); // 默认展示4个数字数组
const li = ref(null);
watch(
  () => props.count,
  (val) => {
    countStr.value = val + "";
    initNumCard();
  },
  {
    immediate: true,
    deep: true
  }
);

onMounted(() => {
  initNumCard();
});
// 初始化数字卡片
function initNumCard() {
  numStr.value = countStr.value;
  numArr.value = numStr.value.split("");
  const numArrlen = numArr.value.length;
  // 展示数字的处理，不够4位前面补0
  // 默认进来是7位，超过自动加
  for (
    let i = 0;
    i < (countStr.value.length > 4 ? countStr.value.length : 4) - numArrlen;
    i++
  ) {
    numArr.value.unshift(0);
  }
  if (li.value) {
    li.value.forEach((item, index) => {
      const ty = numArr.value[index];
      // 滚动数字(li标签)
      item.style.transform = `translateY(-${ty * 47}px)`;
    });
  }
}
</script>

<style lang="scss" scoped>
.fp-box {
  display: flex;
  overflow: hidden;

  li {
    width: 30px;
    height: 47px;
    flex-direction: column;
    transition: transform 1s ease-in-out;
    margin-right: 4px;

    &>span {
      text-align: center;
      background: url("~@/assets/system/icon001.png") no-repeat center center;
      display: flex;
      display: inline-block;
      width: 30px;
      height: 47px;
      line-height: 47px;
      float: left;
      position: relative;
      font-size: 16px;
      font-weight: 700;
      color: var(--el-color-primary);
      // line-height: 19px;

      .num- {
        font-family: "Orbitron";
      }
    }
  }
}
</style>