<template>
  <div class="count-num">
    <div v-for="(item, index) in countNumData" :style="{width: getWidth}">
      <div>{{item.name}}：</div>
      <div>
        <div :id="'count-num'+index+ '_' + i" v-for="(row, i) in item.value" :key="i">{{ clacMoney(row.amount) }} {{row.currencyCode }}</div>
      </div>
    </div>
  </div>
</template>

<script>
  module.exports = {
    props: {
      countNumData: {
        type: Array,
        default: () => []
      }
    },
    watch: {
      countNumData: {
        handler(newV) {
          // this.initNum()
          // if(newV[0].value) {
          //   this.initNum()
          // }
          // if(newV[1].value) {
          //   this.initNum()
          // }
          // if(newV[2].value) {
          //   this.initNum()
          // }
        },
        deep: true,
        immediate: true
      }
    },
    computed: {
      getWidth() {
        const rate = 100 / this.countNumData.length + 0.3
        return `calc(${rate}% - 10px)`
      },
      clacMoney() {
        return function (val) {
          return this.$utils.formatMoney(val)
        }
      }
    },
    mounted() {
      // this.initNum()
    },
    methods: {
      initNum() {
        let options={
          useEasing: true,  // 过渡动画效果，默认ture
          useGrouping: true,  // 千分位效果，例：1000->1,000。默认true
          separator: ',',   // 使用千分位时分割符号
          decimal: '.',   // 小数位分割符号
          prefix: '',    // 前置符号
          suffix: ''    // 后置符号，可汉字
        }
        this.countNumData.forEach((item, index) => {
          if(item.value){
            console.log(item.value, 1111)
            item.value.forEach((row, i) => {
              options.suffix = row.currencyCode
              var num  = new CountUp('count-num' + index+ '_' + i, 0, row.amount, 2, 2,options)
              num.start()
            })
          }
        });
      }
    },
  }
</script>

<style scoped>
.count-num {
  width: 100%;
  height: 80px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.count-num > div {
  width: calc(33.6% - 10px);
  height: 100%;
  background: rgb(255, 255, 255);
  /* line-height: 60px; */
  text-align: center;
  color: rgb(90, 196, 252);
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
}

.count-num > div > div:first-child {
  font-size: 16px;
  color: #333;
}

.count-num > div > div {
  font-size: 18px;
}

.count-num > div > div > div {
  text-align: left;
}
</style>
