<template>
  <StepPanelShell title="工单闭环" :snapshot="snapshot">
    <template #actions><el-button v-if="snapshot.status === 'failed'" type="danger" plain @click="$emit('retry')">重试闭环同步</el-button></template>
    <section class="node-section">
      <h3>闭环状态</h3>
      <div class="flow-metrics"><div v-for="item in statusItems" :key="item.label"><strong>{{ item.value }}</strong><span>{{ item.label }}</span></div></div>
    </section>
    <section class="node-section">
      <div class="section-heading"><h3>处置与复核</h3><span>{{ workorders.length }} 项</span></div>
      <el-table :data="workorders" size="small" max-height="340" row-key="workorder_id">
        <el-table-column prop="workorder_id" label="工单" min-width="150" show-overflow-tooltip />
        <el-table-column prop="scene" label="场景" min-width="120" />
        <el-table-column prop="assignee" label="处置人" min-width="110" />
        <el-table-column label="状态" width="90"><template #default="scope"><el-tag :type="statusTag(scope.row.status)" size="small" effect="plain">{{ statusLabel(scope.row.status) }}</el-tag></template></el-table-column>
        <el-table-column prop="close_result" label="处置结果" min-width="120" show-overflow-tooltip />
        <el-table-column label="复核" width="125"><template #default="scope"><el-button link type="success" :disabled="scope.row.status === 'closed'" @click="$emit('review', scope.row, 'approve')">通过</el-button><el-button link type="danger" :disabled="scope.row.status === 'closed'" @click="$emit('review', scope.row, 'return')">退回</el-button></template></el-table-column>
      </el-table>
    </section>
    <section class="node-section">
      <h3>操作记录</h3>
      <el-timeline class="operation-timeline"><el-timeline-item v-for="record in operations" :key="record.id" :timestamp="String(record.created_at || '')" placement="top"><strong>{{ operationLabel(record.operation_type) }}</strong><span>{{ record.operator_name }} · {{ record.result || record.comment || '-' }}</span></el-timeline-item></el-timeline>
    </section>
  </StepPanelShell>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { safeObject, statusLabel, statusTag, type Row, type StepSnapshot } from "../../../types/demo-run";
import StepPanelShell from "../common/StepPanelShell.vue";
const props = defineProps<{ snapshot: StepSnapshot }>();
defineEmits<{ retry: []; review: [workorder: Row, action: "approve" | "return"] }>();
const visual = computed(() => safeObject(props.snapshot.visual_payload));
const workorders = computed<Row[]>(() => Array.isArray(visual.value.workorders) ? visual.value.workorders : []);
const operations = computed<Row[]>(() => Array.isArray(visual.value.operation_records) ? visual.value.operation_records : []);
const counts = computed(() => safeObject(visual.value.status_counts));
const statusItems = computed(() => [
  { label: "工单总数", value: workorders.value.length }, { label: "待受理", value: counts.value.created || 0 },
  { label: "处理中", value: counts.value.processing || 0 }, { label: "待复核", value: counts.value.reviewing || 0 },
  { label: "已闭环", value: counts.value.closed || 0 }
]);
function operationLabel(value: unknown) { return ({ status_callback: "状态回调", review_approved: "复核通过", review_returned: "退回重办", redispatched: "重新派发" } as Record<string, string>)[String(value)] || String(value); }
</script>
