<template>
	<TableRecordManage v-if="visible" :code="tableName" />
</template>

<script lang="ts" setup>
import { computed, nextTick, onMounted, ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import TableRecordManage from './table/table-record/Manage.vue'
import { DEFAULT_DYNAMIC_TABLE_PREFIX } from './common'

const route = useRoute()
const tableName = computed<string>(() => (DEFAULT_DYNAMIC_TABLE_PREFIX + route.params.tableId) as string)

const visible = ref<boolean>(false)

watch(tableName, () => {
	visible.value = false
	nextTick(() => {
		visible.value = true
	})
})

onMounted(() => {
	visible.value = true
})
</script>

<style scoped></style>
