<template>
	<div v-loading="loading" class="layout-padding w100 h100">
		<div class="layout-padding-auto layout-padding-view pd20">
			<!-- 外部内容表单 -->
			<el-form :model="form" label-width="80px" ref="ruleFormRef">
				<el-row :gutter="100">
					<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
						<el-form-item label="模板名称" prop="name" :rules="[{ required: true, message: '请输入模板名称', trigger: 'blur' }]">
							<el-input v-model="form.name" placeholder="请输入模板名称" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
						<el-form-item label="模板编码" prop="code" :rules="[{ required: true, message: '请输入模板编码', trigger: 'blur' }]">
							<el-input v-model="form.code" placeholder="请输入模板编码" clearable></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<!-- 流程图画布内容 -->
			<div class="border w100" style="position: relative; flex: 1">
				<!-- <el-radio-group v-model="radio1" @change="changeSizeType" style="position: absolute; top: 10px; left: 100px; z-index: 1000">
					<el-radio-button label="hotline:transition">连接线</el-radio-button>
					<el-radio-button label="hotline:returnTransition">退回线</el-radio-button>
				</el-radio-group> -->
				<div class="w100 h100" ref="lfElRef" style="height: 100%"></div>
			</div>
			<!-- 节点内容弹窗 -->
			<PropertySetting ref="propertySettingRef" v-model="formData" @change="handlePropertyChange" @changeOther="handlePropertyChangeOther" />
		</div>
	</div>
</template>
<script setup lang="ts" name="hotlineFlowDesigner">
import { onMounted, ref, Ref, watch, unref, defineAsyncComponent, reactive, nextTick } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import LogicFlow, { EdgeType } from '@logicflow/core';
import { DndPanel, SelectionSelect, Control, InsertNodeInPolyline, Menu, Group, Snapshot, MiniMap } from '@logicflow/extension';
import '@logicflow/core/dist/style/index.css';
import '@logicflow/extension/lib/style/index.css';
import { SnakerFlowElement, SnakerFlowAdapter } from './snakerflow/index';
import { NodeTypeEnum } from './enums';
import { workflowAdd, workflowUpdate, publish, baseData } from '/@/api/system/workflow';
import mittBus from '/@/utils/mitt';
import { throttle } from '/@/utils/tools';
import {ElMessage, ElMessageBox, FormInstance} from 'element-plus';
// 引入组件
const PropertySetting = defineAsyncComponent(() => import('./PropertySetting/index.vue'));  // 节点属性设置

const route = useRoute(); // 当前路由信息
const router = useRouter(); // 路由实例
const emits = defineEmits(['update:modelValue', 'on-save']);  // 定义组件事件
// 提交表单数据
let formData = reactive({} as any);
// 外层表单
let form = reactive<any>({});
const ruleFormRef = ref<RefType>();
// 定义组件接收的参数
const props = defineProps({
	modelValue: {
		type: [Object, String],
	},
	config: {
		type: Object,
		default() {
			return {
				grid: {
					size: 20,
					visible: true,
					type: 'dot',
					config: {
						color: '#ababab',
						thickness: 1,
					},
				},
			};
		},
	},
	highLight: {
		// 高亮数据
		type: Object,
		default() {
			return {};
		},
	},
	viewer: {
		// 预览模式
		type: Boolean,
		default: false,
	},
	loading: {
		//加载状态
		type: Boolean,
		default: false,
	},
	extendAttrConfig: {
		// 扩展属性配置
		type: Object,
		default: () => {},
	},
});

