<template>
  <a-modal
    :visible="visible"
    title="告警记录详情"
    width="900px"
    @cancel="handleCancel"
    @update:visible="handleVisibleChange"
    :footer="false"
  >
    <a-spin :loading="loading" style="width: 100%">
      <a-descriptions :column="2" bordered v-if="recordDetail">
        <!-- 基础信息 -->
        <a-descriptions-item label="告警名称" :span="2">
          {{ recordDetail.alert_name || '-' }}
        </a-descriptions-item>
        <a-descriptions-item label="状态">
          <a-tag :color="getStatusColor(recordDetail.status)">
            {{ getStatusText(recordDetail.status) }}
          </a-tag>
        </a-descriptions-item>
        <a-descriptions-item label="告警级别">
          <div style="display: flex; align-items: center; gap: 8px">
            <div
              v-if="recordDetail.severity"
              :style="{
                width: '20px',
                height: '20px',
                backgroundColor: recordDetail.severity.color,
                border: '1px solid var(--color-border-2)',
                borderRadius: '4px',
              }"
            ></div>
            <span>{{ recordDetail.severity?.name || '-' }}</span>
          </div>
        </a-descriptions-item>
        <a-descriptions-item label="摘要" :span="2">
          {{ recordDetail.summary || '-' }}
        </a-descriptions-item>
        <a-descriptions-item label="描述" :span="2">
          {{ recordDetail.description || '-' }}
        </a-descriptions-item>

        <!-- 时间信息 -->
        <a-descriptions-item label="开始时间">
          {{ formatDate(recordDetail.starts_at) }}
        </a-descriptions-item>
        <a-descriptions-item label="结束时间">
          {{ formatDate(recordDetail.ends_at) || '-' }}
        </a-descriptions-item>
        <a-descriptions-item label="持续时长" :span="2">
          {{ formatDuration(recordDetail.duration) }}
        </a-descriptions-item>

        <!-- 处理信息 -->
        <a-descriptions-item label="处理人">
          {{ recordDetail.processed_by || '-' }}
        </a-descriptions-item>
        <a-descriptions-item label="处理时间">
          {{ formatDate(recordDetail.processed_at) || '-' }}
        </a-descriptions-item>

        <!-- 数值信息 -->
        <a-descriptions-item label="当前值">
          {{ recordDetail.value || '-' }}
        </a-descriptions-item>
        <a-descriptions-item label="阈值">
          {{ recordDetail.threshold || '-' }}
        </a-descriptions-item>

        <!-- 通知信息 -->
        <a-descriptions-item label="通知次数">
          {{ recordDetail.notify_count || 0 }}
        </a-descriptions-item>
        <a-descriptions-item label="通知状态">
          {{ recordDetail.notify_status || '-' }}
        </a-descriptions-item>

        <!-- 关联信息 -->
        <a-descriptions-item label="策略ID">
          {{ recordDetail.policy_id || '-' }}
        </a-descriptions-item>
        <a-descriptions-item label="规则ID">
          {{ recordDetail.rule_id || '-' }}
        </a-descriptions-item>

        <!-- 创建与更新时间 -->
        <a-descriptions-item label="创建时间">
          {{ formatDate(recordDetail.created_at) }}
        </a-descriptions-item>
        <a-descriptions-item label="更新时间">
          {{ formatDate(recordDetail.updated_at) }}
        </a-descriptions-item>
      </a-descriptions>
    </a-spin>
  </a-modal>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import { Message } from '@arco-design/web-vue'
import { fetchHistoryDetail } from '@/api/ops/alertHistory'

interface Props {
  visible: boolean
  recordId?: number
}

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

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

const loading = ref(false)
const recordDetail = ref<any>(null)

// 格式化日期
const formatDate = (dateStr: string) => {
  if (!dateStr) return ''
  const date = new Date(dateStr)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
  })
}

// 格式化持续时长
const formatDuration = (duration: number) => {
  if (!duration) return '-'

  const hours = Math.floor(duration / 3600)
  const minutes = Math.floor((duration % 3600) / 60)
  const seconds = duration % 60

  if (hours > 0) {
    return `${hours}小时${minutes}分钟`
  } else if (minutes > 0) {
    return `${minutes}分钟${seconds}秒`
  } else {
    return `${seconds}秒`
  }
}

// 获取状态颜色
const getStatusColor = (status: string) => {
  const colorMap: Record<string, string> = {
    pending: 'gray',
    firing: 'red',
    resolved: 'green',
    silenced: 'blue',
    suppressed: 'orange',
    acked: 'purple',
  }
  return colorMap[status] || 'gray'
}

// 获取状态文本
const getStatusText = (status: string) => {
  const textMap: Record<string, string> = {
    pending: '待处理',
    firing: '触发中',
    resolved: '已解决',
    silenced: '已屏蔽',
    suppressed: '已抑制',
    acked: '已确认',
  }
  return textMap[status] || status
}

// 加载告警记录详情
const loadRecordDetail = async () => {
  if (!props.recordId) return

  loading.value = true
  try {
    const res: any = await fetchHistoryDetail(props.recordId)
    if (res.code === 0) {
      recordDetail.value = res.details
    } else {
      Message.error(res.message || '获取告警记录详情失败')
    }
  } catch (error) {
    console.error('获取告警记录详情失败:', error)
    Message.error('获取告警记录详情失败')
  } finally {
    loading.value = false
  }
}

// 监听对话框显示状态
watch(
  () => props.visible,
  (newVal) => {
    if (newVal && props.recordId) {
      loadRecordDetail()
    } else if (!newVal) {
      recordDetail.value = null
    }
  }
)

// 取消
const handleCancel = () => {
  emit('update:visible', false)
}

// 处理对话框可见性变化
const handleVisibleChange = (visible: boolean) => {
  emit('update:visible', visible)
}
</script>

<script lang="ts">
export default {
  name: 'HistoryDetailDialog',
}
</script>

<style scoped lang="less">
// 样式可以根据需要添加
</style>
