<!--
 * @Description: 数字input组件封装
 * @Author: panqb
 * @Date: 2025-5-6 10:57:48
-->
<template>
  <el-input :value="innerVal" @input="handleInput" @change="handleChange" v-bind="$attrs"/>
</template>

<script>
export default {
  name: 'InputNumber',
  inheritAttrs: false,
  props: {
    value: [String, Number],
    decimal: { type: Number, default: null },
    min: { type: Number, default: null },
    max: { type: Number, default: null },
    componentStyle: { type: Object, default: () => ({}) }
  },
  data() {
    return {
    }
  },
  computed: {
    innerVal() {
      return this.value === null ? '' : this.value
    }
  },

  methods: {
    handleInput(val) {
      let s = ''
      if (val != '') {
        s = this.TJUtil.inpNumber(val, this.decimal)
        if (this.min !== null) {
          if (this.min >= 0  && s == '-'){
            s = this.min
          }
        }
        if (this.max !== null) {
          if (Number(s) > Number(this.max)){
            s = this.max
          }
        }
      }
      // 触发父组件input事件
      this.$emit('input', s)
    },
    handleChange(val) {
      let s = ''
      if (val != '') {
        let num = Number(val)
        s = isNaN(num) ? '' : num
      }
      if (this.min !== null) {
        if (s == '' || s < this.min) s = this.min
      }
      this.$emit('input', s)
      // 额外抛出change事件，父@change接收
      this.$emit('change', s)
    }
  },
  
  mounted() {
    if (this.min !== null) {
      this.handleInput(this.min)
    }
  }
}
</script>