// Button/index.tsx
import { defineComponent, computed, CSSProperties } from 'vue'
import './button.scss' // 导入样式文件

//定义按钮类型
type ButtonType = 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'
type ButtonSize = 'large' | 'default' | 'small'
type ButtonShape = 'circle' | 'round'
type ButtonNativeType = 'button' | 'submit' | 'reset'

// 定义 Props 接口
interface ButtonProps {
  type?: ButtonType
  size?: ButtonSize
  shape?: ButtonShape
  nativeType?: ButtonNativeType
  disabled?: boolean
  loading?: boolean
  plain?: boolean
  ghost?: boolean
  block?: boolean
  icon?: string
  onClick?: (e: Event) => void
  class?: string
  style?: CSSProperties
}

export default defineComponent({
  name: 'DSButton',
  props: {
    type: {
      type: String as () => ButtonType,
      default: 'default'
    },
    size: {
      type: String as () => ButtonSize,
      default: 'default'
    },
    shape: String as () => ButtonShape,
    nativeType: {
      type: String as () => ButtonNativeType,
      default: 'button'
    },
    disabled: Boolean,
    loading: Boolean,
    plain: Boolean,
    ghost: Boolean,
    block: Boolean,
    icon: String
  },

  emits: ['click'],

  setup(props, { slots, emit }) {
    // 计算按钮类名
    const buttonClasses = computed(() => [
      'ds-button',
      `ds-button--${props.type}`,
      `ds-button--${props.size}`,
      {
        'ds-button--disabled': props.disabled,
        'ds-button--loading': props.loading,
        'ds-button--plain': props.plain,
        'ds-button--ghost': props.ghost,
        'ds-button--block': props.block,
        [`ds-button--${props.shape}`]: props.shape
      },
      props.class
    ])

    // 点击事件处理
    const handleClick = (e: Event) => {
      if (!props.disabled && !props.loading) {
        emit('click', e)
      } else {
        e.preventDefault()
      }
    }

    // 渲染图标
    const renderIcon = () => {
      if (props.loading) {
        return <span class="ds-button__loading-icon"></span>
      }
      if (props.icon) {
        return <span class={`ds-button__icon ${props.icon}`}></span>
      }
      return null
    }

    // 渲染内容
    const renderContent = () => {
      return (
        <span class="ds-button__content">
          {renderIcon()}
          {slots.default?.()}
        </span>
      )
    }

    return () => (
      <button
        class={buttonClasses.value}
        style={props.style}
        disabled={props.disabled || props.loading}
        type={props.type}
        onClick={handleClick}
      >
        {renderContent()}
      </button>
    )
  }
})
