<template>
  <div>
    <label v-if="label">{{ label }}</label>
    <div class="form-item" :class="classObj">
      <div class="form-item__number-wrapper">
        <input data-module="element.number" type="number"
               v-model.number="value" :disabled="disabled"
               v-on:blur="enterValidate">
        <button class="button--default number__control number__control--decrease" v-on:click="substract"></button>
        <button class="button--default number__control number__control--increase" v-on:click="increase"></button>
      </div>
    </div>
  </div>
</template>
<script>
  const DEFAULT_VALUE = 0;
  const DEFAULT_MIN = 0;
  const DEFAULT_STEP = 1;
  const SIZE_NORMAL = 'normal';
  const SIZE_SMALL = 'small';
  const CSS_SMALL = 'form-item--small';

  export default {
    name: 'taurus-number-stepper',
    props: {
      // 最大值
      max: {
        default: undefined
      },
      fMax: {
        type: Number,
        default: undefined
      },
      // 最小值
      min: {
        default: DEFAULT_MIN
      },
      fMin: {
        type: Number,
        default: DEFAULT_MIN
      },
      // 步长
      step: {
        default: DEFAULT_STEP
      },
      fStep: {
        type: Number,
        default: DEFAULT_STEP
      },
      // 初始值
      bmValue: {
        type: Number,
        default: DEFAULT_VALUE
      },
      fbmValue: {
        type: Number,
        default: DEFAULT_VALUE
      },
      // 初始值
      defaultValue: {
        type: Number,
        default: DEFAULT_VALUE
      },
      fDefaultValue: {
        type: Number,
        default: DEFAULT_VALUE
      },
      // 输入框大小
      size: {
        type: String,
        default: SIZE_NORMAL
      },
      // 输入框label
      label: {
        type: String,
        default: ''
      }
    },
    data: function () {
      let isSmall = (this.size === SIZE_SMALL);
      // 组件默认值
      return {
        value: DEFAULT_VALUE,
        classObj: {
          'form-item--small': isSmall
        },
        disabled: false
      };
    },
    computed: {
      fMax: function () {
        return isNaN(parseInt(this.max)) ? undefined : parseInt(this.max);
      },
      fMin: function () {
        return isNaN(parseInt(this.min)) ? DEFAULT_MIN : parseInt(this.min);
      },
      fStep: function () {
        return parseInt(this.step) > 1 ? parseInt(this.step) : 1;
      },
      fbmValue: function () {
        return isNaN(parseInt(this.bmValue)) ? DEFAULT_MIN : parseInt(this.bmValue);
      },
      fDefaultValue: function () {
        return isNaN(parseInt(this.defaultValue)) ? DEFAULT_MIN : parseInt(this.defaultValue);
      },
      smallSize: function () {
        return this.fSize === SIZE_SMALL ? CSS_SMALL : '';
      }
    },
    created: function () {
      // max必须大于min
      if (this.fMax < this.fMin) {
        this.fMax = undefined;
      }
      // 设置初始值，初始值必须在取值区间
      this._setValue(this.fDefaultValue);
    },
    methods: {
      /**
       * 递增函数
       */
      increase: function () {
        this._setValue(this.value + this.fStep);
      },
      /**
       * 递减函数
       */
      substract: function () {
        this._setValue(this.value - this.fStep);
      },
      /**
       * 手动输入失焦验证
       */
      enterValidate: function () {
        this._setValue(this.value);
      },
      /**
       * 解除禁用
       */
      enable: function () {
        this.disabled = false;
      },
      /**
       * 禁用输入框
       *
       */
      disable: function () {
        this.disabled = true;
      },
      /**
       * 组件值的变化都通过这个方法来实现
       * @param newValue
       */
      _setValue: function (newValue) {
        if (['string', 'number'].indexOf(typeof newValue) < 0) {
          return;
        }
        let value = parseInt(newValue);
        if (value <= this.fMin) {
          this.value = this.fMin;
        } else if (this.fMax && value > this.fMax) {
          this.value = this.fMax;
        } else {
          this.value = value;
        }
      },
      /**
       * 设置输入框的值
       * @param newValue
       */
      setValue: function (newValue) {
        this._setValue(newValue);
      },
      /**
       * 获取组件的值
       * @returns {Number|*|value|number}
       */
      getValue: function () {
        return this.value;
      }
    },
    watch: {
      value: function (newValue, oldValue) {
        this.fbmValue = newValue;
        this.$emit('on-value-change', newValue, oldValue);
      },
      fbmValue: function (newValue) {
//        this.$emit('on-bmValue-change', newValue);
        this._setValue(newValue);
      }
    }
  };
</script>
