/*
 * @Author: donghao donghao@supervision.ltd
 * @Date: 2025-07-29 10:48:37
 * @LastEditors: donghao donghao@supervision.ltd
 * @LastEditTime: 2025-07-30 14:32:45
 * @FilePath: \Robot-Al-Platform-Web\src\renderer\src\components\Form\switch.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { defineComponent, h, withDefaults, computed, normalizeClass } from 'vue'
import { ElSwitch } from 'element-plus'
import type { SwitchProps } from 'element-plus'
import { spawn } from 'child_process'

interface DsSwitchProps extends SwitchProps {
  /**
   *  switch 前面的文案
   */
  label?: string

  /**
   *  switch 前面的文案
   */
  prefixRender?: (...ags: any[]) => any // 前缀内容 render渲染
  /**
   *  switch 后面的文案
   */
  suffixRender?: (...ags: any[]) => any // 后缀内容 render渲染

  /**
   *  container容器样式
   */
  containerClassName?: string

  /**
   * 整体容器样式
   */
  componentClassName?: string
}

export default defineComponent({
  name: 'DsSwitch',
  props: {
    modelValue: {
      type: [Boolean, String, Number],
      default: false
    },
    label: {
      type: String,
      default: ''
    },
    suffixRender: {
      type: Function as DsSwitchProps['suffixRender'],
      default: null
    },
    containerClassName: {
      type: String,
      default: ''
    },
    componentClassName: {
      type: String,
      default: ''
    },
    ...ElSwitch.props // 继承 ElSwitch 的所有 props
  },
  emits: ['update:modelValue', 'change'],
  setup(props, { emit, attrs }) {
    const { containerClassName, componentClassName, ...restProps } = props
    // 处理自定义类名和 Vue 的 class 属性
    const componentClasses = computed(() => {
      const classes = ['flex items-center ds-switch-box', componentClassName]
      // 处理 Vue 的 class 属性（支持字符串/数组/对象）
      if (attrs.class) {
        classes.push(normalizeClass(attrs.class))
      }
      return classes.filter((c) => c).join(' ')
    })
    // 处理自定义类名和 Vue 的 class 属性
    const containerClasses = computed(() => {
      const classes = ['flex items-center justify-between w-[136px]', containerClassName]
      // 处理 Vue 的 class 属性（支持字符串/数组/对象）
      if (attrs.class) {
        classes.push(normalizeClass(attrs.class))
      }
      return classes.filter((c) => c).join(' ')
    })

    const handleChange = (val: boolean | string | number) => {
      emit('update:modelValue', val)
      emit('change', val)
    }
    // 渲染自定义前缀内容
    const renderPrefix = () => {
      if (props.prefixRender) {
        return props?.prefixRender?.()
      }
      return (
        <span class="ds-switch-label">
          {props?.label}
        </span>
      )
    }
    // 渲染自定义后缀内容
    const renderSuffix = () => {
      if (props.suffixRender) {
        return props?.suffixRender?.()
      }
      return null
    }

    return () => (
      <div className={componentClasses.value}>
        <div className={containerClasses.value}>
          {/* 添加前缀插槽 */}
          {renderPrefix()}
          <ElSwitch {...restProps} modelValue={props.modelValue} onChange={handleChange} />
        </div>
        {/* 添加后缀插槽 */}
        {renderSuffix()}
      </div>
    )
  }
})
