<template>
  <div class="sk-digital-scroll sk-flex">
    <div
      v-for="(i, outi) in transformMap"
      :key="outi"
      :style="{height}"
      class="sk-flex-1"
    >
      <digital-item
        :transition="transition"
        :height="height"
        :translate-y="i"
      />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref, toRefs, watch } from 'vue'
import DigitalItem from './components/digital-item/index.vue'

export default defineComponent({
  name: 'SkDigitalScroll',
  components: {
    DigitalItem,
  },
  props: {
    transition: {
      type: String,
      default: '4s',
    },
    value: {
      type: Number,
      default: 123,
    },
    height: {
      type: String,
      default: '40px',
    },
  },
  setup(props) {
    const { height, value } = toRefs(props)
    let transformMap = ref([])

    const getTransform = (value: number) => {
      if (value > 0) {
        const tempArr = value.toString().split('')

        const tempHeight = Number(height.value.replace('px', '').replace('rem', ''))
        return tempArr.map(item => {
          transformMap.value.push(0)
          const num = Number(item)
          if (num) return num * tempHeight
          else return tempHeight * 10
        })
      }
    }
    const arr = getTransform(value.value)

    onMounted(() => {
      setTimeout(() => {
        transformMap.value = arr
      } ,0)
    })

    watch(() => value, v => {
      const arr = getTransform(v.value)
      setTimeout(() => {
        transformMap.value = arr
      }, 0)
    }, { deep: true })

    return {
      transformMap,
    }
  },
})
</script>

