gypsy-crm-frontend-vu/hooks/usePopup.ts

import { ref } from 'vue'
import { useI18n } from 'vue-i18n'

interface PopupOptions {
  title?: string
  content?: string
  cancelText?: string
  confirmText?: string
  width?: number
  showCancel?: boolean
  autoClose?: boolean
  autoCloseDelay?: number
}

interface PopupState {
  visible: boolean
  title: string
  content: string
  cancelText: string
  confirmText: string
  showCancel: boolean
  autoClose: boolean
  autoCloseDelay: number
  resolve: ((value: boolean) => void) | null
}

const popupState = ref<PopupState>({
  visible: false,
  title: '',
  content: '',
  cancelText: '',
  confirmText: '',
  showCancel: true,
  autoClose: false,
  autoCloseDelay: 2000,
  resolve: null
})

export function usePopup() {
  const { t } = useI18n()

  const confirm = (options: PopupOptions = {}): Promise<boolean> => {
    return new Promise((resolve) => {
      popupState.value = {
        visible: true,
        title: options.title || t('Msg.SystemPrompt'),
        content: options.content || '',
        showCancel: options.showCancel != undefined ? options.showCancel: true,
        cancelText: options.cancelText || t('Btn.Cancel'),
        confirmText: options.confirmText || t('Btn.Confirm'),
        autoClose: options.autoClose || false,
        autoCloseDelay: options.autoCloseDelay || 2000,
        resolve
      }
    })
  }
  const toast = (options: PopupOptions | string = {}): Promise<boolean> => {
    const params = typeof options === 'string' ? { content: options } : options
    return new Promise((resolve) => {
      popupState.value = {
        visible: true,
        title: params.title || t('Msg.SystemPrompt'),
        content: params.content || '',
        showCancel: params.showCancel != undefined ? params.showCancel: true,
        cancelText: params.cancelText || t('Btn.Cancel'),
        confirmText: params.confirmText || t('Btn.Confirm'),
        autoClose: true,
        autoCloseDelay: params.autoCloseDelay || 2000,
        resolve
      }
    })
  }

  const close = () => {
    if (popupState.value.resolve) {
      popupState.value.resolve(false)
      popupState.value.resolve = null
    }
    popupState.value.visible = false
  }

  const handleConfirm = () => {
    if (popupState.value.resolve) {
      popupState.value.resolve(true)
      popupState.value.resolve = null
    }
    popupState.value.visible = false
  }

  return {
    popupState,
    confirm,
    toast,
    close,
    handleConfirm
  }
}