import { ref, createVNode, render } from 'vue'
import XDia from '@c/XDia/index.vue'

interface Tips_Config {
  title?: string
  html?: string
  tips?: string
  zIndex?: number
  showCancel?: boolean
  showClose?: boolean
  'close-on-click-modal'?: boolean
  'close-on-press-escape'?: boolean
  onOk?: (...args: any[]) => void
}

export const useTips = (config: Tips_Config) => {
  const container = document.createElement('div')
  const dia = createVNode(XDia, {
    modelValue: true,
    title: config.title || '提示',
    showCancel: config.showCancel || false,
    ...config,
    onOk: async () => {
      dia.component!.props.loading = true
      config.onOk && (await config.onOk())
      close()
    },
    onCancel: () => {
      close()
    },
  })

  const close = () => {
    dia.component!.props.modelValue = false
    setTimeout(() => {
      render(null, container)
    }, 300)
  }

  render(dia, container)
  document.querySelector('body')?.appendChild(container.firstElementChild!)
}