// 监听流程变化
watch(
	() => props.modelValue,
	() => {
		reRender(props.modelValue);
	},
	{
		deep: true,
	}
);
// 初始化
// 定义挂载元素Ref
const lfElRef: Ref = ref(null);
// 定义LogicFlow实例
const lfInstance = ref(null) as Ref<LogicFlow | null>;
//
const moduleList = ref([] as any);
const init = async () => {
	// 画布配置
	LogicFlow.use(Snapshot);
	LogicFlow.use(DndPanel);
	LogicFlow.use(SelectionSelect);
	LogicFlow.use(Menu);
	LogicFlow.use(Control);
	LogicFlow.use(Group);
	LogicFlow.use(InsertNodeInPolyline);
	LogicFlow.use(MiniMap);
	LogicFlow.use(SnakerFlowElement);
	LogicFlow.use(SnakerFlowAdapter);
	const defaultConfig: any = {};
	lfInstance.value = new LogicFlow({
		container: unref(lfElRef),
		stopScrollGraph: true, // 进禁止鼠标滚动移动画布
		stopZoomGraph: false, // 禁止缩放画布
		autoExpand: false, // 节点拖动靠近画布边缘时是否自动扩充画布,
		keyboard: {
			// 键盘事件
			enabled: true,
		},
		...props.config,
		...defaultConfig,
	});
	// 初始化操作
	initOp();
	reRender(props.modelValue as any);
	// 初始化事件
	initEvent();
	// 获取页面基础信息
	const res: any = await baseData();
	moduleList.value = res.result?.moduleOptions ?? [];
};
// 初始化操作
const initOp = () => {
	const lf = unref(lfInstance);
	if (!lf) return;
	if (props.viewer) {
		// 预览模式时
		lf.extension.menu.setMenuConfig({
			nodeMenu: [],
			edgeMenu: [],
		});
		// 删除上一步
		lf.extension.control.removeItem('undo');
		// 删除下一步
		lf.extension.control.removeItem('redo');
		return;
	}

	lf.extension.menu.setMenuConfig({
		nodeMenu: [
			{
				text: '删除',
				callback(node: any) {
					lf.deleteNode(node.id);
				},
			},
		], // 覆盖默认的节点右键菜单
		edgeMenu: [
			{
				text: '删除',
				callback(node: any) {
					lf.deleteEdge(node.id);
				},
			},
		], // 删除默认的边右键菜单
		graphMenu: [], // 覆盖默认的边右键菜单，与false表现一样
	});
	// 控制面板-清空画布
	lf.extension.control.addItem({
		iconClass: 'lf-control-clear',
		title: '清空当前流程图',
		text: '清空',
		onClick: () => {
			lf.clearData();
		},
	});
	// 导航图
	lf.extension.control.addItem({
		iconClass: 'custom-minimap',
		title: '打开流程图导航',
		text: '导航',
		// onMouseEnter: (lf:any, ev:any) => {
		//   const position = lf.getPointByClient(ev.x, ev.y);
		//   lf.extension.miniMap.show(
		//     position.domOverlayPosition.x - 120,
		//     position.domOverlayPosition.y + 35
		//   );
		// },
		onClick: (lf: any, ev: any) => {
			const position = lf.getPointByClient(ev.x, ev.y);
			lf.extension.miniMap.show(position.domOverlayPosition.x - 120, position.domOverlayPosition.y + 35);
		},
	});
	// 控制面板-暂存
	lf.extension.control.addItem({
		iconClass: 'lf-control-save',
		title: '保存',
		text: '保存',
		onClick: () => {
			saveOnly(ruleFormRef.value);
		},
	});
	// 控制面板-发布
	// lf.extension.control.addItem({
	// 	iconClass: 'lf-control-publish',
	// 	title: '发布流程模板',
	// 	text: '发布',
	// 	onClick: () => {
	// 		publish(ruleFormRef.value);
	// 	},
	// });
	// 设置默认边
	lf.setDefaultEdgeType('hotline:transition');
	// 设置拖拽面板
	lf.extension.dndPanel.setPatternItems([
		{
			label: '选区',
			icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAAH6ji2bAAAABGdBTUEAALGPC/xhBQAAAOVJREFUOBGtVMENwzAIjKP++2026ETdpv10iy7WFbqFyyW6GBywLCv5gI+Dw2Bluj1znuSjhb99Gkn6QILDY2imo60p8nsnc9bEo3+QJ+AKHfMdZHnl78wyTnyHZD53Zzx73MRSgYvnqgCUHj6gwdck7Zsp1VOrz0Uz8NbKunzAW+Gu4fYW28bUYutYlzSa7B84Fh7d1kjLwhcSdYAYrdkMQVpsBr5XgDGuXwQfQr0y9zwLda+DUYXLaGKdd2ZTtvbolaO87pdo24hP7ov16N0zArH1ur3iwJpXxm+v7oAJNR4JEP8DoAuSFEkYH7cAAAAASUVORK5CYII=',
			callback: () => {
				lf.extension.selectionSelect.openSelectionSelect();
				lf.once('selection:selected', () => {
					lf.extension.selectionSelect.closeSelectionSelect();
				});
			},
		},
		{
			type: 'hotline:start',
			text: '开始',
			label: '开始节点',
			properties: {},
			icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAAH6ji2bAAAABGdBTUEAALGPC/xhBQAAAnBJREFUOBGdVL1rU1EcPfdGBddmaZLiEhdx1MHZQXApraCzQ7GKLgoRBxMfcRELuihWKcXFRcEWF8HBf0DdDCKYRZpnl7p0svLe9Zzbd29eQhTbC8nv+9zf130AT63jvooOGS8Vf9Nt5zxba7sXQwODfkWpkbjTQfCGUd9gIp3uuPP8bZ946g56dYQvnBg+b1HB8VIQmMFrazKcKSvFW2dQTxJnJdQ77urmXWOMBCmXM2Rke4S7UAW+/8ywwFoewmBps2tu7mbTdp8VMOkIRAkKfrVawalJTtIliclFbaOBqa0M2xImHeVIfd/nKAfVq/LGnPss5Kh00VEdSzfwnBXPUpmykNss4lUI9C1ga+8PNrBD5YeqRY2Zz8PhjooIbfJXjowvQJBqkmEkVnktWhwu2SM7SMx7Cj0N9IC0oQXRo8xwAGzQms+xrB/nNSUWVveI48ayrFGyC2+E2C+aWrZHXvOuz+CiV6iycWe1Rd1Q6+QUG07nb5SbPrL4426d+9E1axKjY3AoRrlEeSQo2Eu0T6BWAAr6COhTcWjRaYfKG5csnvytvUr/WY4rrPMB53Uo7jZRjXaG6/CFfNMaXEu75nG47X+oepU7PKJvvzGDY1YLSKHJrK7vFUwXKkaxwhCW3u+sDFMVrIju54RYYbFKpALZAo7sB6wcKyyrd+aBMryMT2gPyD6GsQoRFkGHr14TthZni9ck0z+Pnmee460mHXbRAypKNy3nuMdrWgVKj8YVV8E7PSzp1BZ9SJnJAsXdryw/h5ctboUVi4AFiCd+lQaYMw5z3LGTBKjLQOeUF35k89f58Vv/tGh+l+PE/wG0rgfIUbZK5AAAAABJRU5ErkJggg==',
		},
		{
			type: 'hotline:task',
			text: '流程节点',
			label: '流程节点',
			properties: {
				countersignMode: '',
				handlerClassifies: [],
				handlerType: '',
			},
			icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAEFVwZaAAAABGdBTUEAALGPC/xhBQAAAqlJREFUOBF9VM9rE0EUfrMJNUKLihGbpLGtaCOIR8VjQMGDePCgCCIiCNqzCAp2MyYUCXhUtF5E0D+g1t48qAd7CCLqQUQKEWkStcEfVGlLdp/fm3aW2QQdyLzf33zz5m2IsAZ9XhDpyaaIZkTS4ASzK41TFao88GuJ3hsr2pAbipHxuSYyKRugagICGANkfFnNh3HeE2N0b3nN2cgnpcictw5veJIzxmDamSlxxQZicq/mflxhbaH8BLRbuRwNtZp0JAhoplVRUdzmCe/vO27wFuuA3S5qXruGdboy5/PRGFsbFGKo/haRtQHIrM83bVeTrOgNhZReWaYGnE4aUQgTJNvijJFF4jQ8BxJE5xfKatZWmZcTQ+BVgh7s8SgPlCkcec4mGTmieTP4xd7PcpIEg1TX6gdeLW8rTVMVLVvb7ctXoH0Cydl2QOPJBG21STE5OsnbweVYzAnD3A7PVILuY0yiiyDwSm2g441r6rMSgp6iK42yqroI2QoXeJVeA+YeZSa47gZdXaZWQKTrG93rukk/l2Al6Kzh5AZEl7dDQy+JjgFahQjRopSxPbrbvK7GRe9ePWBo1wcU7sYrFZtavXALwGw/7Dnc50urrHJuTPSoO2IMV3gUQGNg87IbSOIY9BpiT9HV7FCZ94nPXb3MSnwHn/FFFE1vG6DTby+r31KAkUktB3Qf6ikUPWxW1BkXSPQeMHHiW0+HAd2GelJsZz1OJegCxqzl+CLVHa/IibuHeJ1HAKzhuDR+ymNaRFM+4jU6UWKXorRmbyqkq/D76FffevwdCp+jN3UAN/C9JRVTDuOxC/oh+EdMnqIOrlYteKSfadVRGLJFJPSB/ti/6K8f0CNymg/iH2gO/f0DwE0yjAFO6l8JaR5j0VPwPwfaYHqOqrCI319WzwhwzNW/aQAAAABJRU5ErkJggg==',
			className: 'important-node',
		},
		{
			type: 'hotline:summary',
			text: '汇总节点',
			label: '汇总节点',
			properties: {
				countersignMode: '',
				handlerClassifies: [],
				handlerType: '',
			},
			icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAqBJREFUSEvFVU9IFFEc/n5vVbplB0/pzkweCvpDUGStYyREl4SdDRQ7ZJqXCqEOBd1cz0F0q4sYXZIM9gldKiHJ0RIKpD9Qh5wZrXN2k82dX7zZXRvX2V0Xkeb0ePPe973f933v9wg7/NEO4+P/E5y0HL0O6LelkQ5X2550RuoJY9PScCupULEC0/KGAU6D+TGI+gAeyYPRMJjHQDRAJK7NZOIPy5FUIXBfK1BbGtNmyusCc18enybsjDbRnnRvgbhnVhonaiYwk04bhBgF+0OKIAogYS2eExAvAO4st2ZTBR2ppV5m/yaAtsLpA+3Pdn/fnc02xNW4oSG7NDXR+luN2y1vjMD9ABYAkrbUCjIWxAyfLHFhURO+cJlxm8n/OCf3vVT/170g+hKsZz4IULoIpiohFkeIcDe3Fmt++7zlZxF3QwUqGUTUbEt9sLjATHndYH4Koh6le0AYMZc/iPsV4PFw4jZJZFouF8HOWE7jGugXQMdtqX0IV2ta3jGA39eB90xLY8VMuVfAGLWlvgEzgsBJM4Q2K7WBhOUcFaBxW+oHokxWJ/bBvXPSWMh74Xul96Uiwenk8mFf+E/sjHYokiDlfRa+uPhmsuVTDQT/JFLJWf0TWwnrX+rNrvpco0rUliQqmNxkS/36OpDlpIObG/KhqH84xlsy+VTX8t5YXe6Hiikht2BPtk5tSA3wrUC8P1zVlmOqNicsp1+ALoOoCew/K5qmEpUF9OCiAa5KTslFmycS92cy8fGwX2V7UdAqiN5VagNBq6DYPfj+oD1pzEcFoVqzUwR3KjU7Ipy3pd5Zc7NTGzpSS1eZ/QcMepTvNzzChFUC3QDTK4AvlRpdSlT1RYt6cNRcjDGw7QenXNm1zFetoBawmk3eLrja/xcF0F4o2GZDawAAAABJRU5ErkJggg==',
		},
		{
			type: 'hotline:end',
			text: '结束',
			label: '结束节点',
			properties: {},
			icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAAH6ji2bAAAABGdBTUEAALGPC/xhBQAAA1BJREFUOBFtVE1IVUEYPXOf+tq40Y3vPcmFIdSjIorWoRG0ERWUgnb5FwVhYQSl72oUoZAboxKNFtWiwKRN0M+jpfSzqJAQclHo001tKkjl3emc8V69igP3znzfnO/M9zcDcKT67azmjYWTwl9Vn7Vumeqzj1DVb6cleQY4oAVnIOPb+mKAGxQmKI5CWNJ2aLPatxWa3aB9K7/fB+/Z0jUF6TmMlFLQqrkECWQzOZxYGjTlOl8eeKaIY5yHnFn486xBustDjWT6dG7pmjHOJd+33t0iitTPkK6tEvjxq4h2MozQ6WFSX/LkDUGfFwfhEZj1Auz/U4pyAi5Sznd7uKzznXeVHlI/Aywmk6j7fsUsEuCGADrWARXXwjxWQsUbIupDHJI7kF5dRktg0eN81IbiZXiTESic50iwS+t1oJgL83jAiBupLDCQqwziaWSoAFSeIR3P5Xv5az00wyIn35QRYTwdSYbz8pH8fxUUAtxnFvYmEmgI0wYXUXcCCSpeEVpXlsRhBnCEATxWylL9+EKCAYhe1NGstUa6356kS9NVvt3DU2fd+Wtbm/+lSbylJqsqkSm9CRhvoJVlvKPvF1RKY/FcPn5j4UfIMLn8D4UYb54BNsilTDXKnF4CfTobA0FpoW/LSp306wkXM+XaOJhZaFkcNM82ASNAWMrhrUbRfmyeI1FvRBTpN06WKxa9BK0o2E4Pd3zfBBEwPsv9sQBnmLVbLEIZ/Xe9LYwJu/Er17W6HYVBc7vmuk0xUQ+pqxdom5Fnp55SiytXLPYoMXNM4u4SNSCFWnrVIzKG3EGyMXo6n/BQOe+bX3FClY4PwydVhthOZ9NnS+ntiLh0fxtlUJHAuGaFoVmttpVMeum0p3WEXbcll94l1wM/gZ0Ccczop77VvN2I7TlsZCsuXf1WHvWEhjO8DPtyOVg2/mvK9QqboEth+7pD6NUQC1HN/TwvydGBARi9MZSzLE4b8Ru3XhX2PBxf8E1er2A6516o0w4sIA+lwURhAON82Kwe2iDAC1Watq4XHaGQ7skLcFOtI5lDxuM2gZe6WFIotPAhbaeYlU4to5cuarF1QrcZ/lwrLaCJl66JBocYZnrNlvm2+MBCTmUymPrYZVbjdlr/BxlMjmNmNI3SAAAAAElFTkSuQmCC',
		},
	]);
};
// 初始化事件
// 定义表单信息
const propertySettingRef = ref(null) as any;
// 当前操作节点/或边id
const currentOpId = ref('');
const initEvent = () => {
	if (props.viewer) return;
	// 初始化事件
	const lf = unref(lfInstance);
	if (!lf) return;
	const eventCenter: any = lf.graphModel.eventCenter;
	// 空白区右键事件-弹出流程属性表单
	// eventCenter.on('blank:contextmenu', () => {
	//   propertySettingRef.value.show({
	//     name: lf.graphModel.name,
	//     code: lf.graphModel.code,
	//     version: lf.graphModel.version,
	//     description: lf.graphModel.description,
	//     moduleName: lf.graphModel.moduleName,
	//     type: 'process'
	//   })
	// })
	// 节点点击事件
	eventCenter.on('node:click', (args: any) => {
		let nodes = lf.getGraphData().json.nodes;
		let summaryNodes = nodes.filter((item: any) => {
			return item.type === 'hotline:summary';
		});
		nodes = nodes.filter((item: any) => {
			return item.type === 'hotline:task' || item.type === 'hotline:start';
		});
		if (args.data.type == 'hotline:summary' || args.data.type == 'hotline:task') {
			currentOpId.value = args.data.id;
			propertySettingRef.value.show({
				...args.data.properties,
				code: args.data.id,
				id: args.data.id,
				name: args.data.text?.value,
				type: args.data.type,
				nodes,
				summaryNodes,
			});
		}
	});
	// 边点击事件
	// eventCenter.on('edge:click', (args: any) => {
	// console.log(args, 'args')
	// currentOpId.value = args.data.id
	// propertySettingRef.value.show({
	//   ...args.data.properties,
	//   id: args.data.id,
	//   name: args.data.text?.value,
	//   type: args.data.type
	// })
	// })
};
// 选择业务模块
const changeModule = (args: any) => {
	moduleList.value.forEach((item: any) => {
		if (item.key === args) form.moduleName = item.value;
	});
};
// 暂存（保存为草稿）
const saveOnly = throttle((formEl: FormInstance | undefined) => {
	const lf = unref(lfInstance);
	if (!lf) return;
  if(!formEl) return;
  // 表单验证
  formEl.validate((valid: boolean)=>{
    if(!valid) return;
    // 流程模板属性 最外层
    Object.keys(form).forEach((key: string) => {
      // 监听属性变化 并保存
      lf.graphModel[key] = form[key];
    });
    const { submitData } = getGraphData();
    if (submitData.error) {
      //错误提示
      ElMessage.warning(submitData.error);
      return;
    }
    if (route.params.id) {
      workflowUpdate(submitData).then(() => {
        // 更新
        ElMessage.success('操作成功');
        // 关闭当前 tagsView
        mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 1, ...route }));
        mittBus.emit('clearCache', 'systemWorkflow');
        router.push({
          name: 'systemWorkflow',
          state:{
            index:'1'
          }
        });
      });
    } else {
      workflowAdd(submitData).then(() => {
        //保存
        ElMessage.success('操作成功');
        // 关闭当前 tagsView
        mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 1, ...route }));
        mittBus.emit('clearCache', 'systemWorkflow');
        router.push({
          name: 'systemWorkflow',
          state:{
            index:'1'
          }
        });
      });
    }
    emits('on-save', getGraphData());
  })
}, 300);
// 发布 保存并发布
const release = throttle((formEl: FormInstance | undefined) => {
	const lf = unref(lfInstance);
	if (!lf) return;
  if(!formEl) return;
  // 表单验证
  formEl.validate((valid: boolean)=> {
    if (!valid) return;
    // 流程模板属性 最外层
    Object.keys(form).forEach((key: string) => {
      // 监听属性变化 并保存
      lf.graphModel[key] = form[key];
    });
    const { submitData } = getGraphData();
    if (submitData.error) {
      // 错误提示
      ElMessage.warning(submitData.error);
      return;
    }
    //不存在直接发布
    ElMessageBox.confirm(`此操作将发布模板：“${form.name}”，是否继续?`, '提示', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
      draggable: true,
      cancelButtonClass: 'default-button',
      autofocus: false,
    })
        .then(() => {
          publish(submitData).then(() => {
            //保存并发布
            ElMessage.success('操作成功');
            // 关闭当前 tagsView
            mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 1, ...route }));
            mittBus.emit('clearCache', 'systemWorkflow');
            router.push({
              name: 'systemWorkflow',
              state:{
                index:'1'
              }
            });
          });
        })
        .catch(() => {});
    emits('on-save', getGraphData());
  })
}, 300);
// 设置线类型
const changeSizeType = (type: EdgeType) => {
	const lf = unref(lfInstance);
	if (!lf) return;
	lf.setDefaultEdgeType(type as EdgeType);
};
// 重新渲染
const reRender = (data: any): void => {
	const lf = unref(lfInstance);
	if (!lf) return;
	lf.render(data);
	if (route.params.id) {
		nextTick(() => {
			// 最外层扩展属性赋值
			form.name = lf.graphModel.name;
			form.code = lf.graphModel.code;
			form.moduleName = lf.graphModel.moduleName ?? '';
			form.moduleCode = lf.graphModel.moduleCode ?? '';
			form.id = route.params.id;
			form.name = lf.graphModel.name;
		});
	}
};

