<template>
  <div class="group-tree-item">
    <div
      :class="['group-item-content', { selected: isSelected }]"
      :style="{ paddingLeft: `${24 + level * 24}px` }"
      @click="handleSelect"
    >
      <!-- 展开/折叠按钮 -->
      <div class="toggle-icon" @click.stop="handleToggle">
        <icon-down v-if="hasChildren && isExpanded" />
        <icon-right v-else-if="hasChildren" />
        <div v-else class="placeholder" />
      </div>

      <!-- 设备图标 -->
      <div class="device-icon" :style="{ background: iconBg, color: iconColor }">
        <component :is="iconComponent" :size="16" />
      </div>

      <!-- 设备信息 -->
      <div class="device-info">
        <div class="device-name">
          {{ nodeData.label }}
          <a-tag v-if="nodeData.status === 'error'" color="red" size="small">异常</a-tag>
          <a-tag v-else-if="nodeData.status === 'warning'" color="orange" size="small">告警</a-tag>
        </div>
        <div class="device-details">
          <span v-if="nodeData.ip" class="ip-address">{{ nodeData.ip }}</span>
          <a-tag v-if="nodeData.alerts && nodeData.alerts > 0" color="red" size="small">
            {{ nodeData.alerts }}个告警
          </a-tag>
        </div>
      </div>
    </div>

    <!-- 子分组 -->
    <a-collapse :model-value="expandedGroups" :default-expanded-key="undefined" :bordered="false">
      <template v-if="hasChildren && isExpanded">
        <group-tree-item
          v-for="child in group.children"
          :key="child.id"
          :group="child"
          :level="level + 1"
          :selected-group="selectedGroup"
          :expanded-groups="expandedGroups"
          :nodes="nodes"
          @select="$emit('select', $event)"
          @toggle="$emit('toggle', $event)"
        />
      </template>
    </a-collapse>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { Node } from '@vue-flow/core';
import { IconDown, IconRight } from '@arco-design/web-vue/es/icon';
import { DEVICE_TYPE_CONFIG } from '../config';
import type { TopoGroup, NodeData, DeviceType } from '../types';

interface Props {
  group: TopoGroup;
  level: number;
  selectedGroup: string | null;
  expandedGroups: Set<string>;
  nodes: Node[];
}

interface Emits {
  (e: 'select', groupId: string): void;
  (e: 'toggle', groupId: string): void;
}

const props = defineProps<Props>();
const emit = defineEmits<Emits>();

const nodeData = computed(() => {
  const node = props.nodes.find((n) => n.id === props.group.nodeId);
  return (node?.data as NodeData) || null;
});

const hasChildren = computed(() => {
  return props.group.children && props.group.children.length > 0;
});

const isExpanded = computed(() => {
  return props.expandedGroups.has(props.group.id);
});

const isSelected = computed(() => {
  return props.selectedGroup === props.group.id;
});

const deviceConfig = computed(() => {
  if (!nodeData.value) return null;
  return DEVICE_TYPE_CONFIG[nodeData.value.type as DeviceType];
});

const iconComponent = computed(() => {
  return deviceConfig.value?.icon;
});

const iconBg = computed(() => {
  const color = deviceConfig.value?.color || '#888';
  return `${color}15`;
});

const iconColor = computed(() => {
  return deviceConfig.value?.color || '#888';
});

const handleSelect = () => {
  emit('select', props.group.id);
};

const handleToggle = () => {
  if (hasChildren.value) {
    emit('toggle', props.group.id);
  }
};
</script>

<style scoped lang="less">
.group-tree-item {
  .group-item-content {
    display: flex;
    align-items: center;
    padding: 12px 8px;
    cursor: pointer;
    transition: all 0.2s;
    border-radius: 4px;
    margin: 4px 8px;

    &:hover {
      background-color: var(--color-fill-2);
    }

    &.selected {
      background-color: var(--color-primary-light-1);
    }
  }

  .toggle-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;

    .placeholder {
      width: 24px;
      height: 24px;
    }
  }

  .device-icon {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    flex-shrink: 0;
  }

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

  .device-name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-1);
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .device-details {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--color-text-3);
  }
}
</style>
