<template>
  <page-container>
    <a-card :bordered="false" :loading="loading">
      <a-descriptions title="日志详情" :column="{ xs: 1, sm: 2, md: 3 }">
        <a-descriptions-item label="ID">{{ info.Id }}</a-descriptions-item>
        <a-descriptions-item label="Trace ID">{{ info.TraceId }}</a-descriptions-item>
        <a-descriptions-item label="用户ID">{{ info.Uid }}</a-descriptions-item>
        <a-descriptions-item label="请求IP">{{ info.RequestIp }}</a-descriptions-item>
        <a-descriptions-item label="状态码">{{ info.StatusCode }}</a-descriptions-item>
        <a-descriptions-item label="API">{{ info.Api }}</a-descriptions-item>
        <a-descriptions-item label="消息">{{ info.Message }}</a-descriptions-item>
        <a-descriptions-item label="创建时间">{{ info.CreatedAt }}</a-descriptions-item>
        <a-descriptions-item label="更新时间">{{ info.UpdatedAt }}</a-descriptions-item>
      </a-descriptions>
      <a-divider style="margin-bottom: 32px"/>
      
      <a-descriptions title="User Agent" :column="1">
        <a-descriptions-item>
          <pre>{{ info.UserAgent || '无数据' }}</pre>
        </a-descriptions-item>
      </a-descriptions>
      <a-divider style="margin-bottom: 32px"/>
      
      <a-descriptions title="原始数据" :column="1">
        <a-descriptions-item>
          <pre>{{ info.ExtraData || '无数据' }}</pre>
        </a-descriptions-item>
      </a-descriptions>
      
      <a-divider style="margin-bottom: 32px"/>
      <a-button type="primary" @click="handleBack">返回</a-button>
    </a-card>
  </page-container>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { getLogInfo } from '~/api/log/log.js';

const router = useRouter();
const route = useRoute();
const info = ref({});
const loading = ref(true);

const fetchInfo = async () => {
  try {
    loading.value = true;
    const id = route.params.id;
    console.log('获取日志ID:', id);
    
    const response = await getLogInfo(id);
    console.log('日志详情响应:', response);
    
    // 处理不同的返回格式
    if (response && response.code === 0 && response.data) {
      info.value = response.data;
    } else if (response && response.data) {
      info.value = response.data;
    } else {
      info.value = response || {};
    }
    
    // 可以处理特殊字段
    if (info.value.ExtraData && typeof info.value.ExtraData === 'string') {
      try {
        // 尝试解析JSON字符串为对象，便于美化显示
        const parsedData = JSON.parse(info.value.ExtraData);
        info.value.ExtraData = JSON.stringify(parsedData, null, 2);
      } catch (e) {
        // 不是JSON格式，保持原样
      }
    }
    
  } catch (error) {
    console.error('获取日志详情出错:', error);
  } finally {
    loading.value = false;
  }
};

const handleBack = () => {
  router.push('/log/log');
};

onMounted(() => {
  fetchInfo();
});
</script>
<style scoped>
pre {
  background-color: #f5f5f5;
  padding: 15px;
  border-radius: 5px;
  white-space: pre-wrap;       
  word-wrap: break-word;
  max-height: 400px;
  overflow-y: auto;
  font-family: 'Courier New', Courier, monospace;
  font-size: 14px;
  line-height: 1.5;
}

:deep(.ant-descriptions-item-label) {
  font-weight: bold;
  min-width: 120px;
}

:deep(.ant-descriptions-row > th, .ant-descriptions-row > td) {
  padding-bottom: 16px;
}
</style>
