<template>
  <div class="detail-container">
    <a-descriptions title="基础信息" :column="2" bordered>
      <a-descriptions-item label="ID">{{ record.id }}</a-descriptions-item>
      <a-descriptions-item label="服务标识">{{ record.service_identity }}</a-descriptions-item>
      <a-descriptions-item label="服务名称">{{ record.name }}</a-descriptions-item>
      <a-descriptions-item label="HTTP方法">{{ record.method }}</a-descriptions-item>
      <a-descriptions-item label="目标URL" :span="2">
        <a-link :href="record.target_url" target="_blank">{{ record.target_url }}</a-link>
      </a-descriptions-item>
      <a-descriptions-item label="描述信息" :span="2">{{ record.description || '-' }}</a-descriptions-item>
      <a-descriptions-item label="标签" :span="2">{{ record.tags || '-' }}</a-descriptions-item>
      <a-descriptions-item label="创建时间">{{ formatTime(record.created_at) }}</a-descriptions-item>
      <a-descriptions-item label="更新时间">{{ formatTime(record.updated_at) }}</a-descriptions-item>
    </a-descriptions>

    <a-descriptions title="采集配置" :column="2" bordered class="section-block">
      <a-descriptions-item label="启用状态">
        <a-tag :color="record.enabled ? 'green' : 'gray'">
          {{ record.enabled ? '已启用' : '已禁用' }}
        </a-tag>
      </a-descriptions-item>
      <a-descriptions-item label="采集间隔">{{ record.interval }}秒</a-descriptions-item>
      <a-descriptions-item label="参与周期采集">
        <a-tag :color="record.collect_on ? 'green' : 'gray'">
          {{ record.collect_on ? '已启用' : '未启用' }}
        </a-tag>
      </a-descriptions-item>
      <a-descriptions-item label="周期采集间隔">{{ record.collect_interval }}秒</a-descriptions-item>
      <a-descriptions-item label="额外配置" :span="2">
        <a-textarea :model-value="record.extra" :auto-size="{ minRows: 2, maxRows: 6 }" read-only />
      </a-descriptions-item>
    </a-descriptions>

    <a-descriptions title="运行状态" :column="2" bordered class="section-block">
      <a-descriptions-item label="运行状态">
        <a-tag :color="getStatusColor(record.status)">
          {{ getStatusText(record.status) }}
        </a-tag>
      </a-descriptions-item>
      <a-descriptions-item label="HTTP状态码">{{ record.status_code || '-' }}</a-descriptions-item>

      <a-descriptions-item label="响应时间">{{ record.response_time ? `${record.response_time}ms` : '-' }}</a-descriptions-item>
      <a-descriptions-item label="连续错误次数">{{ record.continuous_errors }}</a-descriptions-item>

      <a-descriptions-item label="最后检查时间">{{ formatTime(record.last_check_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="采集结果摘要" :span="2">{{ record.collect_last_result || '-' }}</a-descriptions-item>
    </a-descriptions>

    <div class="action-bar">
      <a-space>
        <a-button type="primary" @click="$emit('edit')">
          <template #icon><icon-edit /></template>
          编辑
        </a-button>
        <a-button type="outline" @click="$emit('quick-config')">
          <template #icon><icon-settings /></template>
          采集配置
        </a-button>
        <a-button type="outline" status="danger" @click="$emit('delete')">
          <template #icon><icon-delete /></template>
          删除
        </a-button>
      </a-space>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { IconEdit, IconDelete, IconSettings } from '@arco-design/web-vue/es/icon'
import type { UrlDeviceItem } from '@/api/ops/url-device'

interface Props {
  record: UrlDeviceItem
}

defineProps<Props>()
defineEmits(['edit', 'quick-config', 'delete'])

const getStatusColor = (status?: string) => {
  const colorMap: Record<string, string> = {
    online: 'green',
    offline: 'red',
    error: 'orange',
  }
  return colorMap[status || ''] || 'gray'
}

const getStatusText = (status?: string) => {
  const textMap: Record<string, string> = {
    online: '在线',
    offline: '离线',
    error: '错误',
  }
  return textMap[status || ''] || '-'
}

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

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

.section-block {
  margin-top: 16px;
}

.action-bar {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border-2);
}
</style>
