<template>
	<div class="test">
		<p>Conversation Item - {{ id }}</p>
		<button @click="openCanvas">打开画布</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 id = computed(() => route.params.id)
	const openCanvas = () => {
		myEvent.emit('openFlowCanvas', {
			url: 'https://s3-alpha-sig.figma.com/img/ea2f/590e/9638f62a2fc91e31f33db0022db1642c?Expires=1773014400&Key-Pair-Id=APKAQ4GOSFWCW27IBOMQ&Signature=M0B8oJJOk~dGG0aZAqOIocAp7T0LFdJ9FYmCrEZVTCRzYxM6SJRNtYMTX-rTO3Z~s14QINh~o-S41XiZnBv-0zcKjuWot~VVaNHfd0~1LesfNe2KwvCinT~72btFut1pheLnKE-wWCX5ewtonxU77bnw386YPMTqv7DBZzksf2udsJA7NmOYD6~TUG3Q2dWSt~zPH~lkaidscPqpCnCbqzljCEi4RiHY4U3A45l5XypcX2umqn1UaYUFCTqV9471J4qdB6Dg2pcKocdp-7-3s1De6Q~2SmBOrSgDQ~KEADCB2lhKfhxgWmy0lwMvhTd4l90ygVZDWZRABgjHNrGUvg__'
		})
	}
	onMounted(() => {
		openCanvas()
	})
</script>

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