<template>
  <a-input
      v-model:value="inputValue"
      :placeholder="placeholder"
      allow-clear
      @blur="inputBlur"
      :max-length="maxlength"
      @change="inputF"
  />
</template>

<script lang="ts" setup>
import {computed} from "vue";

const props = defineProps({
  modelValue: {
    default: ""
  },
  maxlength: {
    default: 50
  },
  zh: {
    default: false
  },
  isMax: {
    default: false
  },
  maxNum:{
    default: 0
  },
  placeholder:{
    default: '请输入'
  },
});

const inputF = (e) =>{
  const value = e.target.value
  let filterValue=value.replace(/[^0-9]/g,'')?(props.zh?parseInt(value.replace(/[^0-9]/g,'')):value.replace(/[^0-9]/g,'')):''
  if(props.isMax){
    if(!props.maxNum&&filterValue){
      filterValue=0
    }else if(props.maxNum&&filterValue&&filterValue> props.maxNum){
      filterValue=props.maxNum
    }
  }
  inputValue.value=filterValue
}

const emit = defineEmits<{
  (event: 'update:modelValue', value: any): void,
  (event: 'blur'): void,
}>()

const inputBlur = ()=>{
  emit('blur')
}

const inputValue = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emit('update:modelValue', value)
  }
})
</script>
