<template>
    <div>
        <p :class="className" :style="{textAlign: 'center', color: color, fontSize: countSize, fontWeight: countWeight}"><span v-cloak :id="idName">{{ startVal }}</span><span>{{ unit }}</span></p>
        <slot name="intro"></slot>
    </div>
</template>

<script>
import CountUp from "countup";

function transformValue(val) {
  let endVal = 0;
  let unit = "";
  if (val < 1000) {
    endVal = val;
  } else if (val >= 1000 && val < 1000000) {
    endVal = parseInt(val / 1000);
    unit = "K+";
  } else if (val >= 1000000 && val < 10000000000) {
    endVal = parseInt(val / 1000000);
    unit = "M+";
  } else {
    endVal = parseInt(val / 1000000000);
    unit = "B+";
  }
  return {
    val: endVal,
    unit: unit
  };
}

export default {
  data() {
    return {
      unit: "",
      demo: {}
    };
  },
  name: "countUp",
  props: {
    idName: String,
    className: String,
    startVal: {
      type: Number,
      default: 0
    },
    endVal: {
      type: Number,
      required: true
    },
    decimals: {
      type: Number,
      default: 0
    },
    duration: {
      type: Number,
      default: 2
    },
    delay: {
      type: Number,
      default: 500
    },
    options: {
      type: Object,
      default: () => {
        return {
          useEasing: true,
          useGrouping: true,
          separator: ",",
          decimal: "."
        };
      }
    },
    color: String,
    countSize: {
      type: String,
      default: "30px"
    },
    countWeight: {
      type: Number,
      default: 700
    },
    introText: [String, Number]
  },
  mounted() {
    this.$nextTick(() => {
      setTimeout(() => {
        let res = transformValue(this.endVal);
        let endVal = res.val;
        this.unit = res.unit;
        let demo = {};
        this.demo = demo = new CountUp(
          this.idName,
          this.startVal,
          endVal,
          this.decimals,
          this.duration,
          this.options
        );
        if (!demo.error) {
          demo.start();
        }
      }, this.delay);
    });
  }
};
/*,
    watch: {
        endVal (val) {
            let res = transformValue(val);
            let endVal = res.val;
            this.unit = res.unit;
            this.demo.update(endVal);
        }
    }*/
</script>
