<template>
  <el-input-number
    v-model="inputNumberVal"
    :placeholder="placeholder"
    :controls="controls"
    :disabled="disabled"
    :min="min"
    :max="max"
    @change="change"
    @blur="blur"
    @focus="focus"
  ></el-input-number>
</template>

<script>
export default {
  name: 'PsInputNumber',
  props: {
    value: {
      type: Number,
      default: undefined
    },
    placeholder: {
      type: String,
      default: null
    },
    controls: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    min: {
      type: Number,
      default: undefined
    },
    max: {
      type: Number,
      default: undefined
    },
    precision: {
      type: Number,
      default: undefined
    }
  },
  model: {
    prop: 'value',
    event: 'handler'
  },
  watch: {
    value: {
      handler(val) {
        this.inputNumberVal = val
      },
      immediate: true
    }
  },
  data() {
    return {
      inputNumberVal: undefined
    }
  },
  created() {},
  mounted() {},
  methods: {
    change(val) {
      let requestVal = 0
      if (this.precision === undefined) {
        requestVal = val
      } else {
        if (val.toString().indexOf('.') > -1) {
          let splitNum = val.toString().split('.')[1].split('')
          splitNum.length = this.precision
          requestVal = val.toString().split('.')[0] + '.' + splitNum.join('')
        }else{
          requestVal = val
        }
      }
      this.$emit('handler', requestVal - 0)
      this.$emit('change', requestVal - 0)
    },
    blur(e) {
      this.$emit('blur', e)
    },
    focus(e) {
      this.$emit('focus', e)
    }
  }
}
</script>

<style>
</style>
