<template>
    <div class="chartNum">
        <div :class="isMin ? 'box-item-min' : 'box-item'">
            <li v-for="(item,index) in orderNum"
                :class="{'number-item': !isNaN(item), 'mark-item': isNaN(item) }" :key="index">
                <span v-if="!isNaN(item)">
                    <i ref="numberItem">0123456789</i>
                </span>
                <span class="comma" v-else>{{item}}</span>
            </li>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'CountRoll',
        props: {
            count: Number,
            isMin: {
                type: Boolean,
                default: false
            }
        },
        data () {
            return {
                orderNum: []
            }
        },
        mounted () {
            this.toOrderNum(this.count)
            this.increaseNumber()
        },
        deactivated () {
            clearInterval(this.timer)
        },
        methods: {
        // TODO: 定时器
            increaseNumber () {
                this.timer = setInterval(() => {
                    this.setNumberTransform()
                }, 300)
            },
            // TODO：设置文字滚动
            setNumberTransform () {
                const numberItems = this.$refs.numberItem // 拿到数字的ref，计算元素数量
                const numberArr = this.orderNum.filter(item => !isNaN(item))
                // 结合CSS 对数字字符进行滚动
                for (let index = 0; index < numberItems.length; index++) {
                    const elem = numberItems[index]
                    elem.style.transform = `translate(-50%, -${numberArr[index] * 10}%)`
                }
                clearInterval(this.timer)
            },

            // TODO: 处理数字
            toOrderNum (num) {
                num = this.utils.formatNumber(num, num.length)
                this.orderNum = num // 将其便变成数据，渲染至滚动数组
            }
        }
    }
</script>
<style scoped lang='less'>
    .chartNum {
        .box-item {
            position: relative;
            font-size: 36px;
            line-height: 48px;
            text-align: center;
            list-style: none;
            color: #FFFFFF;
            writing-mode: vertical-lr;
            text-orientation: upright;
            /* 默认逗号设置 */
             .mark-item {
                width: 20px;
                height: 48px;
                border: 1px solid #2B79BC;
                margin-right: 5px;
                line-height: 10px;
                font-size: 36px;
                position: relative;
                & > span {
                    position: absolute;
                    width: 100%;
                    bottom: 4px;
                    left: -2px;
                    writing-mode: vertical-rl;
                    text-orientation: upright;
                }
            }
            /*滚动数字设置*/
            .number-item {
                width: 30px;
                height: 48px;
                display: flex;
                list-style: none;
                margin-right: 5px;
                border-radius: 4px;
                border: 1px solid #2B79BC;
                color: #FFFFFF;
                & > span {
                    position: relative;
                    display: inline-block;
                    margin-right: 10px;
                    width: 100%;
                    height: 100%;
                    writing-mode: vertical-rl;
                    text-orientation: upright;
                    overflow: hidden;
                    & > i {
                        font-style: normal;
                        position: absolute;
                        top: 6px;
                        left: 50%;
                        transform: translate(-50%, 0);
                        transition: transform 1s ease-in-out;
                        letter-spacing: 10px;
                        color: #FFFFFF;
                    }
                }
            }

            .number-item:last-child {
                margin-right: 0;
            }
            .comma {
              bottom: 4px;
            }
        }
        .box-item-min {
            position: relative;
            font-size: 28px;
            line-height: 36px;
            text-align: center;
            list-style: none;
            color: #FFFFFF;
            writing-mode: vertical-lr;
            text-orientation: upright;
            /* 默认逗号设置 */
             .mark-item {
                width: 24px;
                height: 36px;
                border: 1px solid #2B79BC;
                margin-right: 8px;
                line-height: 10px;
                font-size: 28px;
                position: relative;
                & > span {
                    position: absolute;
                    width: 100%;
                    bottom: 4px;
                    left: -2px;
                    writing-mode: vertical-rl;
                    text-orientation: upright;
                }
            }
            /*滚动数字设置*/
            .number-item {
                width: 24px;
                height: 36px;
                display: flex;
                list-style: none;
                margin-right: 8px;
                border-radius: 4px;
                border: 1px solid #2B79BC;
                color: #FFFFFF;
                & > span {
                    position: relative;
                    display: inline-block;
                    margin-right: 10px;
                    width: 100%;
                    height: 100%;
                    writing-mode: vertical-rl;
                    text-orientation: upright;
                    overflow: hidden;
                    & > i {
                        font-style: normal;
                        position: absolute;
                        top: 2px;
                        left: 50%;
                        transform: translate(-50%, 0);
                        transition: transform 1s ease-in-out;
                        letter-spacing: 10px;
                        color: #FFFFFF;
                    }
                }
            }

            .number-item:last-child {
                margin-right: 0;
            }
            .comma {
              bottom: 4px;
            }
        }
    }
</style>
