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

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

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

import TablePage from '#/views/system/design/table/components/page.vue';

defineOptions({
  name: 'TablePreview',
});
const emit = defineEmits(['success']);
const modelRef = ref<string>('');
const isUpdate = ref(true);

const [Modal, { close, setState, getData }] = useVbenModal({
  fullscreenButton: false,
  draggable: true,
  fullscreen: true,
  onConfirm: async () => {
    try {
      close();
      emit('success');
    } catch {
      message.error('操作失败');
    } finally {
      setState({ confirmLoading: false });
    }
  },
  onOpenChange: async (isOpen: boolean) => {
    if (isOpen) {
      setState({ loading: true });
      const data = getData<Record<string, any>>();
      isUpdate.value = !!data.isUpdate;
      modelRef.value = data.baseData.code;
      setState({ title: `预览${data.baseData.name}` });
    }
  },
  title: '预览表格',
});

const handelLoadData = () => {
  setState({ loading: false });
};
</script>
<template>
  <Modal class="w-[1000px]">
    <TablePage :table-query-code="modelRef" @success="handelLoadData" />
  </Modal>
</template>
