<!-- 数字翻牌器 -->
<template>
    <div class="number-flipper" :class="direction ? 'flex' : ''">
        <div class="up" v-if="title" :class="[direction ? 'up-flex' : '', simple ? 'flex' : '']">
            <!-- <div class="i" /> -->{{title}}
        </div>
        <div v-if="simple" class="down">
            <div class="simple" :style="{color: getWarnColor(state)}">{{animatedNumber}}</div>
            <span class="unit" style="bottom: 0.5rem;">{{unit}}</span>
        </div>
        <div v-else class="down">
            <num :number="relNumber" />
            <span class="unit" v-if="unit">{{unit}}</span>
        </div>
    </div>
</template>

<script>
  import {
      getWarnColor,
  } from '@/common/util.js';
    import Num from './num.vue'
    import Gsap from '../../assets/js/gsap.js';
    export default {
        components: {
            Num,
        },
        props: {
            title: {
                type: String,
                default: '',
            },
            // 方向
            direction: {
              type: String | Number | Boolean,
            },
            unit: {
                type: String,
                default: '',
            },
            number: {
                type: Number | String,
                default: 0,
            },
            state: {
                type: Number,
            },
            // 整数位数
            len: {
                type: Number,
            },
            // 小数位数
            point: {
                type:Number,
            },
            // 简单版
            simple: {
              type: String | Number | Boolean,
            }
        },
        data() {
            return {
                getWarnColor: getWarnColor,
                relNumber: '0',
                tweenedNumber: 0,
            }
        },
        computed: {
          animatedNumber() {
            const newLen = this.number.toString().split('.')?.[1]?.length ?? 0;
            return this.tweenedNumber.toFixed(newLen);
          }
        },
        watch: {
            number: {
                immediate: true,
                handler(val) {
                  if(this.len) for (let i = 0; i < this.len - 1; i++) this.relNumber = '0' + this.relNumber; // 补0
                  // 补小数
                  if(this.point) {
                    this.relNumber += '.';
                    for (let i = 0; i < this.point; i++) this.relNumber += '0';
                  }
                  if(!val) return;
                  if(this.simple) {
                    Gsap.to(this.$data, { duration: 1, tweenedNumber: parseFloat(val) });
                  } else {
                    let num = this.point === undefined ? parseFloat(val) : parseFloat(val).toFixed(this.point < 0 ? 0 : this.point);
                    let tmpLen = num.toString().split('.')[0].length; // 整数部分的长度
                    if(this.len && tmpLen < this.len) for (let i = 0; i < this.len - tmpLen; i++) num = '0' + num; // 补0
                    this.relNumber = num;
                  }
                }
            }
        },
    }
</script>
<style lang="scss" scoped>
    .number-flipper {
        $up-m-b: 0.5rem;
        .up{
            font-size: 1.2rem;
            color: $color-cyan;
            margin-bottom: $up-m-b;
            text-align: left;
            
            .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;
                position: relative;
            }
        }
        
        .simple{
          font-size: 1.5rem;
          background-color: rgba(10,23,55,0.80);
          border: 1px solid rgba(9,77,148,0.50);
          padding: 0.5rem;
          color: $color-cyan;
          margin-right: 0.5rem;
        }
    }
    .flex{
      display: flex;
      justify-content: center;
      align-items: center;
    }
</style>
