<template>
	<fullscreen-dialog v-model="dialogVisible" @close="close" hide-destroy>
		<flow-canvas ref="flowCanvasRef" :config="config" />
	</fullscreen-dialog>
</template>

<script setup lang="ts">
	import FullscreenDialog from '../components/fullscreen-dialog.vue'
	import flowCanvas from './flow-canvas.vue'
	import { ref } from 'vue'
	import { getSketchFlowCanvas } from '@/api/flow-canvas'
	import { useI18n } from 'vue-i18n'
	import myEvent from '@/utils/myEvent'

	const dialogVisible = ref(false)
	const config = ref({}) as any
	const flowCanvasRef = ref<any>()
	const {t:$t} = useI18n()
	const open = async (options) => {
		let json = []
		let isGetJson = false
		await new Promise((resolve) => {
			getSketchFlowCanvas({ id: options.imgId },true).then((res:any) => {
				if (res) {
					json = JSON.parse(res)
				}
				isGetJson = true
				resolve(true)
			}).catch(() => {
				resolve(false)
			})
		})
		if(!isGetJson)return
		config.value = options || {}
		config.value.json = json
		dialogVisible.value = true
	}
	const close = async () => {
		await flowCanvasRef.value?.putFlowJson()
		dialogVisible.value = false
		myEvent.emit('closeFlowCanvas')
	}
	defineExpose({
		open,
		close,
	})
</script>
<style lang="less" scoped>
</style>
