<!-- 数字翻牌器 -->
<template>
    <div class="number-flipper" :class="direction ? 'flex' : ''">
        <div class="up" v-if="title" :class="direction ? 'up-flex' : ''">
            <div class="i" />{{title}}
        </div>
        <div class="down">
            <num :number="relNumber" />
            <span class="unit">{{unit}}</span>
        </div>
    </div>
</template>

<script>
    import Num from './num.vue'
    export default {
        components: {
            Num,
        },
        props: {
            title: {
                type: String,
                default: '',
            },
            direction: {
              type: String | Number | Boolean,
            },
            unit: {
                type: String,
                default: '',
            },
            number: {
                type: Number | String,
                default: 0,
            },
            // 小数位数
            point: {
                type:Number,
                default: 0,
            }
        },
        data() {
            return {
                relNumber: 0,
            }
        },
        watch: {
            number: {
                immediate: true,
                handler(val) {
                    this.relNumber = parseFloat(val).toFixed(this.point < 0 ? 0 : this.point);
                }
            }
        },
    }
</script>
<style lang="scss" scoped>
    .number-flipper {
        $up-m-b: 0.5rem;
        .up{
            color: $color-cyan;
            @extend %flex-center;
            margin-bottom: $up-m-b;
            
            .i {
                width: 0.2rem;
                height: 0.2rem;
                border-radius: 50%;
                background: $color-cyan;
                box-shadow: 0 0 0.12rem 0.15rem rgba($color: $color-cyan, $alpha: 0.3);
                margin-right: 0.5rem;
            }
        }
        .up-flex{
          font-size: 1.5rem;
          margin-top: $up-m-b;
          margin-right: 1rem;
        }
        
        .down{
            display: flex;
            justify-content: center;
            align-items: flex-end;
            .unit{
                font-size: 0.875rem;
                color: $color-cyan;
            }
        }
    }
    .flex{
      display: flex;
      justify-content: center;
      align-items: center;
    }
</style>
