<template>
  <div>
    <div class="toolbar">
      <el-input v-model="eventId" placeholder="请输入 eventId" clearable style="width: 300px; margin-right: 12px" />
      <el-button type="primary" @click="handleQuery">查询</el-button>
    </div>

    <el-timeline v-if="traces.length > 0">
      <el-timeline-item
        v-for="trace in traces"
        :key="trace.id"
        :type="trace.status === 'success' ? 'success' : 'danger'"
      >
        <p>节点类型: {{ trace.nodeType }}</p>
        <p>状态: {{ trace.status }}</p>
        <p>耗时: {{ trace.durationMs }} ms</p>
        <p v-if="trace.errorMsg" class="error-msg">错误: {{ trace.errorMsg }}</p>
      </el-timeline-item>
    </el-timeline>

    <el-empty v-else description="暂无追踪数据" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { getFlowTraces } from '@/api/inbound'

const eventId = ref('')
const traces = ref<any[]>([])

async function handleQuery() {
  if (!eventId.value) {
    ElMessage.warning('请输入事件ID')
    return
  }

  try {
    const res: any = await getFlowTraces(eventId.value)
    traces.value = res.data || []
  } catch (e: any) {
    ElMessage.error(e.message)
  }
}
</script>

<style scoped>
.toolbar {
  margin-bottom: 16px;
}
.error-msg {
  color: #f56c6c;
}
</style>
