<template>
	<div class="test">
		<button @click="openCanvas">打开画布</button>
		<button @click="openDepthCanvas">打开深度画布</button>
	</div>
</template>

<script setup lang="ts">
	import myEvent from '@/utils/myEvent'
	import { computed, onMounted } from 'vue'
	import { useRoute } from 'vue-router'
	const route = useRoute()
	const url =
		'https://minio-api.aida.com.hk/fida-public-bucket/furniture/sketches/e3082a38-55d2-4313-ad53-55aad715cf67.png'
	const openCanvas = () => {
		myEvent.emit('openFlowCanvas', { url })
	}
	const openDepthCanvas = () => {
		myEvent.emit('openDepthCanvas', { url, canvasId: '' })
	}
	onMounted(() => {
		if (route.query.depth) {
			openDepthCanvas()
		} else {
			openCanvas()
		}
	})
</script>

<style lang="less" scoped>
	.test {
		margin: 2rem;
		border-radius: 2rem;
		background-color: rgb(255, 255, 255);
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		gap: 2rem;
		> button {
			font-size: 10rem;
		}
	}
</style>
