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

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

import { Image } from 'ant-design-vue';

const url = ref('');
const previewTitle = ref('二维码');
const [Modal, modalApi] = useVbenModal({
  fullscreenButton: false,
  draggable: true,
  onCancel() {
    modalApi.close();
  },
  onConfirm: async () => {
    modalApi.close();
  },
  onOpenChange(isOpen: boolean) {
    if (isOpen) {
      const { values, title } = modalApi.getData<Record<string, any>>();
      if (values) {
        url.value = values;
        previewTitle.value = title;
      }
    }
  },
});
</script>
<template>
  <Modal :title="previewTitle" class="w-[50%]">
    <Image :src="url" height="30" width="30" />
  </Modal>
</template>
