<template>
  <div :class="_class">
    <div :class="_inputWrapClassName">
      <input
        class="hive-input__input-input"
        v-bind="$attrs"
        ref="input"
        type="text"
        :value="curValue"
        :disabled="disabled"
        @input="onInput"
        @blur="onBlur"
        @focus="onFocus"
        @keyup.up="onUp"
        @keyup.down="onDown"
      >
      <span class="hive-input__input-suffix" v-if="!disabled">
        <div class="hive-input-number__action">
          <a
            :disabled="upDisabled"
            :class="['hive-input-number__action-up', { 'hive-input-number__action--disabled': upDisabled }]"
            @click="onIncrease">up</a>
          <a
            :disabled="downDisabled"
            :class="['hive-input-number__action-down', { 'hive-input-number__action--disabled': downDisabled }]"
            @click="onDecrease">down</a>
        </div>
      </span>
    </div>
  </div>
</template>

<script>
  import FormSize from '../scripts/mixins/form-size';
  import WatchCurValue from '../scripts/mixins/wacth-cur-value';

  import NP from 'number-precision';

  const name = 'hive-input';

  export default {
    name: 'hive-input-number',
    components: {},
    mixins: [FormSize, WatchCurValue],
    props: {
      disabled: {
        type: Boolean,
        default: false,
      },
      focused: {
        type: Boolean,
        default: false,
      },
      value: {
        type: [Number, String],
        default: 0,
      },
      allowClear: Boolean,
      error: {
        type: Boolean,
        default: false,
      },
      precision: {
        type: Number,
        default: 0,
      },
      step: {
        type: Number,
        default: 1,
      },
      max: Number,
      min: Number,
    },
    data() {
      return {
        curValue: this.value,
        defValue: this.value,
        curFocused: this.focused,
        curDisabled: this.disabled,
        curTags: this.tags || [],
        curError: this.error || false,
      };
    },
    computed: {
      _class() {
        return [
          `${name}`,
          {
            [`${name}--size-${this.curSize}`]: this.curSize,
          },
        ];
      },
      _inputWrapClassName() {
        return [
          `${name}__input`,
          {
            [`${name}__input--status-error`]: this.curError,
            [`${name}__input--focused`]: this.curFocused,
            [`${name}__input--disabled`]: this.curDisabled,
          },
        ];
      },
      displayValue() {
        if (this.precision <= 0) {
          return this.value;
        }
        if (this.curValue === '') {
          return '';
        }
        return parseFloat(this.curValue).toFixed(this.precision);
      },
      upDisabled () {
        return this.curValue >= this.max;
      },
      downDisabled () {
        return this.curValue <= this.min;
      },
    },
    watch: {
      value(value) {
        this.curValue = value;
      },
      disabled(value) {
        this.curDisabled = value;
      },
    },
    mounted() {},

    methods: {
      focus() {
        (this.$refs.input || this.$refs.textarea).focus();
      },
      blur() {
        (this.$refs.input || this.$refs.textarea).blur();
      },
      onInput(event) {
        let { value } = event.target;
        // 转数字
        if (this.type === 'number') {
          if (value !== '') {
            value = isNaN(+value) ? value : +value;
          }
        }

        this.curValue = value;
      },
      onFocus(event) {
        this.curFocused = true;
        this.$emit('focus', event);
      },
      onUp(event) {
        this.onIncrease();
      },
      onDown(event) {
        this.onDecrease();
      },
      onBlur(event) {
        this.curFocused = false;
        this.curValue = Number(this.curValue) || this.defValue || 0;
        this.$emit('blur', event);
      },
      onIncrease() {
        this.curValue = Number(this.curValue) || this.defValue || 0;
        this.curValue = NP.plus(this.curValue, this.step);
        if (this.precision > 0) {
          this.curValue = parseFloat(this.curValue).toFixed(this.precision);
        }
      },
      onDecrease() {
        this.curValue = Number(this.curValue) || this.defValue || 0;
        this.curValue = NP.minus(this.curValue, this.step);
        if (this.precision > 0) {
          this.curValue = parseFloat(this.curValue).toFixed(this.precision);
        }
      },
      // 删除搜索项
      onRemoveTagItem(index) {
        this.curTags.splice(index, 1);
      },
    },
  };
</script>
