// DsDialog/index.tsx

// 扩展 el-dialog 的属性
interface DsDialogProps extends Partial<DialogProps> {
  // 控制显示/隐藏（v-model）
  modelValue?: boolean
  // 是否显示底部操作栏（默认显示）
  showFooter?: boolean
  // 是否显示关闭图标
  showClose?: boolean
  // 确认按钮文本
  confirmText?: string
  // 取消按钮文本
  cancelText?: string
  // 标题（支持字符串或函数）
  title?: string | (() => JSX.Element)
  // 底部按钮排列方向（默认水平）
  footerLayout?: 'horizontal' | 'vertical'
  // 是否显示确认按钮
  showConfirm?: boolean
  // 是否显示取消按钮
  showCancel?: boolean
}

export default defineComponent({
  name: 'DsDialog',

  props: {
    modelValue: Boolean,
    showFooter: {
      type: Boolean,
      default: true
    },
    showClose: {
      type: Boolean,
      default: true
    },
    confirmText: {
      type: String,
      default: '确定'
    },
    cancelText: {
      type: String,
      default: '取消'
    },
    title: [String, Function],
    footerLayout: {
      type: String as () => 'horizontal' | 'vertical',
      default: 'horizontal'
    },
    showConfirm: {
      type: Boolean,
      default: true
    },
    showCancel: {
      type: Boolean,
      default: true
    },
    // 其他 el-dialog 属性
    width: [String, Number],
    top: String,
    draggable: Boolean,
    closeOnClickModal: Boolean,
    closeOnPressEscape: Boolean,
    appendToBody: Boolean
  },

  emits: ['update:modelValue', 'confirm', 'cancel', 'close', 'open', 'opened', 'closed'],

  setup(props, { emit }) {
    const dialogVisible = ref(props.modelValue || false)
    const slots = useSlots();

    // 监听v-model变化
    watch(
      () => props.modelValue,
      (val) => {
        dialogVisible.value = val
      }
    )

    // 监听内部visible变化并同步到外部
    watch(dialogVisible, (val) => {
      emit('update:modelValue', val)
    })

    // 关闭对话框
    const closeDialog = () => {
      dialogVisible.value = false
      emit('close')
    }

    // 确认操作
    const handleConfirm = () => {
      emit('confirm')
      // 如果父组件没有处理关闭逻辑，则自动关闭
      if (props.showFooter && !emit('confirm').length) {
        closeDialog()
      }
    }

    // 取消操作
    const handleCancel = () => {
      emit('cancel')
      closeDialog()
    }

    // 计算底部按钮类名
    const footerClasses = computed(() => [
      'ds-dialog-footer',
      `ds-dialog-footer--${props.footerLayout}`
    ])

    // 渲染标题
    const renderTitle = () => {
      if (slots.title) return slots.title()
      if (typeof props.title === 'function') return props.title()
      if (props?.title)
        return (
          <div class="flex items-center justify-between ds-dialog-header pl-[24px]">
            <p class="overflow-hidden whitespace-nowrap text-ellipsis">{props.title}243</p>
          </div>
        )
      return null
    }

    // 渲染内容
    const renderContent = () => {
      return slots.default ? slots.default() : null
    }

    // 渲染底部操作栏
    const renderFooter = () => {
      if (!props.showFooter) return null

      return (
        <div class={footerClasses.value}>
          {props.showCancel && <ElButton onClick={handleCancel}>{props.cancelText}</ElButton>}
          {props.showConfirm && (
            <ElButton type="primary" onClick={handleConfirm}>
              {props.confirmText}
            </ElButton>
          )}
          {slots.footer?.()}
        </div>
      )
    }

    return () => (
      <ElDialog
        modelValue={dialogVisible.value}
        onUpdate:modelValue={(val) => (dialogVisible.value = val)}
        title={props.title}
        closeOnClickModal={props.closeOnClickModal !== false}
        closeOnPressEscape={props.closeOnPressEscape !== false}
        showClose={props.showClose}
        draggable={props.draggable}
        width={props.width}
        top={props.top}
        appendToBody={props.appendToBody}
        onClose={closeDialog}
        onClosed={() => emit('closed')}
        onOpen={() => emit('open')}
        onOpened={() => emit('opened')}
      >
        {{
          header: slots.header ? () => slots.header() : undefined,
          default: slots.default ? () => slots.default() : undefined,
          footer: slots.footer ? () => slots.footer() : undefined
        }}
      </ElDialog>
    )
  }
})
