<template>
  <div :class="['numbox', edit && 'numbox__edit']">
    <div class="numbox__minus" @click="_calcValue('minus')">
      <span class="numbox--text" :class="{ 'numbox--disabled': inputValue <= min || disabled }"
        >-</span
      >
    </div>
    <div class="numbox-content" @click="_onClickInputBox">
      <input
        v-model="inputValue"
        :disabled="disabled || disabledInput"
        class="numbox__value"
        type="number"
        @blur="_onBlur"
      />
    </div>
    <div class="numbox__plus" @click="_calcValue('plus')">
      <span class="numbox--text" :class="{ 'numbox--disabled': inputValue >= max || disabled }"
        >+</span
      >
    </div>
  </div>
</template>
<script>
/**
 * NumberBox 数字输入框
 * @description 带加减按钮的数字输入框
 * @tutorial https://ext.dcloud.net.cn/plugin?id=31
 * @property {Number} value 输入框当前值
 * @property {Number} min 最小值
 * @property {Number} max 最大值
 * @property {Number} step 每次点击改变的间隔大小
 * @property {Boolean} disabled = [true|false] 是否为禁用状态
 * @event {Function} change 输入框值改变时触发的事件，参数为输入框当前的 value
 */

export default {
  name: 'UniNumberBox',
  props: {
    value: {
      type: [Number, String],
      default: 1
    },
    min: {
      type: Number,
      default: 0
    },
    max: {
      type: Number,
      default: 100
    },
    step: {
      type: Number,
      default: 1
    },
    disabled: {
      type: Boolean,
      default: false
    },
    disabledInput: {
      type: Boolean,
      default: false
    },
    edit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      inputValue: 0,
      changeType: null
    };
  },
  watch: {
    value(val) {
      this.inputValue = +val;
    },
    inputValue(newVal, oldVal) {
      if (+newVal !== +oldVal) {
        this.$emit('change', +newVal || 1, this.changeType);
      }
    }
  },
  created() {
    this.inputValue = +this.value;
  },
  methods: {
    _calcValue(type) {
      if (this.disabled) {
        return;
      }
      const scale = this._getDecimalScale();
      let value = this.inputValue * scale;
      let step = this.step * scale;
      if (type === 'minus') {
        this.changeType = 'REDUCE_NUM';
        value -= step;
        if (value < this.min * scale) {
          return;
        }
        if (value > this.max * scale) {
          value = this.max * scale;
        }
      } else if (type === 'plus') {
        this.changeType = 'ADD_NUM';
        value += step;
        if (value > this.max * scale) {
          return;
        }
        if (value < this.min * scale) {
          value = this.min * scale;
        }
      }

      this.inputValue = String(value / scale);
    },
    _getDecimalScale() {
      let scale = 1;
      // 浮点型
      if (~~this.step !== this.step) {
        scale = Math.pow(10, (this.step + '').split('.')[1].length);
      }
      return scale;
    },
    _onBlur(event) {
      let value = event.detail.value;
      if (!value) {
        // this.inputValue = 0;
        return;
      }
      value = +value;
      if (value > this.max) {
        value = this.max;
      } else if (value < this.min) {
        value = this.min;
      }
      this.inputValue = value;
    },
    _onClickInputBox(e) {
      e.pr;
      console.log(123);
      this.$emit('onClickInputBox');
    }
  }
};
</script>
<style lang="less" scoped>
@box-height: 22px;
/* #ifdef APP-NVUE */
@box-line-height: 24px;
/* #endif */
@box-line-height: 24px;
@box-width: 21px;
@input-width: 34px;
@uni-box: 76px;
.numbox {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  height: @box-height;
  width: @uni-box;
  align-items: center;
}
.numbox-content {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  input:disabled,
  input[disabled] {
    color: #333333;
    opacity: 1;
    -webkit-text-fill-color: #333333; // ios 和 安卓9.0 必须添加此属性，才会生效
    -webkit-opacity: 1;
  }
}
.numbox__value {
  background-color: #f8f8f8;
  width: @input-width;
  height: @box-height;
  text-align: center;
  font-size: 16px;
  border-width: 2px;
  border-style: solid;
  border-top-width: 0;
  border-bottom-width: 0;
  border-color: @white;
  line-height: @box-line-height;
  position: relative;
  z-index: 1;
}

.numbox__minus {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  width: 20px;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: @box-width;
  height: @box-height;
  // line-height: @box-line-height;
  // text-align: center;
  font-size: 10px;
  color: #333;
  border-radius: 4px 0 0 4px;
  background-color: #f8f8f8;
}
.numbox__plus {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  width: 20px;
  align-items: center;
  justify-content: center;
  width: @box-width;
  height: @box-height;
  border-radius: 0px 2px 2px 0px;
  background-color: #f8f8f8;
}

.numbox--text {
  font-size: 20px;
  color: #333;
}

.numbox--disabled {
  color: #c0c0c0;
}
.numbox__edit {
  height: 48px;
  width: 100%;
  display: flex;
  justify-content: center;
  .numbox__minus,
  .numbox__plus,
  .numbox__value {
    height: 100%;
  }
  .numbox__value {
    width: 89px;
  }
  .numbox__minus,
  .numbox__plus {
    width: 48px !important;
  }
}
</style>
