<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 flowItems" :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="professional_type" label="专业" width="90" />
        <el-table-column prop="assignee" label="责任人" min-width="115" />
        <el-table-column label="派发" width="90"><template #default="scope"><el-tag :type="statusTag(scope.row.dispatch_status)" size="small" effect="plain">{{ statusLabel(scope.row.dispatch_status) }}</el-tag></template></el-table-column>
        <el-table-column label="操作" width="90"><template #default="scope"><el-button link type="primary" @click="$emit('redispatch', scope.row)">重新派发</el-button></template></el-table-column>
      </el-table>
    </section>
    <section class="node-section">
      <h3>派发回执</h3>
      <div class="receipt-list"><div v-for="receipt in visual.receipts || []" :key="receipt.workorder_id"><strong>{{ receipt.workorder_id }}</strong><span>{{ receipt.channel }}</span><el-tag size="small" :type="receipt.code === '0' ? 'success' : 'warning'">{{ receipt.message }}</el-tag></div></div>
    </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: []; redispatch: [workorder: Row] }>();
const visual = computed(() => safeObject(props.snapshot.visual_payload));
const workorders = computed<Row[]>(() => Array.isArray(visual.value.workorders) ? visual.value.workorders : []);
const flow = computed(() => safeObject(visual.value.dispatch_flow));
const flowItems = computed(() => [
  { label: "告警生成", value: flow.value.alarm_generated || 0 }, { label: "工单创建", value: flow.value.workorder_created || 0 },
  { label: "责任匹配", value: flow.value.assignment_matched || 0 }, { label: "消息送达", value: flow.value.message_sent || 0 },
  { label: "人员受理", value: flow.value.accepted || 0 }
]);
</script>
