<template>
    <div class="total-wrap">
        <slot></slot>
        <div class="total-main" >
            <!--<countTo :startVal='0' :endVal='total' :duration='1000'></countTo>-->
            <div  v-for="(item,index) in total" :key="index" :class="item !==',' ? 'eleNumBg':'noeleNumBg'" >
               <!--{{item}}  -->
                <countTo :startVal='0' :endVal='Number(item)' :duration='2000'></countTo>
            </div>
        </div>
    </div>
</template>

<script>
import { formaterTotal } from '../../utils/formate'
import countTo from 'vue-count-to'
export default {
  name: 'AccountNum',
  components:{
    countTo
  },
  props:['totalnum'],
  data(){
    return {
      //total: formaterTotal(this.totalnum)
    }
  },
  created(){
    //console.log(this.totalnum)
  },
  computed:{
    total(){
      console.log(typeof this.totalnum)
      return  formaterTotal(this.totalnum)
    }
  }
}
</script>

<style scoped lang="scss">
    .total-wrap{
        height: 30%;
        display: flex;
        align-items: center;
        >span{
            display: inline-block;
            width: 50px;
            text-align: left;
        }
        .total-main{
            /*margin-left: 10px;*/
            padding: 5px 5px 5px 0;
            background: url("../../images/content/numBorder.svg") no-repeat;
            background-size: 100% 100%;
        }
        .eleNumBg{
            width: 20px;
            height: 30px;
            display: inline-block;
            margin-left: 5px;
            line-height: 30px;
            font-size: 22px;
            font-weight: 600;
            text-align: center;
            background: url("../../images/content/numBg.svg") no-repeat;
            background-size: 100% 100%;
        }
        .noeleNumBg{
            width: 10px;
            height: 30px;
            display: inline-block;
            margin-left: 5px;
            line-height: 30px;
            font-size: 22px;
            font-weight: 600;
            text-align: center;
        }
    }
</style>
