<template>
  <div
    class="sv-input-number"
    :class="{'sv-input-number-small': size === 'small', 'sv-input-number-large': size === 'large', 'sv-input-number-disabled': disabled, 'sv-input-number-readonly': readonly}">
    <div class="sv-input-minus" :class="{'disabled': !canMinus}" @click="minus">-</div>
    <input type="number" class="sv-input" v-model="inputValue" :disabled="disabled" :readonly="readonly || !editable">
    <div class="sv-input-plus" :class="{'disabled': !canPlus}" @click="plus">+</div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    name: 'svInputNumber',
    data () {
      return {
        inputValue: this.value,
        canMinus: true,
        canPlus: true
      }
    },
    props: {
      value: {
        type: [Number, String],
        default: 1
      },
      min: {
        type: Number,
        default: -Infinity
      },
      max: {
        type: Number,
        default: Infinity
      },
      step: {
        type: Number,
        default: 1
      },
      size: String,
      disabled: {
        type: Boolean,
        default: false
      },
      readonly: {
        type: Boolean,
        default: false
      },
      editable: {
        type: Boolean,
        default: true
      }
    },
    watch: {
      value (value) {
        this.inputValue = this.processInputValue(value)
      },
      inputValue (value) {
        this.canPlus = !this.max || this.inputValue < this.max
        this.canMinus = this.inputValue > this.min
        this.$emit('input', value)
        this.$emit('change', value)
      }
    },
    methods: {
      processInputValue (value) {
        value = value + ''
        if (!value) {
          return ''
        }
        value = value.replace(/^D$/igm, '')
        return Number.parseInt(value)
      },
      plus () {
        if (!this.canPlus || this.readonly) {
          return
        }
        if (!this.max || this.inputValue < this.max) {
          let oldValue = this.inputValue
          this.inputValue += this.step
          this.$emit('plus', this.inputValue, oldValue)
        }
      },
      minus () {
        if (!this.canMinus || this.readonly) {
          return
        }
        if (this.inputValue > this.min) {
          let oldValue = this.inputValue
          this.inputValue -= this.step
          this.$emit('minus', this.inputValue, oldValue)
        }
      }
    },
    created () {
      if (this.disabled) {
        this.canMinus = false
        this.canPlus = false
      }

      if (this.value === this.min) {
        this.canMinus = false
      }
    }
  }
</script>

<style lang="scss" rel="stylesheet/scss">
  @import "../../styles/base";
  .sv-input-number{
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    width: pxToRem(220);
    height: pxToRem(60);
    overflow: hidden;
    border-radius: pxToRem(4);
    font-size: pxToRem($input-font-size);
    &.sv-input-number-small{
      height: pxToRem(40);
    }
    &.sv-input-number-large{
      height: pxToRem(80);
    }
    &.sv-input-number-disabled{
      .sv-input{
        color: #999;
      }
    }
    .sv-input{
      flex: 1;
      text-align: center;
      color:#333;
      border: none;
      width: 100%;
      height: 100%;
      margin: pxToRem(0 10);
      padding: pxToRem(0 20);
      line-height: 1;
      background: #f2f2f2;
      &::-webkit-input-placeholder{
        font-size: pxToRem(30);
        color:#ccc;
      }
      &.disabled{
        background: #f5f7fa;
        color:#c0c4cc;
        &::-webkit-input-placeholder{
          font-size: pxToRem($input-font-size);
          color: $input-placeholder-color;
        }
      }
    }
    .sv-input-minus, .sv-input-plus{
      display: flex;
      align-items: center;
      height: 100%;
      font-size: pxToRem(32);
      color: #333;
      &.disabled{
        color: #ddd;
      }
    }
  }
</style>
