<template>
  <div
    :class="['custom-node', { 'node-selected': selected }]"
    :style="nodeStyle"
  >
    <!-- 连接点 - 目标 -->
    <Handle
      type="target"
      :position="Position.Top"
      class="handle handle-top"
    />

    <!-- 节点内容 -->
    <a-space direction="vertical" align="center" :size="4">
      <a-avatar :size="48" :style="avatarStyle">
        <component :is="iconComponent" :size="28" />
      </a-avatar>
      
      <div class="node-text">
        <div class="node-label">{{ data.label }}</div>
        <div v-if="data.ip" class="node-ip">{{ data.ip }}</div>
      </div>

      <a-tag v-if="data.alerts && data.alerts > 0" color="danger" size="small">
        {{ data.alerts }}个告警
      </a-tag>
    </a-space>

    <!-- 连接点 - 源 -->
    <Handle
      type="source"
      :position="Position.Bottom"
      class="handle handle-bottom"
    />
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { Handle, Position, type NodeProps } from '@vue-flow/core';
import { DEVICE_TYPE_CONFIG } from '../config';
import type { DeviceType, DeviceStatus, NodeData } from '../types';
import {
  IconDesktop,
  IconCloud,
  IconStorage,
  IconMore,
  IconSafe,
  IconFile,
} from '@arco-design/web-vue/es/icon';

// 使用Vue Flow的NodeProps类型
const props = defineProps<NodeProps<NodeData>>();

// 从props中解构数据
const data = computed(() => props.data);
const selected = computed(() => props.selected);

const iconMap: Record<string, any> = {
  server: IconDesktop,
  switch: IconSafe,
  router: IconFile,
  firewall: IconSafe,
  storage: IconStorage,
  cloud: IconCloud,
  desktop: IconDesktop,
  mobile: IconDesktop,
};

const config = computed(() => DEVICE_TYPE_CONFIG[data.value.type] || DEVICE_TYPE_CONFIG.server);
const iconComponent = computed(() => iconMap[data.value.type] || IconDesktop);

const statusColors: Record<string, string> = {
  normal: '#52C41A',
  warning: '#FAAD14',
  error: '#F53F3F',
};

const borderColor = computed(() => statusColors[data.value.status || 'normal']);

const nodeStyle = computed(() => ({
  '--border-color': selected.value ? '#165DFF' : borderColor.value,
  '--bg-color': '#fff',
  '--shadow': selected.value ? '0 4px 12px rgba(0, 0, 0, 0.15)' : '0 2px 6px rgba(0, 0, 0, 0.1)',
}));

const avatarStyle = computed(() => ({
  backgroundColor: `${config.value.color}1A`,
  color: config.value.color,
}));
</script>

<style scoped lang="less">
.custom-node {
  background: var(--bg-color);
  border: 2px solid var(--border-color);
  border-radius: 8px;
  padding: 12px;
  min-width: 140px;
  box-shadow: var(--shadow);
  transition: all 0.2s ease;
  position: relative;

  &:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }

  &.node-selected {
    border-color: #165DFF;
  }

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

  .node-label {
    font-weight: 600;
    font-size: 14px;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .node-ip {
    font-size: 12px;
    color: #86909c;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.handle {
  background: #165DFF;
  width: 10px;
  height: 10px;
  border: 2px solid #fff;
  border-radius: 50%;

  &.handle-top {
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
  }

  &.handle-bottom {
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
  }
}
</style>
