<template>
	<fullscreen-dialog v-model="dialogVisible" @close="onClose" hide-destroy>
		<div class="canvas-box">
			<depth-canvas :config="config" @workbench="onWorkbench" />
		</div>
	</fullscreen-dialog>
</template>

<script setup lang="ts">
	import FullscreenDialog from '../components/fullscreen-dialog.vue'
	import depthCanvas from './depth-canvas.vue'
	import { ref } from 'vue'
	const dialogVisible = ref(false)
	const config = ref({
		id: '',
		url: '',
		json: ''
	})

	const open = (options) => {
		config.value = options
		console.log(config.value)
		config.value.json = sessionStorage.getItem('canvasJson_' + config.value.id)
		dialogVisible.value = true
	}
	// 工作区
	const onWorkbench = (options) => {
		dialogVisible.value = false
		const json = options.json
		sessionStorage.setItem('canvasJson_' + config.value.id, json)
		config.value.onWorkbench?.({ url: options.url, json })
	}
	// 关闭
	const onClose = () => {
		dialogVisible.value = false
		config.value.onClose?.()
	}

	defineExpose({
		open,
		close
	})
</script>
<style lang="less" scoped>
	.canvas-box {
		padding-top: 10rem;
		width: 100%;
		height: 100%;
	}
</style>
