/*
 * @Author: donghao donghao@supervision.ltd
 * @Date: 2025-07-29 10:48:37
 * @LastEditors: donghao donghao@supervision.ltd
 * @LastEditTime: 2025-07-31 14:07:39
 * @FilePath: \Robot-Al-Platform-Web\src\renderer\src\components\Form\Button.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { defineComponent, h, computed, normalizeClass } from 'vue'
import addIcon from '@/assets/images/common/table_addBtn.png'
export interface DsAddItemButtonProps {
  /**
   *  Button 前面的文案
   */
  // prefixRender?: (...ags: any[]) => any // 前缀内容 render渲染
  /**
   *  Button 后面的文案
   */
  suffixRender?: (...ags: any[]) => any // 后缀内容 render渲染
  /**
   *  Button 后面的文案
   */
  suffixText?: string
  /**
   *  container容器样式
   */
  iconClassName?: string

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

export default defineComponent({
  name: 'DSSwitch',
  props: {
    suffixRender: {
      type: Function as DsAddItemButtonProps['suffixRender'],
      default: null
    },
    suffixText: {
      type: String,
      default: ''
    },
    iconClassName: {
      type: String,
      default: ''
    },
    componentClassName: {
      type: String,
      default: ''
    }
  },
  setup(props, { emit, attrs }) {
    const { iconClassName, componentClassName, ...restProps } = props
    // 处理自定义类名和 Vue 的 class 属性
    const componentClasses = computed(() => {
      const classes = [
        'ds-formItem-add-btn cursor-pointer px-[10px] flex items-center',
        componentClassName
      ]
      // 处理 Vue 的 class 属性（支持字符串/数组/对象）
      if (attrs.class) {
        classes.push(normalizeClass(attrs.class))
      }
      return classes.filter((c) => c).join(' ')
    })
    // 处理自定义类名和 Vue 的 class 属性
    const iconClasses = computed(() => {
      const classes = ['w-[16px] h-[16px] mr-2', iconClassName]
      // 处理 Vue 的 class 属性（支持字符串/数组/对象）
      if (attrs.class) {
        classes.push(normalizeClass(attrs.class))
      }
      return classes.filter((c) => c).join(' ')
    })

    // 渲染自定义前缀内容
    // const renderPrefix = () => {
    //   if (props.prefixRender) {
    //     return props?.prefixRender?.()
    //   }
    //   return null
    // }
    // 渲染自定义后缀内容
    const renderSuffix = () => {
      if (props.suffixRender) {
        return props?.suffixRender?.()
      }
      if (props.suffixText) {
        return props.suffixText
      }
      return '添加数据'
    }

    return () => (
      <div className={componentClasses.value}>
        {/* {renderPrefix()} */}
        <img src={addIcon} className={iconClasses.value} />
        {renderSuffix()}
      </div>
    )
  }
})
