<template>
  <div class="app-container">
    <el-card shadow="never">
      <el-row :gutter="8" type="flex" justify="space-between" style="margin-bottom:12px">
        <el-col :span="14">
          <el-input v-model="query.runId" placeholder="runId" size="small" style="width:280px" clearable @keyup.enter.native="searchById" />
          <el-button type="primary" size="small" icon="el-icon-search" @click="load" style="margin-left:8px">刷新</el-button>
        </el-col>
        <el-col :span="10" style="text-align:right">
          <el-tag>成功 {{ stats.success }}</el-tag>
          <el-tag type="danger" style="margin-left:6px">失败 {{ stats.failed }}</el-tag>
          <el-tag type="warning" style="margin-left:6px">运行中 {{ stats.running }}</el-tag>
        </el-col>
      </el-row>

      <el-table v-loading="loading" :data="list" border size="small" @row-click="showDetail">
        <el-table-column label="runId" prop="runId" width="240" show-overflow-tooltip />
        <el-table-column label="模板" prop="templateId" width="80" />
        <el-table-column label="实例" prop="instanceId" width="80" />
        <el-table-column label="业务描述" prop="businessDesc" show-overflow-tooltip />
        <el-table-column label="总分" prop="totalScore" width="80">
          <template slot-scope="s">
            <el-tag v-if="s.row.totalScore != null" :type="s.row.totalScore >= 60 ? 'success' : 'danger'" size="mini">{{ s.row.totalScore.toFixed(1) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="通过/总" width="100">
          <template slot-scope="s">{{ s.row.passedNodeCnt || 0 }} / {{ s.row.totalNodeCnt || 0 }}</template>
        </el-table-column>
        <el-table-column label="耗时(ms)" prop="durationMs" width="100" />
        <el-table-column label="进化建议" prop="evolutionCount" width="100" />
        <el-table-column label="状态" prop="status" width="100">
          <template slot-scope="s"><el-tag :type="statusType(s.row.status)" size="mini">{{ s.row.status }}</el-tag></template>
        </el-table-column>
        <el-table-column label="时间" prop="createTime" width="160" />
      </el-table>
    </el-card>

    <el-drawer title="E2E 运行明细" :visible.sync="drawer" size="55%" direction="rtl">
      <div v-if="detail" style="padding: 0 16px">
        <el-descriptions :column="2" border size="small" style="margin-bottom:12px">
          <el-descriptions-item label="runId">{{ detail.runId }}</el-descriptions-item>
          <el-descriptions-item label="状态">{{ detail.status }}</el-descriptions-item>
          <el-descriptions-item label="总分">{{ detail.totalScore }}</el-descriptions-item>
          <el-descriptions-item label="通过/总">{{ detail.passedNodeCnt }} / {{ detail.totalNodeCnt }}</el-descriptions-item>
          <el-descriptions-item label="耗时">{{ detail.durationMs }} ms</el-descriptions-item>
          <el-descriptions-item label="进化建议">{{ detail.evolutionCount }}</el-descriptions-item>
        </el-descriptions>
        <el-table :data="detail.nodeTraces" border size="mini">
          <el-table-column label="#" prop="nodeSeq" width="50" />
          <el-table-column label="节点" prop="nodeCode" />
          <el-table-column label="轮" prop="turnNo" width="50" />
          <el-table-column label="用户" prop="userInput" show-overflow-tooltip />
          <el-table-column label="AI" prop="aiOutput" show-overflow-tooltip />
          <el-table-column label="分" prop="score" width="60">
            <template slot-scope="s">
              <el-tag v-if="s.row.score" :type="s.row.score >= 60 ? 'success' : 'danger'" size="mini">{{ s.row.score.toFixed(0) }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="耗时" prop="durationMs" width="80" />
        </el-table>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { listE2eRuns, getE2eReport } from '@/api/workflow/lobster-e2e'
export default {
  data() {
    return {
      loading: false, list: [], query: { runId: '', pageNum: 1, pageSize: 50 },
      stats: { success: 0, failed: 0, running: 0 },
      drawer: false, detail: null
    }
  },
  created() { this.load() },
  methods: {
    statusType(s) { return s === 'SUCCESS' ? 'success' : s === 'FAILED' ? 'danger' : 'warning' },
    async load() {
      this.loading = true
      try {
        const res = await listE2eRuns(this.query)
        const d = res.data !== undefined ? res.data : res
        this.list = Array.isArray(d) ? d : (d && d.list) || []
        this.stats = this.list.reduce((acc, x) => {
          if (x.status === 'SUCCESS') acc.success++
          else if (x.status === 'FAILED') acc.failed++
          else acc.running++
          return acc
        }, { success: 0, failed: 0, running: 0 })
      } finally { this.loading = false }
    },
    async searchById() {
      if (!this.query.runId) return this.load()
      const res = await getE2eReport(this.query.runId)
      if (res.data) { this.detail = res.data; this.drawer = true }
    },
    async showDetail(row) {
      const res = await getE2eReport(row.runId)
      this.detail = res.data || row
      this.drawer = true
    }
  }
}
</script>
