<template>
  <span>{{ startVal }}</span>
</template>

<script>
import Countup from 'countup.js'

export default {
  props: {
    value: {
      type: Number,
      default: 0
    },
    endVal: {
      type: Number,
      required: true
    },
    // number of decimal places in number
    decimals: {
      type: Number,
      default: 0
    },
    // duration in seconds
    duration: {
      type: Number,
      default: 2
    },
    options: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  data () {
    return {
      startVal: 0
    }
  },
  watch: {
    value (val) {
      this.startVal = val
    },
    starValue (val) {
      this.$emit('input', val)
    },
    endVal (val) {
      this._countup.update(val)
    }
  },
  mounted () {
    this.startVal = this.value
    this._countup = new Countup(this.$el, this.startVal, this.endVal, this.decimals, this.duration, this.options)
    this._countup.start()
  }
}
</script>
