<template>
  <a-modal
    v-model:visible="visible"
    title="设备操作"
    :footer="false"
    width="400px"
    @cancel="handleClose"
  >
    <template v-if="node">
      <div class="node-action-content">
        <!-- 设备信息概览 -->
        <div class="device-info">
          <div
            class="device-icon-wrapper"
            :style="{ backgroundColor: `${config.color}20`, color: config.color }"
          >
            <component :is="config.icon" :size="40" />
          </div>
          <div class="device-name">{{ node.data?.label || '未命名' }}</div>
          <div class="device-type">{{ config.label }}</div>
          <div v-if="node.data?.ip" class="device-ip">IP: {{ node.data.ip }}</div>
          <a-tag
            :color="statusColor[node.data?.status || 'normal']"
            class="device-status"
            size="small"
          >
            {{ statusText[node.data?.status || 'normal'] }}
          </a-tag>
        </div>

        <a-divider />

        <!-- 操作按钮 -->
        <div class="action-buttons">
          <a-button long @click="handleViewDetail">
            <template #icon>
              <icon-info-circle />
            </template>
            查看详情
          </a-button>
          <a-button long @click="handleEdit">
            <template #icon>
              <icon-edit />
            </template>
            编辑设备
          </a-button>
          <a-button long status="danger" @click="handleDelete">
            <template #icon>
              <icon-delete />
            </template>
            删除设备
          </a-button>
        </div>
      </div>
    </template>

    <template #footer>
      <a-button @click="handleClose">关闭</a-button>
    </template>
  </a-modal>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { 
  IconInfoCircle, 
  IconEdit, 
  IconDelete,
  IconDesktop,
  IconCloud,
  IconStorage,
  IconSafe,
  IconFile,
  IconMore
} from '@arco-design/web-vue/es/icon';
import { DEVICE_TYPE_CONFIG } from '../config';
import { DeviceType } from '../types';

interface Props {
  open: boolean;
  node: any;
}

interface Emits {
  (e: 'update:open', value: boolean): void;
  (e: 'viewDetail'): void;
  (e: 'edit'): void;
  (e: 'delete'): void;
}

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

const visible = computed({
  get: () => props.open,
  set: (value) => emit('update:open', value)
});

const iconMap: Record<DeviceType, any> = {
  server: IconDesktop,
  router: IconFile,
  switch: IconSafe,
  desktop: IconDesktop,
  cloud: IconCloud,
  text: IconMore,
  region: IconStorage,
};

const config = computed(() => {
  const type = props.node?.data?.type as DeviceType || 'server';
  const deviceConfig = DEVICE_TYPE_CONFIG[type];
  return {
    ...deviceConfig,
    icon: iconMap[type] || iconMap.server,
  };
});

const statusColor: Record<string, string> = {
  normal: 'green',
  warning: 'orange',
  error: 'red',
};

const statusText: Record<string, string> = {
  normal: '正常',
  warning: '警告',
  error: '错误',
};

const handleViewDetail = () => {
  emit('viewDetail');
  handleClose();
};

const handleEdit = () => {
  emit('edit');
  handleClose();
};

const handleDelete = () => {
  emit('delete');
  handleClose();
};

const handleClose = () => {
  emit('update:open', false);
};
</script>

<style scoped lang="less">
.node-action-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.device-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 0;
  text-align: center;
}

.device-icon-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-bottom: 12px;
}

.device-name {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-1);
  margin-bottom: 4px;
}

.device-type {
  font-size: 14px;
  color: var(--color-text-3);
  margin-bottom: 4px;
}

.device-ip {
  font-size: 12px;
  color: var(--color-text-3);
  margin-bottom: 8px;
}

.device-status {
  margin-top: 8px;
}

.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
</style>
