<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", "defaultValue"],
  data() {
    return {
      value: this.getInitialValue(),
      timer: undefined,
    };
  },
  created() {
    if (this.defaultValue) {
      this.value = this.value !== undefined ? this.$numtoString(this.value) : this.$numtoString(0);
    } else {
      if (this.value !== undefined && this.value !== null) {
        this.value = this.$numtoString(this.value);
      } else {
        this.value = "";
      }
    }
  },
  watch: {
    record: function (newVal) {
      this.value = this.$numtoString(this.record[this.attr]);
    },
  },
  methods: {
    getInitialValue() {
      const recordValue = this.record ? this.record[this.attr] : undefined;

      if (this.defaultValue) {
        if (recordValue === null || recordValue === undefined || recordValue === "") {
          return 0;
        }
        return this.$copy ? this.$copy(recordValue) : recordValue;
      } else {
        if (recordValue === null || recordValue === undefined || recordValue === "") {
          return undefined;
        }
        return this.$copy ? this.$copy(recordValue) : recordValue;
      }
    },

    getDisplayValue(recordValue) {
      if (this.defaultValue) {
        if (recordValue === null || recordValue === undefined || recordValue === "") {
          return this.$numtoString(0);
        }
        return this.$numtoString(recordValue);
      } else {
        if (recordValue === null || recordValue === undefined || recordValue === "") {
          return "";
        }
        return this.$numtoString(recordValue);
      }
    },
    doCheck() {
      if (this.timer) clearTimeout(this.timer);
      this.timer = setTimeout(() => this.checkChange(), 500);
    },
    doChange() {
      this.$emit("change", this.value);
    },
    checkChange() {
      if (!this.$empty(this.value)) {
        this.value = this.$numtoString(this.$formatNumber(this.value));
        this.$emit("number", this.$formatNumber(this.value));
      } else {
        if (this.defaultValue) {
          this.value = this.$numtoString(0);
          this.$emit("number", 0);
        } else {
          this.value = "";
          this.$emit("number", null);
        }
      }
    },
  },
};
</script>
