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
  // confirmBtnType?: 'primary' | 'danger'
}

interface PopupState {
  visible: boolean
  title: string
  content: string
  cancelText: string
  confirmText: string
  showCancel: boolean
  // confirmBtnType: 'primary' | 'danger'
  resolve: ((value: boolean) => void) | null
}

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

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

  const confirm = (options: PopupOptions = {}): Promise<boolean> => {
    return new Promise((resolve) => {
      console.log(options,'dia')
      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'),
        // confirmBtnType: options.confirmBtnType || 'primary',
        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,
    close,
    handleConfirm
  }
}