<template>
  <v-text-field
    density="compact"
    :disabled="disabled"
    hide-details
    :label="label"
    :model-value="modelValue.value.toString()"
    :suffix="modelValue.unit"
    type="number"
    variant="outlined"
    @update:model-value="handleUpdate"
  />
</template>

<script setup lang="ts">
  import type { Param } from '@/types/param'

  interface Props {
    label: string
    modelValue: Param
    disabled?: boolean
  }

  interface Emits {
    (e: 'update:modelValue', value: Param): void
  }

  const props = defineProps<Props>()
  const emit = defineEmits<Emits>()

  function handleUpdate (value: string) {
    const numValue = value === '' ? 0 : Number.parseFloat(value)
    emit('update:modelValue', {
      value: numValue,
      unit: props.modelValue.unit,
    })
  }
</script>
