import { ref } from 'vue'
import ConfirmDialog from '@/components/ConfirmDialog2.vue'
import { createApp } from 'vue'

interface ConfirmDialogOptions {
  title?: string
  content: string
  confirmText?: string
  cancelText?: string
  width?: number
  onConfirm?: () => void
  onCancel?: () => void
}

export function showConfirmDialog(options: ConfirmDialogOptions): Promise<boolean> {
  return new Promise((resolve) => {
    const visible = ref(true)
    const container = document.createElement('div')
    document.body.appendChild(container)

    const app = createApp(ConfirmDialog, {
      visible: visible.value,
      title: options.title || '提示',
      content: options.content,
      confirmText: options.confirmText || '确认',
      cancelText: options.cancelText || '取消',
      width: options.width || 400,
      onConfirm: () => {
        visible.value = false
        setTimeout(() => {
          app.unmount()
          options.onConfirm?.()
          document.body.removeChild(container)
          resolve(true)
        }, 300)
      },
      onCancel: () => {
        visible.value = false
        setTimeout(() => {
          app.unmount()
          options.onCancel?.()
          document.body.removeChild(container)
          resolve(false)
        }, 300)
      },
      'onUpdate:visible': (val: boolean) => {
        visible.value = val
      }
    })

    app.mount(container)
  })
}