<template>
	<div class="node-library-panel" :class="{ collapsed: collapsed }">
		<div class="node-library-header">
			<span>节点库</span>
			<el-button class="collapse-btn" text circle @click="emit('update:collapsed', !collapsed)">
				<el-icon>
					<ArrowRightBold v-if="collapsed" />
					<ArrowLeftBold v-else />
				</el-icon>
			</el-button>
		</div>
		<div v-if="!collapsed" class="node-library-content">
			<el-empty v-if="nodeLibraryGroups.length === 0" description="暂无节点" :image-size="40" />
			<div v-else class="node-library-groups">
				<div v-for="group in nodeLibraryGroups" :key="group.group" class="node-group">
					<div class="node-group-title">{{ group.label }}</div>
					<div class="node-group-items">
						<el-button
							v-for="item in group.items"
							:key="item.nodeCode"
							text
							class="node-item"
							@click="emit('addNode', item.nodeCode, item.nodeName)"
						>
							{{ item.nodeName }}
						</el-button>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue';
import type { NodeLibraryGroup } from '/@/api/settings/creation';

defineProps<{
	nodeLibraryGroups: NodeLibraryGroup[];
	collapsed: boolean;
}>();

const emit = defineEmits<{
	(e: 'update:collapsed', value: boolean): void;
	(e: 'addNode', nodeCode: string, nodeName: string): void;
}>();
</script>

<style scoped lang="scss">
.node-library-panel {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 10;
	background: #fff;
	border: 1px solid #d8e0eb;
	border-radius: 6px;
	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
	width: 132px;
	max-height: calc(100% - 20px);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: width 0.18s ease;

	&.collapsed {
		width: 40px;

		.node-library-header {
			padding: 8px;
			border-bottom: none;

			> span {
				display: none;
			}
		}

		.node-library-content {
			display: none;
		}
	}
}

.node-library-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px;
	border-bottom: 1px solid #e7ecf3;
	font-size: 12px;
	font-weight: 700;
	color: #1f2937;
	background: #f8fafc;

	.collapse-btn {
		width: 20px;
		height: 20px;
		border: 1px solid #cfd8e6;
		color: #64748b;
	}
}

.node-library-content {
	padding: 12px;
	overflow-y: auto;
	max-height: 480px;
}

.node-library-groups {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.node-group {
	.node-group-title {
		font-size: 12px;
		font-weight: 700;
		color: #64748b;
		margin-bottom: 8px;
		padding-bottom: 4px;
		border-bottom: 1px solid #e7ecf3;
		padding-left: 2px;
	}

	.node-group-items {
		display: flex;
		flex-direction: column;
		gap: 2px;
	}

	.node-item {
		justify-content: flex-start !important;
		width: 100%;
		padding: 0 !important;
		margin: 0 !important;
		color: #475569;
		border-radius: 6px;
		font-size: 13px;
		font-weight: 500;
		background: transparent;
		border: none;
		transition: all 0.15s ease;
		text-align: left !important;
		min-height: 34px;
		height: auto !important;
		display: block !important;

		&:hover {
			background: #f1f5f9;
			color: #1e293b;
		}

		:deep(.el-button__inner) {
			width: 100%;
			padding: 8px !important;
			margin: 0 !important;
			text-align: left !important;
			justify-content: flex-start !important;
			display: block !important;
		}
	}
}
</style>
