<template>
  <div class="detail">
    <div class="header">
      <div>
        <div class="title">{{ record.name || '-' }}</div>
        <a-space>
          <a-tag :color="statusColor">{{ statusText }}</a-tag>
          <a-tag color="arcoblue">{{ formatDeviceCategory(record.category) }}</a-tag>
          <a-tag>{{ (record.vendor || '-') + (record.model ? ` / ${record.model}` : '') }}</a-tag>
        </a-space>
      </div>
      <a-space>
        <a-button type="primary" @click="$emit('edit')">编辑</a-button>
        <a-button status="danger" @click="$emit('delete')">删除</a-button>
      </a-space>
    </div>

    <a-descriptions :column="2" bordered>
      <a-descriptions-item label="服务标识">{{ record.service_identity || '-' }}</a-descriptions-item>
      <a-descriptions-item label="执行节点">{{ record.server_identity || '-' }}</a-descriptions-item>
      <a-descriptions-item label="采集地址">{{ record.host || '-' }}</a-descriptions-item>
      <a-descriptions-item label="端口">{{ record.port || '-' }}</a-descriptions-item>
      <a-descriptions-item label="协议">{{ String(record.protocol || '-').toUpperCase() }}</a-descriptions-item>
      <a-descriptions-item label="SNMP版本">{{ String(record.snmp_version || '-').toUpperCase() }}</a-descriptions-item>
      <a-descriptions-item label="用户名">{{ record.username || '-' }}</a-descriptions-item>
      <a-descriptions-item label="密码">已设置（不回显）</a-descriptions-item>
      <a-descriptions-item label="采集开关">
        <a-tag :color="record.enabled ? 'green' : 'gray'">{{ record.enabled ? '启用' : '停用' }}</a-tag>
      </a-descriptions-item>
      <a-descriptions-item label="采集间隔">{{ record.interval || 0 }} 秒</a-descriptions-item>
      <a-descriptions-item label="状态消息" :span="2">{{ record.status_message || '-' }}</a-descriptions-item>
      <a-descriptions-item label="最近检查">{{ formatTime(record.last_check_time) }}</a-descriptions-item>
      <a-descriptions-item label="响应时间">{{ formatResponseTime(record.response_time) }}</a-descriptions-item>
      <a-descriptions-item label="最近上线">{{ formatTime(record.last_online_time) }}</a-descriptions-item>
      <a-descriptions-item label="最近离线">{{ formatTime(record.last_offline_time) }}</a-descriptions-item>
      <a-descriptions-item label="连续失败次数">{{ record.continuous_errors ?? 0 }}</a-descriptions-item>
      <a-descriptions-item label="运行时长">{{ formatUptime(record.uptime) }}</a-descriptions-item>
      <a-descriptions-item label="标签" :span="2">{{ record.tags || '-' }}</a-descriptions-item>
      <a-descriptions-item label="位置">{{ record.location || '-' }}</a-descriptions-item>
      <a-descriptions-item label="描述">{{ record.description || '-' }}</a-descriptions-item>
    </a-descriptions>
  </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import type { NetworkDeviceService } from '@/api/ops/network-device'

interface Props {
  record: Partial<NetworkDeviceService>
}

const props = defineProps<Props>()
defineEmits(['edit', 'delete'])

const statusMap: Record<string, { text: string; color: string }> = {
  online: { text: '在线', color: 'green' },
  offline: { text: '离线', color: 'red' },
  error: { text: '异常', color: 'orange' },
  unknown: { text: '未知', color: 'gray' },
}

const statusText = computed(() => statusMap[props.record.status || 'unknown']?.text || '未知')
const statusColor = computed(() => statusMap[props.record.status || 'unknown']?.color || 'gray')

const formatDeviceCategory = (category?: string) => {
  const map: Record<string, string> = {
    router: '路由器',
    switch: '交换机',
    firewall: '防火墙',
    access_point: '接入点',
    load_balancer: '负载均衡',
    other: '其他',
  }
  if (!category) return '-'
  return map[category] || category
}

const formatTime = (time?: string | null) => {
  if (!time) return '-'
  if (time.startsWith('0001-01-01')) return '-'
  const d = new Date(time)
  if (Number.isNaN(d.getTime())) return '-'
  if (d.getFullYear() <= 1970) return '-'
  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')} ${String(
    d.getHours()
  ).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}:${String(d.getSeconds()).padStart(2, '0')}`
}

const formatResponseTime = (v?: number) => (typeof v === 'number' && v >= 0 ? `${v.toFixed(2)} ms` : '-')

const formatUptime = (uptime?: number) => {
  if (!uptime || uptime <= 0) return '-'
  const days = Math.floor(uptime / 86400)
  const hours = Math.floor((uptime % 86400) / 3600)
  const minutes = Math.floor((uptime % 3600) / 60)
  if (days > 0) return `${days}天 ${hours}小时`
  if (hours > 0) return `${hours}小时 ${minutes}分钟`
  return `${minutes}分钟`
}
</script>

<style scoped lang="less">
.detail {
  padding: 12px;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
}
</style>
