<template>
	<el-aside class="left-panel">
		<el-collapse v-model="node" accordion>
			<el-collapse-item title="开始事件" name="start">
				<div class="panel-item" v-for="item in startList" :key="item.type" @mousedown="startDrag(item)">
					<el-icon size="16" color="#67C23A">
						<component :is="item.icon"/>
					</el-icon>
					{{ item.label }}
				</div>
			</el-collapse-item>
			<el-collapse-item title="活动事件" name="event">
				<div class="panel-item" v-for="item in eventList" :key="item.type" @mousedown="startDrag(item)">
					<el-icon size="16" color="#409EFF">
						<component :is="item.icon"/>
					</el-icon>
					{{ item.label }}
				</div>
			</el-collapse-item>
			<el-collapse-item title="网关事件" name="gateway">
				<div class="panel-item" v-for="item in gatewayList" :key="item.type" @mousedown="startDrag(item)">
					<el-icon size="16" color="#E6A23C">
						<component :is="item.icon"/>
					</el-icon>
					{{ item.label }}
				</div>
			</el-collapse-item>
			<el-collapse-item title="捕获事件" name="catch">
				<div class="panel-item" v-for="item in catchList" :key="item.type" @mousedown="startDrag(item)">
					<el-icon size="16" color="#FF85C0">
						<component :is="item.icon"/>
					</el-icon>
					{{ item.label }}
				</div>
			</el-collapse-item>
			<el-collapse-item title="结束事件" name="end">
				<div class="panel-item" v-for="item in endList" :key="item.type" @mousedown="startDrag(item)">
					<el-icon size="16" color="#F56C6C">
						<component :is="item.icon"/>
					</el-icon>
					{{ item.label }}
				</div>
			</el-collapse-item>
		</el-collapse>
	</el-aside>
</template>

<script setup lang="ts">
import {reactive, ref} from "vue";
import LogicFlow from "@logicflow/core";
import {START_NODE_TYPES} from "./model/StartNode"
import {EVENT_NODE_TYPES} from "./model/EventNode"
import {GATEWAY_NODE_TYPES} from "./model/GatewayNode"
import {CATCH_NODE_TYPES} from "./model/CatchNode"
import {END_NODE_TYPES} from "./model/EndNode"

interface Node {
	type: string,
	label: string,
	icon: string
}

const props = defineProps({
	lf: {type: LogicFlow}
})

const node = ref('start')

const startList = reactive<Node[]>([
	{type: START_NODE_TYPES.BASIC, label: "开始节点", icon: "el-icon-video-play"},
	{type: START_NODE_TYPES.TIMER, label: "定时节点", icon: "el-icon-clock"},
	{type: START_NODE_TYPES.MESSAGE, label: "消息节点", icon: "pi-icon-message"},
	{type: START_NODE_TYPES.COMMAND, label: "指令节点", icon: "pi-icon-command"}
])
const eventList = reactive<Node[]>([
	{type: EVENT_NODE_TYPES.APPROVAL, label: "审批节点", icon: "pi-icon-approval"},
	{type: EVENT_NODE_TYPES.SCRIPT, label: "脚本节点", icon: "pi-icon-script"},
	{type: EVENT_NODE_TYPES.CUSTOM, label: "自定义节点", icon: "pi-icon-custom"},
	{type: EVENT_NODE_TYPES.EMAIL, label: "邮件节点", icon: "el-icon-message"},
	{type: EVENT_NODE_TYPES.ACCEPT, label: "接收节点", icon: "pi-icon-accept"}
])
const gatewayList = reactive<Node[]>([
	{type: GATEWAY_NODE_TYPES.EXCLUSIVE, label: "排他网关", icon: "pi-icon-exclusive"},
	{type: GATEWAY_NODE_TYPES.INCLUSIVE, label: "并行网关", icon: "pi-icon-inclusive"},
	{type: GATEWAY_NODE_TYPES.PARALLEL, label: "包容网关", icon: "pi-icon-parallel"}
])
const catchList = reactive<Node[]>([
	{type: CATCH_NODE_TYPES.TIMER, label: "定时节点", icon: "el-icon-clock"},
	{type: CATCH_NODE_TYPES.MESSAGE, label: "消息节点", icon: "pi-icon-message"},
	{type: CATCH_NODE_TYPES.COMMAND, label: "指令节点", icon: "pi-icon-command"}
])
const endList = reactive<Node[]>([
	{type: END_NODE_TYPES.CLOSE, label: "结束节点", icon: "pi-icon-end"}
])

/** 提供拖拽到画布功能 */
function startDrag(item: Node) {
	props.lf.dnd.startDrag({type: item.type, text: item.label});
}
</script>

<style lang="scss" scoped>
.left-panel {
	width: 130px;
	background: #fff;
	padding: 10px;
	user-select: none;

	.panel-item {
		padding: 8px;
		background: #eef2ff;
		margin-bottom: 10px;
		border-radius: 6px;
		cursor: grab;
		display: flex;
		align-items: center;
		gap: 5px;
	}

	:deep(.el-collapse) {
		border: 0;
	}

	:deep(.el-collapse-item__content) {
		padding-bottom: 0;
	}
}

.left-panel {
	overflow-y: auto;
	scrollbar-width: none;
}
</style>
