<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { useRoute } from 'vue-router';

import { Page, VbenLoading } from '@vben/common-ui';

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

const route = useRoute();

const state = reactive<{
  mode: 'page' | 'popup' | 'view';
  multiple: boolean;
  tableQueryCode: string;
}>({
  tableQueryCode: (route.query?.code || '') as string,
  multiple: false,
  mode: 'page',
});

const tablePageRef = ref();

const showLoading = ref(true);
const handelLoadData = () => {
  showLoading.value = false;
};
</script>

<template>
  <Page auto-content-height>
    <VbenLoading
      v-if="showLoading"
      class="size-full h-auto min-h-full"
      spinning
    />
    <TablePage ref="tablePageRef" v-bind="state" @success="handelLoadData" />
  </Page>
</template>
