<template>
  <a-drawer
    v-model:visible="visible"
    title="WAF日志详情"
    placement="right"
    :width="'60%'"
    @close="handleCancel"
  >
    <a-spin :spinning="loading">
      <a-descriptions bordered :column="{ xxl: 2, xl: 2, lg: 2, md: 2, sm: 1, xs: 1 }">
        <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-top: 24px; margin-bottom: 24px" />
      
      <h3>详细信息</h3>
      
      <div class="detail-section">
        <h4>User Agent</h4>
        <div class="code-block">
          <pre>{{ info.UserAgent || '无数据' }}</pre>
        </div>
      </div>
      
      <div class="detail-section">
        <h4>原始数据</h4>
        <div class="code-block">
          <pre>{{ info.ExtraData || '无数据' }}</pre>
        </div>
      </div>
    </a-spin>
  </a-drawer>
</template>

<script setup>
import { ref, defineExpose } from 'vue';
import { getLogInfo } from '~/api/log/log.js';

const visible = ref(false);
const loading = ref(false);
const info = ref({});

const fetchInfo = async (id) => {
  try {
    loading.value = true;
    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 open = async (id) => {
  visible.value = true;
  info.value = {}; // 清空上一次的数据
  await fetchInfo(id);
};

const handleCancel = () => {
  visible.value = false;
};

defineExpose({
  open,
});
</script>

<style scoped>
.detail-section {
  margin-bottom: 24px;
}

.detail-section h4 {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 12px;
  color: rgba(0, 0, 0, 0.85);
}

.code-block {
  background-color: #f5f5f5;
  border-radius: 4px;
  padding: 0;
}

pre {
  padding: 16px;
  white-space: pre-wrap;       
  word-wrap: break-word;
  max-height: 300px;
  overflow-y: auto;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}

:deep(.ant-descriptions-item-label),
:deep(.ant-descriptions-item-content) {
  font-size: 14px;
}

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

:deep(.ant-drawer-body) {
  padding: 24px;
}
</style>
