<template>
	<div class="log-node" :style="{ borderColor: node.data?.color || '#10b981' }">
		<div class="node-header">
			<svg class="node-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
				<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" stroke-width="2" />
				<path d="M14 2v6h6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
				<path d="M16 13H8" stroke-width="2" stroke-linecap="round" />
				<path d="M16 17H8" stroke-width="2" stroke-linecap="round" />
				<path d="M10 9H8" stroke-width="2" stroke-linecap="round" />
			</svg>
			<span class="node-title">日志</span>
		</div>
		<div class="node-content">
			<span class="log-message">{{ node.data?.config?.message || '输出日志' }}</span>
		</div>
		<Handle
			id="in"
			type="target"
			:position="Position.Top"
			class="handle"
		/>
		<Handle
			id="out"
			type="source"
			:position="Position.Bottom"
			class="handle"
		/>
	</div>
</template>

<script setup lang="ts">
	import { Handle, Position } from "@vue-flow/core";

	const _props = defineProps<{
		node: any
	}>();
</script>

<style scoped>
.log-node {
  background: white;
  border: 2px solid #10b981;
  border-radius: 8px;
  padding: 12px;
  min-width: 120px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.node-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.node-icon {
  width: 16px;
  height: 16px;
  color: #10b981;
}

.node-title {
  font-weight: 600;
  font-size: 14px;
  color: #333;
}

.node-content {
  text-align: center;
}

.log-message {
  font-size: 12px;
  color: #666;
}

.handle {
  width: 8px;
  height: 8px;
  background: #fff;
  border: 2px solid #10b981;
  border-radius: 50%;
}
</style>
