<!-- 数字翻牌器单个数字 -->
<template>
    <div id="dataNums" class="number">
        <div :class="item.num == '.' ? 'p-bg' : item.num == '-' ? 'f-bg' : 'n-bg'" v-for="(item,index) in list" :key="index">
            <div v-if="item.num == '.'" class="point"></div>
            <div v-if="item.num == '-'" class="negative"></div>
            <div v-if="item.num != '.' && item.num != '-'" class="nums" :style="{transition:'all 1s ease-in-out 0s',top:'-'+item.top+'px'}">
                <span v-for="(item2,index2) in numList" :key="index2">{{item2}}</span>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            number: {
                type: Number | String,
                default: 0
            },
        },
        data() {
            return {
                height: 0,
                list: [],
                numList: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
            }
        },
        watch: {
            number: {
                immediate: true,
                handler(val) {
                    this.$nextTick(()=>{
                        this.scroll();
                    })
                }
            }
        },
        created() {
            this.init();
        },
        methods: {
            init() {
                this.list = this.number.toString().split('').map(i => {
                    return {
                        num: i == '.' ? i : 0,
                        top: 0,
                    }
                });
            },
            getHeight(){
                this.height = parseFloat(getComputedStyle(document.getElementById("dataNums")).height);
            },
            scroll() {
                if(!this.height) this.getHeight();
                this.list = this.number.toString().split('').map(i => {
                    return {
                        num: i,
                        top: parseFloat(i * this.height),
                    }
                });
            }
        }
    }
</script>
<style lang="scss" scoped>
    $bg-height: 2.8125rem;
    .number {
        text-align: center;
        height: $bg-height;
        display: flex;
        
        .n-bg{
            position: relative;
            width: 2.15625rem;
            height: $bg-height;
            overflow: hidden;
            background-image: url(../../assets/img/num-bg.png);
            @extend %background-center;
            margin-right: 0.3rem;
        }
        
        .p-bg{
            position: relative;
            width: 0.2rem;
            height: $bg-height;
            margin-right: 0.5rem;
        }
        .f-bg{
          position: relative;
          width: 1rem;
          height: $bg-height;
          margin-right: 0.5rem;
        }
        
        .nums {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
    
            span {
                width: 100%;
                height: 100%;
                line-height: $bg-height;
                float: left;
                font-size: 2.25rem;
                font-weight: bold;
                color: $color-cyan;
            }
        }
        
        .point{
            position: absolute;
            bottom: 0.3rem;
            width: 0.3rem;
            height: 0.3rem;
            background: $color-cyan;
        }
        
        .negative{
          position: absolute;
          top: 0;
          bottom: 0;
          margin: auto;
          width: 100%;
          height: 0.3rem;
          background: $color-cyan;
        }
    }
</style>
