<template>
  <div class="wcs-node" :class="{ selected }" :style="{ '--node-color': color }">
    <Handle type="target" :position="Position.Top" class="h-in" />
    <div class="head">
      <span class="dot" />
      <span class="type">{{ typeLabel }}</span>
      <el-tag v-if="severityTag" size="small" :type="severityTag === '硬性' ? 'danger' : 'warning'" class="sev">
        {{ severityTag }}
      </el-tag>
    </div>
    <div class="label">{{ data.label }}</div>
    <div class="summary">{{ data.summary }}</div>
    <Handle type="source" :position="Position.Bottom" class="h-out" />
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { Handle, Position } from '@vue-flow/core'
import { WCS_NODE_MAP } from './nodeCatalog'
import type { WcsFlowNodeData } from './flowBridge'

const props = defineProps<{
  id: string
  selected?: boolean
  data: WcsFlowNodeData
}>()

const color = computed(() => WCS_NODE_MAP[props.data.type]?.color ?? '#909399')
const typeLabel = computed(() => WCS_NODE_MAP[props.data.type]?.label ?? props.data.type)
const severityTag = computed(() => {
  const s = props.data.summary
  if (s.startsWith('硬性')) return '硬性'
  if (s.startsWith('弹性')) return '弹性'
  return ''
})
</script>

<style scoped>
.wcs-node {
  min-width: 168px;
  max-width: 220px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--el-bg-color);
  border: 1px solid var(--el-border-color);
  border-left: 4px solid var(--node-color);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  font-size: 12px;
}
.wcs-node.selected {
  border-color: var(--node-color);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--node-color) 35%, transparent);
}
.head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--node-color);
}
.type {
  color: var(--el-text-color-secondary);
  font-size: 11px;
}
.sev {
  margin-left: auto;
}
.label {
  font-weight: 600;
  color: var(--el-text-color-primary);
  margin-bottom: 2px;
  word-break: break-all;
}
.summary {
  color: var(--el-text-color-secondary);
  line-height: 1.35;
  word-break: break-all;
}
.h-in,
.h-out {
  width: 8px !important;
  height: 8px !important;
  background: var(--node-color) !important;
  border: 2px solid #fff !important;
}
</style>
