<script lang="ts" setup>
import { ref } from 'vue';

import { useVbenModal } from '@vben/common-ui';

const title = ref('确认');
const content = ref('');
const onConfirmCallback = ref<(() => void) | null>(null);

const [Modal, modalApi] = useVbenModal({
  fullscreenButton: false,
  draggable: true,
  onCancel() {
    modalApi.close();
  },
  onConfirm() {
    if (onConfirmCallback.value) {
      onConfirmCallback.value();
    }
    modalApi.close();
  },
  onOpenChange(isOpen: boolean) {
    if (isOpen) {
      const data = modalApi.getData<{
        title?: string;
        content: string;
        onConfirm: () => void;
      }>();
      title.value = data?.title || '确认';
      content.value = data?.content || '';
      onConfirmCallback.value = data?.onConfirm || null;
    }
  },
});
</script>

<template>
  <Modal :title="title" class="w-[400px]">
    <div class="py-4 text-center">
      {{ content }}
    </div>
  </Modal>
</template>






