<template>
  <div class="count-box">
    <li
      v-for="(_, index) in numberItems"
      :key="index"
      class="number-item"
    >
      <span class="number-box">
        <i
          ref="numberBoxes"
          class="number-list"
          >0123456789.</i
        >
      </span>
    </li>
  </div>
</template>

<script>
export default {
  name: 'CountBox',
  props: {
    countNumber: {
      type: Number,
      default: 0,
    },
    countLength: {
      type: Number,
      default: 6,
      validator(value) {
        return value > 0
      },
    },
  },
  computed: {
    numberItems() {
      let numberString = this.countNumber.toString()
      if (numberString.length > this.countLength) {
        ElMessage.error(`${this.label}过大`)
        numberString = '9'.repeat(this.countLength)
      }
      numberString = '0'.repeat(this.countLength) + numberString
      return numberString.slice(-this.countLength).split('')
    },
  },
  watch: {
    numberItems: {
      handler(items) {
        const numberBoxes = this.$refs['numberBoxes']
        for (let index = 0; index < numberBoxes.length; index++) {
          const box = numberBoxes[index]
          if (box) {
            if (items[index] === '.') {
              box.style.transform = `translate(-50%, -${1000 / 11}%)`
            } else {
              box.style.transform = `translate(-50%, -${
                (Number(items[index]) * 100) / 11
              }%)`
            }
          }
        }
      },
    },
  },
}
</script>

<style scoped lang="scss">
.count-box {
  width: 100%;
  height: 100%;
  text-align: center;
  list-style: none;
  writing-mode: vertical-lr;
  text-orientation: upright;
  overflow: hidden;
  .number-item {
    width: 48px;
    height: 100%;
    list-style: none;
    background: #323c4c;
    &:not(:last-child) {
      margin-right: 8px;
    }
    & > .number-box {
      position: relative;
      display: inline-block;
      width: 100%;
      height: 100%;
      overflow: hidden;
      & > .number-list {
        position: absolute;
        top: 25%;
        left: 50%;
        transform: translate(-50%, 0%);
        transition: transform 1s ease-in-out;
        letter-spacing: 14px;
        font-size: 32px;
        color: #ffffff;
        font-family: Helvetica, Microsoft YaHei;
        font-style: normal;
        font-weight: bold;
      }
    }
  }
}
</style>
