/*
 * @Author: donghao donghao@supervision.ltd
 * @Date: 2025-07-28 16:45:11
 * @LastEditors: donghao donghao@supervision.ltd
 * @LastEditTime: 2025-07-30 14:30:36
 * @FilePath: \Robot-Al-Platform-Web\src\renderer\src\components\Form\inputNumber.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { defineComponent, getCurrentInstance, ComputedRef, computed } from 'vue'
import { ElInputNumber, inputNumberProps, InputNumberProps } from 'element-plus'
import type { InputNumberEmits } from 'element-plus'
import { RefreshRight } from '@element-plus/icons-vue'

// 定义组件属性类型（保留所有 ElInputNumber 属性）
type DSInputNumberProps = InputNumberProps & {
  // 可在此处添加自定义属性
  prefixRender?: (...ags: any[]) => any // 前置内容 render渲染
  suffixRender?: (...ags: any[]) => any // 后置内容 render渲染
}

export default defineComponent({
  name: 'DSInputNumber',
  props: {
    ...inputNumberProps, // 继承所有 ElInputNumber 属性
    prefixRender: Function as DSInputNumberProps['prefixRender'],
    suffixRender: Function as DSInputNumberProps['suffixRender'],
    controlsPosition: {
      type: String,
      default: 'right'
    }
  },
  emits: [
    'update:modelValue',
    'change',
    'blur',
    'focus',
    'clear',
    'input'
  ] as unknown as InputNumberEmits,

  setup(props: CustomInputNumberProps, { emit, slots, attrs }) {
    const instance = getCurrentInstance()!

    // 处理自定义逻辑
    const handleChange = (currentValue: number | undefined, oldValue: number | undefined) => {
      emit('change', currentValue, oldValue)
    }

    // 创建计算属性以包含所有属性
    const inputNumberAttrs: ComputedRef<Record<string, any>> = computed(() => {
      const { prefixRender, suffixRender, ...propsRest } = props
      return {
        ...attrs,
        ...propsRest,
        modelValue: props.modelValue,
        'onUpdate:modelValue': (val: number | undefined) => emit('update:modelValue', val),
        onChange: handleChange,
        onBlur: (e: FocusEvent) => emit('blur', e),
        onFocus: (e: FocusEvent) => emit('focus', e),
        onClear: () => emit('clear'),
        onInput: (val: number | undefined) => emit('input', val)
      }
    })

    // 渲染自定义前缀内容
    const renderPrefix = () => {
      // props?.suffixRender &&
      if (props.prefixRender) {
        return props?.prefixRender?.()
      }
      return null
    }

    // 渲染自定义后缀内容
    const renderSuffix = () => {
      // props?.suffixRender &&
      if (props.suffixRender) {
        return props?.suffixRender?.()
      }
      return (
        <div className="flex items-center justify-center ds-dialog-icon-box ">
          <RefreshRight />
        </div>
      )
    }

    return () => (
      <div class="ds-input-number flex items-center">
        {/* 添加前缀插槽 */}
        {renderPrefix()}
        <ElInputNumber {...inputNumberAttrs.value} class="enhanced-input-number"></ElInputNumber>
        {/* 添加后缀插槽 */}
        {renderSuffix()}
      </div>
    )
  }
})
