<script setup lang="ts">
import { StrAnyObj } from '@/typings'

const props = withDefaults(
  defineProps<{
    modelValue: number | undefined
    style?: StrAnyObj
    placeholder?: string
    disabled?: boolean
    readonly?: boolean
    min?: number
    max?: number
    precision?: number
    step?: number
    stepStrictly?: boolean
    controls?: boolean
    valueOnClear?: number | null | 'min' | 'max'
    change?: (value: any) => void
  }>(),
  {
    disabled: false,
    readonly: false
  }
)

const emits = defineEmits(['update:modelValue'])

const computedModelValue = computed({
  get() {
    return props.modelValue
  },
  set(newValue) {
    emits('update:modelValue', newValue)
  }
})
</script>

<template>
  <el-input-number
    v-model="computedModelValue"
    :placeholder="placeholder"
    :disabled="disabled"
    :readonly="readonly"
    :style="style"
    style="width: 100%"
    :min="min"
    :max="max"
    :precision="precision"
    :step="step"
    :step-strictly="stepStrictly"
    :controls="controls"
    controls-position="right"
    :value-on-clear="valueOnClear"
    @change="(value: any) => change?.(value)"
  />
</template>

<style scoped lang="scss">
:deep(.el-input__inner) {
  text-align: left;
}
</style>
