<template>
  <div class="node-palette">
    <div class="palette-title">节点类型</div>
    <div class="palette-list">
      <div
        v-for="item in nodeTypes"
        :key="item.type"
        class="palette-item"
        draggable="true"
        @dragstart="onDragStart($event, item.type)"
      >
        <component :is="item.icon" class="item-icon" :style="{ color: item.color }" />
        <div class="item-info">
          <div class="item-name">{{ item.name }}</div>
          <div class="item-desc">{{ item.desc }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  ThunderboltOutlined,
  BranchesOutlined,
  UserOutlined,
  ForkOutlined,
} from '@ant-design/icons-vue'

const nodeTypes = [
  {
    type: 'skill',
    name: '技能节点',
    desc: '引用已注册的技能',
    icon: ThunderboltOutlined,
    color: '#1890ff',
  },
  {
    type: 'condition',
    name: '条件节点',
    desc: 'If/else 条件分支',
    icon: BranchesOutlined,
    color: '#faad14',
  },
  {
    type: 'approval',
    name: '审批节点',
    desc: '人工审批关卡',
    icon: UserOutlined,
    color: '#722ed1',
  },
  {
    type: 'parallel',
    name: '并行节点',
    desc: '并行执行组',
    icon: ForkOutlined,
    color: '#52c41a',
  },
]

function onDragStart(event: DragEvent, nodeType: string) {
  if (event.dataTransfer) {
    event.dataTransfer.setData('application/vueflow', nodeType)
    event.dataTransfer.effectAllowed = 'move'
  }
}
</script>

<style scoped>
.node-palette {
  width: 200px;
  border-right: 1px solid #f0f0f0;
  background: #fafafa;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
}

.palette-title {
  padding: 12px 16px;
  font-weight: 600;
  font-size: 14px;
  color: #333;
  border-bottom: 1px solid #f0f0f0;
}

.palette-list {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.palette-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  cursor: grab;
  transition: all 0.2s;
}

.palette-item:hover {
  border-color: #1890ff;
  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.15);
}

.palette-item:active {
  cursor: grabbing;
}

.item-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.item-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.item-name {
  font-size: 13px;
  font-weight: 500;
  color: #333;
}

.item-desc {
  font-size: 11px;
  color: #999;
}
</style>
