<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, onMounted, onBeforeUnmount } from 'vue'
	import { getSketchFlowCanvas, putSketchFlowCanvas } from '@/api/flow-canvas'
	import { useI18n } from 'vue-i18n'

	const dialogVisible = ref(false)
	const config = ref({}) as any
	const flowCanvasRef = ref<any>()
	const {t:$t} = useI18n()
	const open = async (options) => {
		let json = []
		await new Promise((resolve) => {
			getSketchFlowCanvas({ id: options.imgId },true).then((res:any) => {
				if (res) {
					json = JSON.parse(res)
				}
				resolve(true)
			}).catch(() => {
				resolve(true)
			})
		})
		config.value = options || {}
		config.value.json = json
		dialogVisible.value = true
	}
	const close = async () => {
		dialogVisible.value = false
	}
	const handleBeforeUnload = (event) => {
		const str = flowCanvasRef.value?.getFlowJson()
		if (str) {
			event.preventDefault()
			event.returnValue = $t('flowCanvas.confirmLeave')
			return $t('flowCanvas.confirmLeave')
		}
	}
	onMounted(() => {
		// 添加事件监听
		window.addEventListener('beforeunload', handleBeforeUnload)
	})
	onBeforeUnmount(() => {
		window.removeEventListener('beforeunload', handleBeforeUnload)
	})
	defineExpose({
		open,
		close,
	})
</script>
<style lang="less" scoped>
</style>
