<template>
  <div class="app-container">
    <el-card shadow="never">
      <el-tabs v-model="tab" @tab-click="load">
        <el-tab-pane label="待审批" name="PENDING" />
        <el-tab-pane label="已激活" name="ACTIVE" />
        <el-tab-pane label="草稿" name="DRAFT" />
        <el-tab-pane label="已拒绝" name="REJECTED" />
      </el-tabs>

      <el-table v-loading="loading" :data="list" border size="small">
        <el-table-column label="ID" prop="id" width="70" />
        <el-table-column label="节点类型" prop="nodeType" width="90" />
        <el-table-column label="类型编码" prop="nodeTypeCode" width="140" />
        <el-table-column label="指纹" prop="fingerprint" width="140" show-overflow-tooltip />
        <el-table-column label="评分" prop="qualityScore" width="80">
          <template slot-scope="s">
            <el-tag :type="s.row.qualityScore>=80?'success':s.row.qualityScore>=60?'warning':'danger'" size="mini">
              {{ (s.row.qualityScore||0).toFixed(1) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="调用/成功" width="100">
          <template slot-scope="s">{{ s.row.execCount || 0 }} / {{ s.row.successCount || 0 }}</template>
        </el-table-column>
        <el-table-column label="平均耗时" prop="avgDurationMs" width="90" />
        <el-table-column label="状态" prop="status" width="90">
          <template slot-scope="s">
            <el-tag :type="statusTag(s.row.status)" size="mini">{{ s.row.status }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" fixed="right">
          <template slot-scope="s">
            <el-button v-if="s.row.status==='PENDING'" type="text" size="mini" style="color:#67C23A" @click="approve(s.row)">通过</el-button>
            <el-button v-if="s.row.status==='PENDING'" type="text" size="mini" style="color:#F56C6C" @click="reject(s.row)">拒绝</el-button>
            <el-button type="text" size="mini" @click="showDsl(s.row)">查看DSL</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog title="DSL 详情" :visible.sync="dslDlg" width="700px">
      <pre style="max-height:500px;overflow:auto;background:#1e1e1e;color:#d4d4d4;padding:12px;border-radius:6px;font-size:12px">{{ dslContent }}</pre>
    </el-dialog>

    <el-dialog title="拒绝原因" :visible.sync="rejectDlg" width="400px">
      <el-input v-model="rejectReason" type="textarea" :rows="3" placeholder="请输入拒绝原因" />
      <div slot="footer"><el-button @click="rejectDlg=false">取消</el-button><el-button type="danger" @click="doReject">确认拒绝</el-button></div>
    </el-dialog>
  </div>
</template>

<script>
import { listDynamicImpls, approveDynamicImpl, rejectDynamicImpl } from '@/api/workflow/lobster-e2e'
export default {
  data() {
    return {
      tab: 'PENDING', loading: false, list: [],
      dslDlg: false, dslContent: '',
      rejectDlg: false, rejectRow: null, rejectReason: ''
    }
  },
  created() { this.load() },
  methods: {
    statusTag(s) { return s === 'ACTIVE' ? 'success' : s === 'PENDING' ? 'warning' : s === 'REJECTED' ? 'danger' : 'info' },
    async load() {
      this.loading = true
      try { const res = await listDynamicImpls(this.tab); this.list = res.data || [] } finally { this.loading = false }
    },
    showDsl(row) { this.dslContent = JSON.stringify(JSON.parse(row.subDslJson || '{}'), null, 2); this.dslDlg = true },
    approve(row) { this.$confirm('确认激活此节点实现？激活后下次遇到同类型同指纹节点直接复用', '提示', { type: 'info' }).then(async () => { await approveDynamicImpl(row.id); this.$message.success('已激活'); this.load() }) },
    reject(row) { this.rejectRow = row; this.rejectReason = ''; this.rejectDlg = true },
    async doReject() { await rejectDynamicImpl(this.rejectRow.id, this.rejectReason); this.rejectDlg = false; this.$message.success('已拒绝'); this.load() }
  }
}
</script>
