<template>
	<div class="layout-pd h100" v-loading="loading">
		<LogicFlow ref="designerRef" v-model="flowData" />
	</div>
</template>
<script setup lang="ts" name="workflowAddEdit">
import { defineAsyncComponent, onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import { getWorkFlowDetail } from '@/api/system/workflow';

const LogicFlow = defineAsyncComponent(() => import('@/components/LogicFlow/index.vue')); // 流程设计器
const designerRef = ref(null as any);
let flowData = ref({
	name: '', // 流程名称
	code: '', // 流程编码
	id: '', // 流程id
	description: '', // 流程描述
	nodes: [
		// 节点
		{
			id: 'start',
			type: 'hotline:start',
			x: 780,
			y: 120,
			properties: {
				stepType: 1, // 节点类型(开始1 结束2)
			},
			text: {
				x: 780,
				y: 80,
				value: '开始',
			},
		},
		{
			id: 'end',
			type: 'hotline:end',
			x: 780,
			y: 400,
			properties: <EmptyObjectType>{
				// 附加属性
				stepType: 2, // 节点类型(开始1 结束2)
			},
			text: {
				x: 780,
				y: 440,
				value: '结束',
			},
		},
	],
	edges: [],
});
const route = useRoute(); // 路由
const loading = ref(false); // 加载状态
onMounted(async () => {
	// 查询详情
	if (route.params.id) {
		loading.value = true;
		try {
			const { result } = await getWorkFlowDetail(route.params.id);
			flowData.value = result;
			loading.value = false;
		} catch (error) {
			loading.value = false;
		}
	}
});
</script>
