<!--_flowTest-->
<template>
	<div class="column-page-wrap">
		<!--		...-->
		<!--		<div id="draw-container"></div>-->
		<LeFlowChart :data="demoData" />
	</div>
</template>

<script setup lang="tsx">
import ApprovalIndex from '../components/approvalIndex.vue'
import LeFlowChart from '@/components/FlowChart'
import { ref, onMounted } from 'vue'
import demoData from './dataTurbo.json'
/**
 * pendingApproval 待审批
 * myApplication 我的申请
 * myReceived 我收到的
 * pendingClaim 认领任务
 * approved 已审批
 */
const taskType = ref('pendingApproval')
import LogicFlow from '@logicflow/core'
import '@logicflow/core/dist/style/index.css'
const lf = ref(null)
onMounted(() => {
	const graphData = {
		nodes: [
			{
				id: 'node_id_1',
				type: 'rect',
				x: 100,
				y: 100,
				text: { x: 100, y: 100, value: '节点1' },
				properties: {}
			},
			{
				id: 'node_id_2',
				type: 'circle',
				x: 200,
				y: 300,
				text: { x: 300, y: 300, value: '节点2' },
				properties: {}
			}
		],
		edges: [
			{
				id: 'edge_id',
				type: 'polyline',
				sourceNodeId: 'node_id_1',
				targetNodeId: 'node_id_2',
				text: { x: 139, y: 200, value: '连线' },
				startPoint: { x: 100, y: 140 },
				endPoint: { x: 200, y: 250 },
				pointsList: [
					{ x: 100, y: 140 },
					{ x: 100, y: 200 },
					{ x: 200, y: 200 },
					{ x: 200, y: 250 }
				],
				properties: {}
			}
		]
	}
	lf.value = new LogicFlow({
		container: document.querySelector('#draw-container')
	})
	lf.value.render(graphData)
})
</script>
<style lang="scss" scoped>
.test {
}
#draw-container {
	width: 1000px;
	height: 500px;
}
</style>