// 处理当前节点属性值变化事件
const handlePropertyChange = (e: any) => {
	const lf = unref(lfInstance);
	if (!lf) return;
	if (([NodeTypeEnum.task, NodeTypeEnum.summary, NodeTypeEnum.start] as NodeTypeEnum[]).includes(e.type)) {
		// 节点属性
		const nodeId = unref(currentOpId);
		// 节点信息
		if (e.propertyName === 'id') {
			// 更新唯一标识
			if (!lf.getNodeModelById(e.propertyValue)) {
				lf.changeNodeId(nodeId, e.propertyValue);
				currentOpId.value = e.propertyValue;
			}
		} else if (e.propertyName === 'name') {
			// 更新节点文本值
			lf.updateText(nodeId, e.propertyValue);
		} else {
			// 更新基础属性
			lf.setProperties(nodeId, {
				[e.propertyName]: e.propertyValue,
			});
		}
		emits('update:modelValue', getGraphData());
	}
};
/* 处理其他节点的属性变化 */
const handlePropertyChangeOther = (e: any) => {
	const lf = unref(lfInstance);
	if (!lf) return;
	if (([NodeTypeEnum.task, NodeTypeEnum.summary, NodeTypeEnum.start] as NodeTypeEnum[]).includes(e.type)) {
		// 节点属性
		const nodeId = unref(e.id);
		// 节点信息
		if (e.propertyName === 'id') {
			// 更新唯一标识
			if (!lf.getNodeModelById(e.propertyValue)) {
				lf.changeNodeId(nodeId, e.propertyValue);
				currentOpId.value = e.propertyValue;
			}
		} else if (e.propertyName === 'name') {
			// 更新节点文本值
			lf.updateText(nodeId, e.propertyValue);
		} else {
			// 更新基础属性
			lf.setProperties(nodeId, {
				[e.propertyName]: e.propertyValue,
			});
		}
		emits('update:modelValue', getGraphData());
	}
};
/**
 * 获取流程数据
 */
