<script setup lang="ts">
import { Modal, Descriptions, Tag, Divider, Alert, Collapse, CollapsePanel } from 'ant-design-vue';
import { computed } from 'vue';

interface ErrorDetail {
  statsId: number;
  apiId: number;
  callTime: string;
  callParams: string;
  executedSql: string;
  responseTime: number;
  callStatus: string;
  errorMessage: string;
  errorStack: string;
  clientIp: string;
  userId: string;
}

const props = defineProps<{
  visible: boolean;
  record: ErrorDetail | null;
}>();

const emit = defineEmits<{
  (e: 'update:visible', value: boolean): void;
  (e: 'close'): void;
}>();

const modalVisible = computed({
  get: () => props.visible,
  set: (value) => emit('update:visible', value),
});

function handleClose() {
  emit('close');
}

// 格式化JSON参数
function formatParams(paramsStr: string) {
  try {
    const params = JSON.parse(paramsStr);
    return JSON.stringify(params, null, 2);
  } catch {
    return paramsStr;
  }
}

// 简化错误堆栈（只显示前10行）
function simplifyStack(stack: string) {
  if (!stack) return '';
  const lines = stack.split('\n').slice(0, 10);
  return lines.join('\n');
}
</script>

<template>
  <Modal
    v-model:open="modalVisible"
    title="错误详情"
    width="80%"
    :footer="null"
    @cancel="handleClose"
  >
    <div v-if="record">
      <!-- 基本信息 -->
      <Descriptions title="调用信息" bordered :column="2" size="small" class="mb-4">
        <Descriptions.Item label="调用时间">
          {{ record.callTime }}
        </Descriptions.Item>
        <Descriptions.Item label="响应时间">
          <Tag color="error">{{ record.responseTime }}ms</Tag>
        </Descriptions.Item>
        <Descriptions.Item label="客户端IP">
          {{ record.clientIp }}
        </Descriptions.Item>
        <Descriptions.Item label="用户ID">
          {{ record.userId }}
        </Descriptions.Item>
        <Descriptions.Item label="调用状态">
          <Tag color="error">ERROR</Tag>
        </Descriptions.Item>
        <Descriptions.Item label="统计ID">
          {{ record.statsId }}
        </Descriptions.Item>
      </Descriptions>

      <Divider />

      <!-- 错误信息 -->
      <Alert
        type="error"
        :message="record.errorMessage"
        class="mb-4"
        show-icon
      />

      <!-- 调用参数 -->
      <Collapse class="mb-4">
        <CollapsePanel key="params" header="调用参数">
          <pre class="code-block">{{ formatParams(record.callParams) }}</pre>
        </CollapsePanel>
      </Collapse>

      <!-- 执行的SQL -->
      <Collapse class="mb-4">
        <CollapsePanel key="sql" header="执行的SQL">
          <pre class="code-block">{{ record.executedSql }}</pre>
        </CollapsePanel>
      </Collapse>

      <!-- 错误堆栈 -->
      <Collapse>
        <CollapsePanel key="stack" header="错误堆栈（前10行）">
          <pre class="code-block error-stack">{{ simplifyStack(record.errorStack) }}</pre>
        </CollapsePanel>
      </Collapse>
    </div>

    <Alert v-else type="warning" message="未加载错误详情数据" />
  </Modal>
</template>

<style scoped>
.mb-4 {
  margin-bottom: 16px;
}

.code-block {
  background: #f5f5f5;
  padding: 12px;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  overflow-x: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.error-stack {
  color: #cf1322;
  background: #fff1f0;
}
</style>