<template>
  <div>
    <div
      v-if="shell"
      class="weui_cell"
    >
      <div class="weui_cell_bd weui_cell_primary">
        <p>{{ title }}</p>
      </div>
      <div
        v-if="!readonly"
        class="weui_cell_ft"
        style="font-size:0"
      >
        <a
          class="vux-number-selector vux-number-selector-sub"
          :class="{'vux-number-disabled':disabledMin}"
          @click="sub"
        >-</a>
        <input
          v-model="currentValue"
          :name="name"
          class="vux-number-input"
          :style="{width: width+'px'}"
          :readonly="!fillable"
          @focus="focus($event)"
          @blur="blur($event)"
        >
        <a
          class="vux-number-selector vux-number-selector-plus"
          :class="{'vux-number-disabled':disabledMax}"
          @click="add"
        >+</a>
      </div>
      <div
        v-else
        class="weui_cell_ft"
      >
        {{ currentValue }}
      </div>
    </div>
    <div v-else>
      <div v-if="!readonly">
        <span
          style="float:left;"
          @click="sub"
        >
          <slot name="sub">
            <a
              class="vux-number-selector vux-number-selector-sub"
              :class="{'vux-number-disabled':disabledMin}"
            >-</a>
          </slot>
        </span>
        <input
          v-model="currentValue"
          :name="name"
          class="vux-number-input"
          :class="inputClasses"
          :readonly="!fillable"
          @focus="focus($event)"
          @blur="blur($event)"
        >
        <span @click="add">
          <slot name="add">
            <a
              class="vux-number-selector vux-number-selector-plus"
              :class="{'vux-number-disabled':disabledMax}"
            >+</a>
          </slot>
        </span>
      </div>
      <div v-else>
        {{ currentValue }}
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    min: Number,
    max: Number,
    step: {
      type: Number,
      default: 1
    },
    value: {
      type: [Number, String],
      default: 0
    },
    name: String,
    title: String,
    fillable: {
      type: Boolean,
      default: true
    },
    width: {
      type: Number,
      default: 50
    },
    readonly: {
      type: Boolean,
      default: false
    },
    shell: {
      type: Boolean,
      default: true
    },
    inputClasses: {
      type: String,
      default: ''
    },
    lockMin: {
      type: Boolean,
      default: false
    },
    lockMax: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      currentValue: this.value
    }
  },
  computed: {
    disabledMin () {
      return typeof this.min === 'undefined' ? false : +this.currentValue <= this.min
    },
    disabledMax () {
      return typeof this.max === 'undefined' ? false : +this.currentValue >= this.max
    }
  },
  watch: {
    value (nVal, oVal) {
      if (!/^[+-\d]?[\d]*(\.[\d]*)?$/.test(this.value)) {
        this.value = '0.00'
      }
      this.currentValue = this.value
    },
    currentValue (newValue, old) {
      if (typeof this.currentValue === 'string') {
        let isSymbol = /[+-.]/.test(this.currentValue.substr(0, 1))
        if (isSymbol) {
          this.currentValue = this.currentValue.substr(0, 1) + this.currentValue.substr(1).replace(/[^\d.]/g, '')
        } else {
          this.currentValue = this.currentValue.replace(/[^\d.]/g, '')
        }
      }
      if (this.min && +this.currentValue < this.min && !this.lockMin) {
        this.currentValue = this.min
      }
      if (this.max && +this.currentValue > this.max && !this.lockMax) {
        this.currentValue = this.max
      }
      this.$emit('on-change', this.currentValue)
      this.$emit('input', this.currentValue)
    }
  },
  methods: {
    focus (e) {
      this.$emit('on-focus', e)
    },
    blur (e) {
      this.$emit('on-blur', e)
    },
    add () {
      if (!this.disabledMax) {
        this.currentValue = +this.currentValue + this.step
        this.currentValue = this.currentValue.toFixed(2)
      }
    },
    sub () {
      if (!this.disabledMin) {
        this.currentValue = +this.currentValue - this.step
        this.currentValue = this.currentValue.toFixed(2)
      }
    }
  }
}
</script>