const getGraphData = () => {
	const lf = unref(lfInstance);
	if (!lf) return {};
	return lf.getGraphData();
};
// 刷新导入下拉数据
const refreshImport = () => {
	//   return unref(importDataRef)?.refresh()
};
// 导入json
const importJson = (data: any) => {
	reRender(data);
};
onMounted(init);
// 出提供给外部操作-$refs.xxx
defineExpose({
	getGraphData,
	refreshImport,
	importJson,
});
</script>

<style lang="scss">
.border {
	border: var(--el-border);
	border-radius: var(--el-border-radius-base);
	padding: 10px;
}

.el-step__icon-inner {
	font-size: var(--el-font-size-base) !important;
	font-weight: 700 !important;
}

.lf-menu {
	background-color: var(--el-color-white);
}

.lf-menu-item:hover {
	background-color: var(--hotline-color-menu-hover);
}

.lf-text-input {
	background-color: var(--el-color-white);
}

.lf-element-text {
	color: var(--hotline-color-text-main);
}

.lf-graph {
	background-color: var(--el-color-white) !important;
	color: var(--hotline-color-text-main);
}

.lf-control {
	background-color: var(--el-color-white) !important;
}

.custom-minimap {
	background-image: url('data:image/png;base64,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');
}

.lf-control-clear {
	background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjQ1Nzg5MTYyODczIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjIwNDYiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNODk5LjEgODY5LjZsLTUzLTMwNS42SDg2NGMxNC40IDAgMjYtMTEuNiAyNi0yNlYzNDZjMC0xNC40LTExLjYtMjYtMjYtMjZINjE4VjEzOGMwLTE0LjQtMTEuNi0yNi0yNi0yNkg0MzJjLTE0LjQgMC0yNiAxMS42LTI2IDI2djE4MkgxNjBjLTE0LjQgMC0yNiAxMS42LTI2IDI2djE5MmMwIDE0LjQgMTEuNiAyNiAyNiAyNmgxNy45bC01MyAzMDUuNmMtMC4zIDEuNS0wLjQgMy0wLjQgNC40IDAgMTQuNCAxMS42IDI2IDI2IDI2aDcyM2MxLjUgMCAzLTAuMSA0LjQtMC40IDE0LjItMi40IDIzLjctMTUuOSAyMS4yLTMwek0yMDQgMzkwaDI3MlYxODJoNzJ2MjA4aDI3MnYxMDRIMjA0VjM5MHogbTQ2OCA0NDBWNjc0YzAtNC40LTMuNi04LTgtOGgtNDhjLTQuNCAwLTggMy42LTggOHYxNTZINDE2VjY3NGMwLTQuNC0zLjYtOC04LThoLTQ4Yy00LjQgMC04IDMuNi04IDh2MTU2SDIwMi44bDQ1LjEtMjYwSDc3Nmw0NS4xIDI2MEg2NzJ6IiBwLWlkPSIyMDQ3Ij48L3BhdGg+PC9zdmc+');
}

