<template>
  <div class="fxcol">
    <input
      class="filter-input i-border"
      :disabled="disabled"
      :type="type"
      ref="input"
      :value="numberValue"
      :placeholder="placeholder"
      oninput="value=value.replace(/[^\d.]/g,'')"
      @input="handleChange"
    />
  </div>
</template>

<script>
export default {
  name: 'limitInput',
  props: {
    disabled: Boolean,
    type: String,
    placeholder: String,
    value: '', // 传过来的值
    max: Number,
    min: Number,
    defaultValue: '' // 默认值
  },
  data () {
    return {
      numberValue: this.value
    }
  },
  watch: {
    value (val) { //  监听传来的value值，并传递给新定义的值
      // debugger
      this.numberValue = Number(val)
    },
    max (val) { //  因为最大值是根据上个值输入而变化的，所以要监听相应变化
      this.max = val
    },
    min (val) { //  因为最小值是根据上个值输入而变化的，所以要监听相应变化
      this.min = val
    },
    numberValue (val) { //  emit input事件,可令父组件进行v-model绑定
      this.$emit('input', val)
    },
    disabled (val) {
      this.disabled = val
    },
    defaultValue (val) { // 要根据上面的值变化而相应变化，所以要监听
      this.numberValue = val
    }
  },
  methods: {
    handleChange (event) {
      let val = event.target.value.trim()
      if (val < 0 || isNaN(val)) {
        this.numberValue = 0
        return
      }
      if (val) {
        val = Number(val)
        this.numberValue = val
        if (val > Number(this.max)) this.numberValue = this.max
        if (val < Number(this.min)) this.numberValue = this.min
      } else {
        this.numberValue = 0
      }
    }
  },
  mounted () {
    if (this.defaultValue) {
      this.numberValue = this.defaultValue
    }
  }
}
</script>
<style lang="stylus" scoped>
// input
//  width 100%
.i-border
  border 1px solid #a1a1a1
  border-radius 3px
  text-align center
</style>
