<template>
  <div class="detail-container">
    <a-descriptions :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="设备分类">
        {{ DEVICE_CATEGORY_MAP[record.device_category] || record.device_category }}
      </a-descriptions-item>
      <a-descriptions-item label="机房ID">{{ record.room_id }}</a-descriptions-item>
      <a-descriptions-item label="描述信息" :span="2">{{ record.description || '-' }}</a-descriptions-item>

      <a-descriptions-item label="采集地址" :span="2">
        <a-link v-if="record.agent_config" :href="record.agent_config" target="_blank">{{ record.agent_config }}</a-link>
        <span v-else>-</span>
      </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="参与周期采集">
        <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">{{ record.collect_last_result || '-' }}</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>

    <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" @click="handleViewMetrics">
          <template #icon><icon-eye /></template>
          查看最新指标
        </a-button>
        <a-button type="outline" status="danger" @click="$emit('delete')">
          <template #icon><icon-delete /></template>
          删除
        </a-button>
      </a-space>
    </div>

    <a-drawer v-model:visible="metricsVisible" :width="800" title="最新指标数据" :footer="false" unmount-on-close>
      <a-spin :loading="metricsLoading" style="width: 100%">
        <div v-if="metricsData.length > 0">
          <a-list :bordered="false">
            <a-list-item v-for="(item, index) in metricsData" :key="index">
              <a-descriptions :column="3" size="small">
                <a-descriptions-item label="指标名称">{{ item.metric_name }}</a-descriptions-item>
                <a-descriptions-item label="指标值">{{ item.metric_value }} {{ item.metric_unit || '' }}</a-descriptions-item>
                <a-descriptions-item label="类型">{{ item.type || '-' }}</a-descriptions-item>
                <a-descriptions-item label="时间">{{ formatTime(item.timestamp) }}</a-descriptions-item>
              </a-descriptions>
            </a-list-item>
          </a-list>
        </div>
        <a-empty v-else description="暂无指标数据" />
      </a-spin>
    </a-drawer>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { Message } from '@arco-design/web-vue'
import { IconEdit, IconDelete, IconSettings, IconEye } from '@arco-design/web-vue/es/icon'
import { DEVICE_CATEGORY_MAP, fetchLatestMetrics, type RoomDeviceItem, type MetricItem } from '@/api/ops/room-device'

interface Props {
  record: RoomDeviceItem
}

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

const metricsVisible = ref(false)
const metricsLoading = ref(false)
const metricsData = ref<MetricItem[]>([])

const handleViewMetrics = async () => {
  metricsVisible.value = true
  metricsLoading.value = true
  try {
    const response = await fetchLatestMetrics(props.record.service_identity)
    metricsData.value = (response as any)?.details?.data || []
  } catch (error) {
    console.error('获取最新指标失败:', error)
    Message.error('获取最新指标失败')
    metricsData.value = []
  } finally {
    metricsLoading.value = false
  }
}

const formatTime = (time?: string) => {
  if (!time) return '-'
  const date = new Date(time)
  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;
}

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