<template>
  <el-input-number
      :disabled="disabled"
      :clearable="clearable"
      :placeholder="placeholder"
      v-model.trim="state.convertValue"
      controls-position="right"
      :precision="percions"/>
</template>

<script setup lang="ts" name="ExtInputNumber">
import {reactive, onMounted, nextTick, watch,computed} from 'vue';

const emit = defineEmits(['change', 'update:modelValue']);

const props = defineProps({
  modelValue: {
    type: [Number, String]
  },
  ratio: {
    type: Number,
    default: 100
  },
  digit: {
    type: Number,
    default: 2
  },
  disabled: {
    type: Boolean,
    default: false
  },
  clearable: {
    type: Boolean,
    default: true
  },
  placeholder: {
    type: String
  }
})

const state = reactive({
  convertValue:0
})

const percions = computed(()=>{
  return Number(props.digit || 2);
})

watch(()=>state.convertValue,(nv,ov)=>{
  emit('update:modelValue', Number(((nv||0) * Number(props.ratio || 1)).toFixed(0)))
})

watch(()=>props.modelValue,(val,ov)=>{
  state.convertValue = Number((val||0) )/ (props.ratio || 1)
},{immediate:true})

</script>