.lf-control-save {
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAMAAACahl6sAAAAeFBMVEUAAAA0NDQzMzMyMjIzMzM0NDQzMzMzMzMzMzMzMzMyMjIzMzMyMjIyMjIzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMyMjIzMzMzMzMzMzMzMzMzMzM0NDQzMzMyMjIzMzM0NDQzMzOd5GGdAAAAJ3RSTlMAQL+AVSOtd6VgURjHHRH17dnPcPvls2pH4p+ZKYzcNJCHWgpmSzvtPOJXAAADgElEQVR42u3dyU7jQBSF4Ws7njPPI9DQ3ef937AFqHFVIA6xKzWg86+9+VSWypIXRxhjjDHGGGOMse83imyXiunSMpstYb+Hp7EYrBzCWfNKTFXFcNpAzHTAjXkqmcN9JiTwov6SDH7UV/ILvtRPUsGfeklieFQPSQmv6i4Zwq+6SlJoTfaL6MsSKEUdg1IcvTUwJdlAbXiUC2kQ6ZgGkfdMSTIoFSIWIWYlMzRNa6sQs5KldiBWIUYlIyjldiFGJRGUIruQdkmYkK8kYUK+kngDGR+j47gFclXiCaTAa8VlyHWJF5Ap3ptehlyXeABpnk8uQ65LnEO2aNpehlyXuIbkaMpbINcljiEFmorLkOuSh9otJEZT3AK5LnkKFPJJsgsV8kmShgo5l0TBQmTwUyAy8AeSoSm7GRL5A9EuxJAh2idKyBBZ439rCRoiu48LLXCInPDaSYKHSFolVSo/APIWIYQQEhhkAaXUwN+xwhHkGUq5dCqHUu4I8gdqtXSohlrlCFJDK3mObuw5gVbtCCJrGG0triAbGG3jDFKvYLBV7QwiCQyWiDtIvTJ5IA4h8hvG+i0uIZKYe7HcQmQBIy3ENUQGMNBA3ENkMEfP5gPxASIv+Qo9WuUv4gdEZFyu0bF1ORbxBvKGSR+jG3tM3xCeQbpFCCE3RgghhLRHCCGEtEcIIYS0RwghhLRHCCGEtBcgJCqTfdyr7LTZjt1CHhfZBGaKk60zSPq0hMmyyA0kmcJ0BxeQPe7Q0D4kxl1a2YZkuFMTu5AEdyu2CUlwxzJ7kL+4axtrkAJ3bTa2BNniziWWIHucNY17tcNZD5YgD9DKU+lZmkPvjxXII9TmIzHQaA61gxXIQr+/DDWB0tQK5AClSgxVQe3FBmSNpp0YawelkQ3IDE2xGCuG0tEGZIKmkxjrBKW/NiD61WWsBEoRIYQQQgghhBBCCCGEEEIIIYQQQgghhBBCCCGEEEIIIYQQQohpyAhKC18gCyiNbh9S2fsC2aNp2WHaZnL0A3KcoGnWZWxo6AdkCKWs07BYUbuH1AXUym6DXNMij9Q0SGQsHaKWF1NopaFOpJ01DHW07rwy0BnB8+JAhx0/VYU1RXuxQ3hjtF82D3OO9nPhDtJqZWFP0n70K8wR7fPiKshZ8/OGpfQp3TRD885azrJNGub0v9ZIGGOMMcYYY4yxb/cPDX+XlnDYr4YAAAAASUVORK5CYII=');
}
.lf-control-release {
	background-image: url('data:image/png;base64,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');
}
</style>
