import { ElInputNumber } from 'element-plus'
import { useFormInput } from '@cip/components/hooks/form-input'
import { formInputProps } from '../../form-input-props'
import { computed, h } from 'vue'
import './index.less'
export default {
  props: formInputProps,
  emits: ['update:modelValue'],
  setup (props, context) {
    const { width, securityConfig } = useFormInput(props, context)
    const hasUnit = computed(() => {
      return !!securityConfig.value.unit
    })
    const controls = computed(() => {
      if (hasUnit.value) return false
      return securityConfig.value.controls ?? true
    })
    const controlsPosition = computed(() => {
      if (hasUnit.value) return false
      return securityConfig.value.controlsPosition ?? 'right'
    })
    const precision = computed(() => {
      return !securityConfig.value.noPrecision ? (securityConfig.value.precision ?? 0) : undefined
    })
    return () => h(ElInputNumber, {
      class: {
        'basic-number': true,
        'basic-number--left': controlsPosition.value === 'right',
        'basic-number--unit': !!hasUnit.value
      },
      modelValue: props.modelValue,
      onChange: val => {
        context.emit('update:modelValue', val)
      },
      style: { width: controlsPosition.value === 'right' ? width.value : '' },
      step: securityConfig.value.step ?? 1,
      'step-strictly': securityConfig.value.stepStrictly ?? false,
      min: securityConfig.value.min ?? -Infinity,
      max: securityConfig.value.max ?? Infinity,
      placeholder: securityConfig.value.placeholder ?? '',
      precision: precision.value,
      controls: controls.value,
      disabled: props.disabled,
      'controls-position': controlsPosition.value,
      'data-unit': securityConfig.value.unit
    })
  }
}