<template>
   <div class="control has-icons-left">
  <input :class="`input ${disabled? 'has-text-black' : ''}`" type="text" :placeholder="placeholder || ''" v-model="value" @keyup="doCheck" 
  :disabled="disabled || false">
  <span class="icon is-left">
    <SvgIcon v-bind="{name: 'calculator.svg', type: 'gray', size: 22}"></SvgIcon>
  </span>
</div>
</template>
<script>
export default {
  props: ['record', 'attr', 'placeholder', 'disabled'],
  data() {
    return {
      value: this.record[this.attr]? this.$copy(this.record[this.attr]) : undefined,
      timer: undefined
    }
  },
  created() {
    if(this.value) this.value = this.$numtoString(this.value)
  },
  watch: {
    record: function(newVal) {
      this.value = this.$numtoString(this.record[this.attr])
    }
  },
  methods: {
    doCheck() {
      if(this.timer) clearTimeout(this.timer)
      this.timer = setTimeout(()=>this.checkChange(), 500)
    },
    checkChange() {
      if(!this.$empty(this.value)) {
        this.value = this.$numtoString(this.$formatNumber(this.value))
        this.$emit('number', this.$formatNumber(this.value))
      } else this.$formatNumber('number', null)
    }
  }
}
</script>