<template>
  <div class="number-digital">
    <div class="box-item">
		 <!-- :class="{ 'number-item': !isNaN(item), 'mark-item': isNaN(item) }" -->
      <li
       class="number-item"
        v-for="(item, index) in orderNum"
        :key="index"
      >
        <span v-if="!isNaN(item)">
          <i :id="`${prefix}numberItem${index}`">0123456789</i>
        </span>
		<span v-else>
		  <i>-</i>
		</span>
      </li>
    </div>
  </div>
</template>

<script setup>
  const props = defineProps({
    count: {
      type: Number,
      default: 0
    },
    prefix: {
      type: String,
      default: ''
    }
  })

  const orderNum = ref([])

  const toOrderNum = (num) => {
    num = num.toString()
    orderNum.value = num.split('') // 将其便变成数据，渲染至滚动数组
	console.log(orderNum.value,'nnnnnnnnnn')
    setTimeout(() => {
      setNumberTransform()
    }, 500)
  }
  watch(
    () => props.count,
    (newVal) => {
      toOrderNum(newVal)
    },
    {
      immediate: true
    }
  )
  function setNumberTransform() {
    for (let index = 0; index < orderNum.value.length; index++) {
      const ele = document.getElementById(`${props.prefix}numberItem${index}`)
      if (ele) {
        ele.style.transform = `translate(-50%, -${orderNum.value[index] * 10}%)`
      }
    }
  }
</script>
<style lang="scss" scoped>
  .number-digital {
    .box-item {
      position: relative;
      list-style: none;
      color: #2d7cff;
      writing-mode: vertical-lr;
      text-orientation: upright;
      /*文字禁止编辑*/
      -moz-user-select: none;
      -webkit-user-select: none;
      -ms-user-select: none;
      -khtml-user-select: none;
      user-select: none;
    }

    /*滚动数字设置*/
    .number-item {
      width: vw(40);
      height: vw(40);
      margin-right: vw(4);
      border-radius: vw(4);
      color: #ffffff;
      font-size: vw(28);
      font-weight: bold;
      background: linear-gradient(180deg, #00b7ff 0%, #0033ff 100%);

      & > span {
        position: relative;
        display: inline-block;
        margin-right: vw(14);
        width: 100%;
        height: 100%;
        writing-mode: vertical-rl;
        text-orientation: upright;
        overflow: hidden;

        & > i {
          position: absolute;
          top: 20%;
          left: 50%;
          transform: translate(-50%, 0);
          transition: transform 1s ease-in-out;
          letter-spacing: vh(17);
        }
      }
    }

    .number-item:last-child {
      margin-right: 0;
    }

    .num-dot {
      display: inline-block;
      margin-left: 8px;
      height: 53px;
      font-size: 47px;
      font-family: MiSans, MiSans-Demibold;
      font-weight: normal;
      text-align: CENTER;
      color: #ffffff;
      line-height: 47px;
    }
  }
</style>
