<template>
  <a-modal
    :visible="visible"
    title="告警级别详情"
    width="600px"
    @cancel="handleCancel"
    @update:visible="handleVisibleChange"
    :footer="false"
  >
    <a-spin :loading="loading" style="width: 100%">
      <template v-if="levelDetail">
        <a-space direction="vertical" :size="12" fill>
          <a-card :bordered="false" class="detail-header-card">
            <div class="detail-header">
              <div>
                <div class="detail-title">{{ levelDetail.name || '-' }}</div>
                <div class="detail-subtitle">代码：{{ levelDetail.code || '-' }}</div>
              </div>
              <a-space>
                <a-tag :color="levelDetail.enabled ? 'green' : 'red'">
                  {{ levelDetail.enabled ? '启用' : '禁用' }}
                </a-tag>
                <a-tag :color="levelDetail.is_default ? 'blue' : 'gray'">
                  {{ levelDetail.is_default ? '系统默认' : '自定义' }}
                </a-tag>
              </a-space>
            </div>
          </a-card>

          <a-descriptions :column="2" bordered>
            <a-descriptions-item label="优先级">
              {{ levelDetail.priority }}
            </a-descriptions-item>
            <a-descriptions-item label="图标">
              {{ levelDetail.icon || '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="颜色" :span="2">
              <div class="color-display">
                <div class="color-block" :style="{ backgroundColor: levelDetail.color }"></div>
                <span>{{ levelDetail.color || '-' }}</span>
              </div>
            </a-descriptions-item>
            <a-descriptions-item label="描述" :span="2">
              {{ levelDetail.description || '-' }}
            </a-descriptions-item>
          </a-descriptions>

          <a-descriptions :column="2" bordered>
            <a-descriptions-item label="创建时间">
              {{ formatDate(levelDetail.created_at) }}
            </a-descriptions-item>
            <a-descriptions-item label="更新时间">
              {{ formatDate(levelDetail.updated_at) }}
            </a-descriptions-item>
          </a-descriptions>
        </a-space>
      </template>
    </a-spin>
  </a-modal>
</template>

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

interface Props {
  visible: boolean
  levelId?: number
}

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

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

const loading = ref(false)
const levelDetail = 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',
  })
}

// 加载告警级别详情
const loadLevelDetail = async () => {
  if (!props.levelId) return

  loading.value = true
  try {
    const res: any = await fetchAlertLevelDetail(props.levelId)
    if (res.code === 0) {
      levelDetail.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.levelId) {
      loadLevelDetail()
    }
  }
)

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

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

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

<style scoped lang="less">
.detail-header-card {
  background: var(--color-fill-1);
}

.detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.detail-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-1);
}

.detail-subtitle {
  margin-top: 4px;
  color: var(--color-text-3);
  font-size: 12px;
}

.color-display {
  display: flex;
  align-items: center;
  gap: 8px;
}

.color-block {
  width: 24px;
  height: 24px;
  border: 1px solid var(--color-border-2);
  border-radius: 4px;
}
</style>
