<!--
  基础节点组件
  在 Vue Flow 画布上渲染节点
-->
<script setup lang="ts">
import { computed } from 'vue'
import { Handle, Position } from '@vue-flow/core'
import * as Icons from '@ant-design/icons-vue'
import { useWorkflowStore } from '../stores/useWorkflowStore'
import type { VueFlowNode } from '#/types/workflow'

interface Props {
  /** 节点数据 */
  data: VueFlowNode['data']
  /** 节点 ID */
  id: string
  /** 是否选中 */
  selected?: boolean
}

const props = defineProps<Props>()

const workflowStore = useWorkflowStore()

/**
 * 节点元数据
 */
const metadata = computed(() => props.data.metadata)

/**
 * 节点名称
 */
const nodeName = computed(() => props.data.name || metadata.value?.displayName || '未命名')

/**
 * 图标组件
 */
const iconComponent = computed(() => {
  const iconName = metadata.value?.icon
  if (!iconName) return Icons.AppstoreOutlined
  return (Icons as any)[iconName] || Icons.AppstoreOutlined
})

/**
 * 节点分类颜色
 */
const categoryColor = computed(() => {
  const category = metadata.value?.category
  const colorMap: Record<string, string> = {
    api: '#1890ff',
    database: '#52c41a',
    logic: '#faad14',
    notification: '#f5222d',
    transform: '#722ed1',
    other: '#8c8c8c',
  }
  return colorMap[category || 'other'] || '#8c8c8c'
})

/**
 * 配置字段数量
 */
const configCount = computed(() => {
  return Object.keys(props.data.config || {}).length
})

/**
 * 点击节点
 */
function handleClick() {
  workflowStore.selectNode(props.id)
}
</script>

<template>
  <div
    class="base-node"
    :class="{ selected }"
    :style="{ '--category-color': categoryColor }"
    @click="handleClick"
  >
    <!-- 输入连接点 -->
    <Handle
      type="target"
      :position="Position.Left"
      class="node-handle node-handle-target"
    />

    <!-- 节点内容 -->
    <div class="node-content">
      <!-- 节点头部 -->
      <div class="node-header">
        <div class="node-icon">
          <component :is="iconComponent" />
        </div>
        <div class="node-info">
          <div class="node-name">{{ nodeName }}</div>
          <div class="node-type">{{ metadata?.displayName }}</div>
        </div>
      </div>

      <!-- 节点状态 -->
      <div class="node-footer">
        <div class="node-id">{{ id }}</div>
        <div v-if="configCount > 0" class="config-badge">
          {{ configCount }} 项配置
        </div>
      </div>
    </div>

    <!-- 输出连接点 -->
    <Handle
      type="source"
      :position="Position.Right"
      class="node-handle node-handle-source"
    />
  </div>
</template>

<style scoped lang="less">
.base-node {
  min-width: 200px;
  background: #fff;
  border: 2px solid #d9d9d9;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.2s;
  cursor: pointer;

  &:hover {
    border-color: var(--category-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  }

  &.selected {
    border-color: var(--category-color);
    box-shadow: 0 0 0 3px rgba(24, 144, 255, 0.2);
  }

  .node-content {
    padding: 12px;
  }

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

  .node-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--category-color);
    border-radius: 6px;
    color: #fff;
    font-size: 18px;
    flex-shrink: 0;
  }

  .node-info {
    flex: 1;
    min-width: 0;
  }

  .node-name {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .node-type {
    font-size: 12px;
    color: #999;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .node-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 8px;
    border-top: 1px solid #f0f0f0;
  }

  .node-id {
    font-size: 11px;
    color: #999;
    font-family: monospace;
  }

  .config-badge {
    font-size: 11px;
    color: var(--category-color);
    background: rgba(24, 144, 255, 0.1);
    padding: 2px 6px;
    border-radius: 3px;
  }

  .node-handle {
    width: 10px;
    height: 10px;
    border: 2px solid var(--category-color);
    background: #fff;
    transition: all 0.2s;

    &:hover {
      width: 14px;
      height: 14px;
      background: var(--category-color);
    }
  }

  .node-handle-target {
    left: -5px;
  }

  .node-handle-source {
    right: -5px;
  }
}
</style>

