<template>
  <a-modal :visible="visible" :footer="false" title="设备详情" @cancel="handleClose" width="700px">
    <template v-if="nodeData">
      <a-space direction="vertical" :size="16" fill>
        <!-- 基本信息 -->
        <a-row :gutter="16">
          <a-col :span="12">
            <div class="info-item">
              <div class="label">设备名称</div>
              <div class="value">{{ nodeData.label }}</div>
            </div>
          </a-col>
          <a-col :span="12">
            <div class="info-item">
              <div class="label">设备类型</div>
              <div class="value">{{ nodeData.type }}</div>
            </div>
          </a-col>
          <a-col :span="12">
            <div class="info-item">
              <div class="label">IP地址</div>
              <div class="value">{{ nodeData.ip || '未配置' }}</div>
            </div>
          </a-col>
          <a-col v-if="nodeData.ref_type || nodeData.ref_id" :span="12">
            <div class="info-item">
              <div class="label">资产绑定</div>
              <div class="value">
                {{ nodeData.ref_type || '—' }}
                <template v-if="nodeData.ref_id">#{{ nodeData.ref_id }}</template>
              </div>
            </div>
          </a-col>
          <a-col v-if="nodeData.resource_uid" :span="12">
            <div class="info-item">
              <div class="label">资源UID</div>
              <div class="value">{{ nodeData.resource_uid }}</div>
            </div>
          </a-col>
          <a-col :span="12">
            <div class="info-item">
              <div class="label">设备状态</div>
              <a-tag :color="statusColor">{{ statusText }}</a-tag>
            </div>
          </a-col>
        </a-row>

        <a-divider />

        <!-- 统计信息 -->
        <a-row :gutter="16">
          <a-col :span="12">
            <a-card :bordered="true" class="stat-card">
              <div class="stat-label">链路流量</div>
              <div class="stat-value">{{ nodeData.traffic || '0 Mbps' }}</div>
            </a-card>
          </a-col>
          <a-col :span="12">
            <a-card :bordered="true" class="stat-card">
              <div class="stat-label">告警数量</div>
              <div class="stat-value" :class="{ 'alert-count': nodeData.alerts && nodeData.alerts > 0 }">
                {{ nodeData.alerts || 0 }}
              </div>
            </a-card>
          </a-col>
        </a-row>

        <!-- 告警列表 -->
        <template v-if="nodeData.alerts && nodeData.alerts > 0">
          <a-divider />
          <div class="section-title">当前告警</div>
          <a-list :bordered="false">
            <a-list-item>
              <a-list-item-meta>
                <template #avatar>
                  <icon-exclamation-circle-fill style="font-size: 20px; color: #ff7d00" />
                </template>
                <template #title>CPU使用率过高</template>
                <template #description>当前CPU使用率: 92%, 触发时间: 2025-12-11 09:30</template>
              </a-list-item-meta>
            </a-list-item>
            <a-list-item>
              <a-list-item-meta>
                <template #avatar>
                  <icon-exclamation-circle-fill style="font-size: 20px; color: #f53f3f" />
                </template>
                <template #title>内存不足</template>
                <template #description>当前可用内存: 512MB, 触发时间: 2025-12-11 09:25</template>
              </a-list-item-meta>
            </a-list-item>
          </a-list>
        </template>

        <!-- 描述信息 -->
        <template v-if="nodeData.description">
          <a-divider />
          <div class="info-item">
            <div class="label">设备描述</div>
            <div class="value">{{ nodeData.description }}</div>
          </div>
        </template>
      </a-space>
    </template>

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

<script setup lang="ts">
import { computed } from 'vue'
import { IconExclamationCircleFill } from '@arco-design/web-vue/es/icon'
import type { NodeData } from '../types'

interface Props {
  visible: boolean
  nodeData: NodeData | null
}

interface Emits {
  (e: 'update:visible', value: boolean): void
  (e: 'close'): void
}

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

const statusText = computed(() => {
  if (!props.nodeData) return ''
  switch (props.nodeData.status) {
    case 'normal':
      return '正常'
    case 'warning':
      return '警告'
    case 'error':
      return '错误'
    default:
      return '未知'
  }
})

const statusColor = computed(() => {
  if (!props.nodeData) return 'gray'
  switch (props.nodeData.status) {
    case 'normal':
      return 'green'
    case 'warning':
      return 'orange'
    case 'error':
      return 'red'
    default:
      return 'gray'
  }
})

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

<style scoped lang="less">
.info-item {
  .label {
    font-size: 12px;
    color: #86909c;
    margin-bottom: 4px;
  }

  .value {
    font-size: 14px;
    font-weight: 500;
  }
}

.stat-card {
  text-align: center;

  .stat-label {
    font-size: 12px;
    color: #86909c;
    margin-bottom: 8px;
  }

  .stat-value {
    font-size: 24px;
    font-weight: 600;
    color: #1d2129;

    &.alert-count {
      color: #f53f3f;
    }
  }
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #1d2129;
}
</style>
