/**
 * 仿真试跑台 —— 浅色桌面上的**一台仪器**。
 *
 * 这里检测的是**后端的活动与流程**,不是这一屏自己:起单走的是流程包的调用接口
 * (`POST /api/gov/testbed/run`),与触发器起单同一条路;起出来的是**真任务**,
 * 照旧落到被指派人的工作台上。测试台不代答 —— 它只管两件事:
 *   ① 把流跑起来(装配态) ② 看穿它怎么跑的(观测态)
 *
 * 视觉语言分两个世界:**机器说 mono**(读数、灯、编号、TRACE),
 * **那封信说无衬线** —— 它是外界唯一伸进这台仪器的东西。
 * 戏眼是左栏的「抽键预检」读数屏:通道的正则**实时**跑在正打的字上
 * (与服务端同一套规则,契约原文回传,不另编一套)。
 * 预检是**信息**,不是闸(宽进,2026-07-30):抽不全照样起 —— 缺的键进活动后
 * 由受理归一派补全单收齐;灯只告诉你「哪些会当场带上、哪些要有人补」。
 */
import { useMemo, useState } from 'react';
import type { ReactNode } from 'react';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import type { GovChannelsOutput, ProcessNode, ProcessPackage } from '@contracts';
import { TERMINAL_STATE_LABEL, WORKFLOW_STATE_LABEL, testCurrentRoute, testRunRoute, testStopRoute } from '@contracts';
import { Ico } from '@web-shared/Ico.tsx';
import { call } from '@web-shared/typed-fetch.ts';
import { useGovChannels, useGovPackages, useGovStaff } from '@web-shared/gov/gov-api.ts';
import { QueryGate } from '@web-shared/gov/primitives.tsx';
import type { Nav } from '@web-shared/gov/gov-route.ts';
import { isLive, useRunTrace, useRunWorkflow } from './run-api.ts';
import { TraceSheet } from './trace-sheet.tsx';

type RunOutput = { workflowId: string; state: string };
type Channel = GovChannelsOutput['channels'][number];
type ExtractRule = Channel['extract'][number];

/** 只有活动点与审批点会解析负责人 —— 起点终点没有「派给谁」这回事 */
const isAssignable = (n: ProcessNode): boolean => n.kind === 'activity' || n.kind === 'approval';

/* ==================== 启动输入:一封信 ==================== */

type MailDraft = {
  from: string;
  to: string;
  subject: string;
  body: string;
  attachments: ReadonlyArray<{ name: string; contentType: string; size: number }>;
};

const XLSX = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';

/**
 * 预填一封**抽得出键**的信 —— 主题里带客户码与询价单号,
 * 通道的抽键正则就是照着这两样写的;改坏了,左边的预检灯当场熄给你看。
 */
const SAMPLE_MAIL: MailDraft = {
  from: 'buyer@sz-machinery.com',
  to: '',
  subject: '【询价】C014 / RFQ-2607-001 工控主板 BOM 12 项',
  body: '你好,附件是本次询价的 BOM,共 12 项,请按标准交期报价。\n付款方式沿用上次合同。',
  attachments: [{ name: 'BOM-RFQ-2607-001.xlsx', contentType: XLSX, size: 28_416 }],
};

/**
 * 抽键预检 —— **镜像服务端 `extractFields` 的取料与取值**(首个捕获组,无组取全匹配)。
 * 服务端仍是唯一裁判:这里只负责在打字时点灯,起单被退回的判词永远以服务端为准。
 */
function preflight(rules: readonly ExtractRule[], mail: MailDraft): ReadonlyMap<string, string> {
  const out = new Map<string, string>();
  for (const rule of rules) {
    const haystack =
      rule.source === 'subject'
        ? mail.subject
        : rule.source === 'body'
          ? mail.body
          : rule.source === 'from'
            ? mail.from
            : rule.source === 'to'
              ? mail.to
              : `${mail.subject}\n${mail.body}`;
    try {
      const match = new RegExp(rule.regex).exec(haystack);
      const captured = match?.[1] ?? match?.[0];
      if (captured !== undefined) out.set(rule.key, captured);
    } catch {
      /* 配置里的正则写坏了:按未命中点灯,不让预检把整屏拖死 */
    }
  }
  return out;
}

/** 信本身就带的字段 —— 装配时从载荷取,不走抽键,预检不必为它们报「无规则」 */
const MAIL_BUILTIN = new Set(['subject', 'body', 'from', 'quotedAt', 'occurredAt']);

/** 调用接口声明的必填键(JSON-Schema 的 required) */
function requiredOf(pkg: ProcessPackage | undefined): readonly string[] {
  const input = pkg?.callInterface.input as { required?: string[] } | undefined;
  return input?.required ?? [];
}

/* ==================== 台面骨架 ==================== */

/**
 * 仪器顶条 —— 装配态与观测态共用同一根:左边一盏灯 + 状态词,右边是这一态的读数与动作。
 * 两态换的是灯色与右侧内容,骨架不换 —— 起单前后你面对的是同一台机器。
 */
function Strip({
  lamp,
  breathe,
  word,
  detail,
  right,
}: {
  lamp: 'idle' | 'live' | 'wait' | 'done' | 'bad';
  breathe: boolean;
  word: string;
  detail?: ReactNode;
  right?: ReactNode;
}): ReactNode {
  return (
    <div className="tb-strip">
      <i className={`tb-lamp ${lamp}${breathe ? ' breathe' : ''}`} />
      <span className="word">{word}</span>
      {detail !== undefined && <span className="det">{detail}</span>}
      {right !== undefined && <span className="x">{right}</span>}
    </div>
  );
}

/* ==================== 装配态 ==================== */

export function SimulateRun({ nav }: { nav: Nav }): ReactNode {
  const pkgQ = useGovPackages();
  const staffQ = useGovStaff();
  const chanQ = useGovChannels();

  /** 只列有生效版的:同一个包可能存着多版,能起单的只有 `active` 那一版 */
  const livePkgs = useMemo<ProcessPackage[]>(
    () => (pkgQ.data?.packages ?? []).filter((p) => p.state === 'active'),
    [pkgQ.data],
  );
  const staff = useMemo(() => (staffQ.data?.staff ?? []).filter((s) => s.state === 'active'), [staffQ.data]);
  const staffName = (id: string): string => staff.find((s) => s.id === id)?.name ?? id;
  const mailChannels = (chanQ.data?.channels ?? []).filter((ch) => ch.kind === 'mail' && ch.enabled);

  const [pickedId, setPicked] = useState('');
  const [mail, setMail] = useState<MailDraft>(SAMPLE_MAIL);
  const [assignments, setAssignments] = useState<Readonly<Record<string, string>>>({});
  const queryClient = useQueryClient();
  const [workflowId, setWorkflowId] = useState<string | undefined>(undefined);
  /*
   * **一次只跑一条**:刷新页面也认得回来 —— 不然仿真在后台跑着,界面上却像没起过,
   * 人会再起一单(而上一单的任务还在别人工作台上挂着)。
   */
  const current = useQuery({
    queryKey: ['gov', 'testbed', 'current'],
    queryFn: () => call<{ workflowId?: string; subject?: string }>(testCurrentRoute),
  });
  const running = workflowId ?? current.data?.workflowId;

  /** 停止仿真 = **销毁**:工作流、活动任务、工单、实例、trace 一并拔掉 */
  const stop = useMutation({
    mutationFn: (id: string) => call<{ destroyed: boolean; tasks: number }>(testStopRoute, { body: { workflowId: id } }),
    onSuccess: () => {
      setWorkflowId(undefined);
      run.reset();
      void queryClient.invalidateQueries({ queryKey: ['gov', 'testbed'] });
      void queryClient.invalidateQueries({ queryKey: ['desk'] });
    },
  });
  const [error, setError] = useState<string | undefined>(undefined);

  // 没选就落到第一个:常见情形只有一个生效包、一个邮件通道,不该逼人先各点一下
  const pkg = livePkgs.find((p) => p.id === pickedId) ?? livePkgs[0];
  const nodes = useMemo(() => (pkg?.nodes ?? []).filter(isAssignable), [pkg]);
  const channel = mailChannels.find((ch) => ch.address === mail.to) ?? mailChannels[0];

  /* 预检:通道正则 × 正打的字,实时点灯 */
  const caught = useMemo(
    () => preflight(channel?.extract ?? [], mail),
    [channel, mail],
  );
  const required = requiredOf(pkg);
  const ruleKeys = new Set((channel?.extract ?? []).map((r) => r.key));
  /** 必填但既不是信自带、又没有任何抽键规则 —— 这键只能靠受理补全单找人收 */
  const unruled = required.filter((k) => !MAIL_BUILTIN.has(k) && !ruleKeys.has(k));
  const mustCatch = required.filter((k) => ruleKeys.has(k));
  // 宽进:预检不再决定上不上膛 —— 抽不全照样起,缺的进活动后补全单收齐
  const keysReady = mustCatch.every((k) => caught.has(k)) && unruled.length === 0;
  const fireable = pkg !== undefined && channel !== undefined && mail.from.trim() !== '' && mail.subject.trim() !== '';
  const armed = fireable;

  const run = useMutation({
    mutationFn: (input: { packageId: string; mail: MailDraft; assignments: Record<string, string> }) =>
      call<RunOutput>(testRunRoute, { body: input }),
    onSuccess: (r) => {
      setWorkflowId(r.workflowId);
      setError(undefined);
      void queryClient.invalidateQueries({ queryKey: ['gov', 'testbed', 'current'] });
    },
    // 后端的判词照抄:「抽不出客户码」「无生效版」都是要人改配置的话,不该被我改写
    onError: (e: unknown) => setError((e as { message?: string }).message ?? '起单失败'),
  });

  const fire = (): void => {
    if (pkg === undefined || channel === undefined) return;
    run.mutate({
      packageId: pkg.id,
      mail: { ...mail, to: channel.address },
      assignments: Object.fromEntries(Object.entries(assignments).filter(([, v]) => v !== '')),
    });
  };

  if (running !== undefined) {
    return (
      <Observe id={running} staffName={staffName} nav={nav} stopping={stop.isPending} onBack={() => stop.mutate(running)} />
    );
  }

  const pinned = Object.values(assignments).filter((v) => v !== '').length;
  const ai = staff.find((s) => s.name === 'AI');

  return (
    <div className="g-tb">
      <Strip
        lamp="idle"
        breathe={false}
        word="装配中"
        detail={pkg === undefined ? '没有可起单的流程包' : `${pkg.name} v${pkg.version} · 单例仿真`}
        right={`抽键 ${mustCatch.filter((k) => caught.has(k)).length}/${mustCatch.length} · 指派 ${pinned}/${nodes.length}`}
      />

      <QueryGate query={pkgQ}>
        {livePkgs.length === 0 ? (
          <div className="tb-slot">
            <Ico name="scan" s={26} />
            <b>台面上还没有流</b>
            <p>试跑要有一个生效版才起得来 —— 去流程包激活一版,回来它就出现在这里。</p>
            <button className="g-btn" onClick={() => nav.jump('workflows', 'pkgs')}>
              <Ico name="workflow" s={12} />
              去流程包
            </button>
          </div>
        ) : (
          <div className="g-rig">
            {/* ── 左:被测流 + 抽键预检读数屏 ── */}
            <aside className="g-rig-l">
              <div className="g-rig-h">
                <Ico name="workflow" s={11} />
                被测流
                <span className="x">{livePkgs.length} 个生效</span>
              </div>
              <div className="tb-pks">
                {livePkgs.map((p) => (
                  <button
                    key={p.id}
                    className={'g-pk' + (p.id === pkg?.id ? ' on' : '')}
                    onClick={() => {
                      setPicked(p.id);
                      setAssignments({});
                    }}
                  >
                    <b>{p.name}</b>
                    <span className="id">
                      {p.id}@v{p.version}
                    </span>
                    <span className="cnt">
                      <i>节点 {p.nodes.length}</i>
                      <i>边 {p.edges.length}</i>
                      <i>必填 {requiredOf(p).length}</i>
                    </span>
                  </button>
                ))}
              </div>

              <div className="g-rig-h">
                <Ico name="scan" s={11} />
                抽键预检
                <span className="x">{channel === undefined ? '无邮件通道' : channel.name}</span>
              </div>
              {/*
               * 读数屏:通道的每条抽键正则一行 —— 键名 / 抽到的值 / 一盏灯。
               * 实时跑在正打的字上;必填的键标出来,没灯的必填就是投出去会被退回的那单。
               */}
              <div className="tb-well">
                {channel === undefined ? (
                  <p className="tb-well-none">没有可用的邮件通道 —— 去系统区配一个,信才有地方投。</p>
                ) : (
                  <>
                    {channel.extract.map((r) => {
                      const hit = caught.get(r.key);
                      const must = required.includes(r.key);
                      return (
                        <div key={r.key} className={'tb-well-r' + (hit === undefined ? '' : ' hit')}>
                          <i />
                          <span className="k">
                            {r.key}
                            {must && <em>必填</em>}
                          </span>
                          <span className="v">{hit ?? '—'}</span>
                        </div>
                      );
                    })}
                    {unruled.map((k) => (
                      <div key={k} className="tb-well-r dead">
                        <i />
                        <span className="k">
                          {k}
                          <em>必填</em>
                        </span>
                        <span className="v">无规则 · 靠补全</span>
                      </div>
                    ))}
                  </>
                )}
              </div>
              <p className="tb-well-t">与服务端同一套正则。灯灭不拦起单 —— 抽不出的键由受理补全单找人收齐。</p>
            </aside>

            {/* ── 右:① 一封信 ② 派给谁 + 起单条 ── */}
            <section className="g-rig-r">
              <div className="g-rig-h">
                <span className="n">01</span>
                输入 · 一封客户来信
                <span className="x">
                  <button className="tb-ghost" onClick={() => setMail(SAMPLE_MAIL)}>
                    <Ico name="rotate-ccw" s={10} />
                    重置样例
                  </button>
                </span>
              </div>
              <LetterForm draft={mail} onChange={setMail} channels={mailChannels} channel={channel} />

              <div className="g-rig-h">
                <span className="n">02</span>
                节点指派
                <span className="x">
                  {ai !== undefined && (
                    <button
                      className="tb-ghost"
                      onClick={() => setAssignments(Object.fromEntries(nodes.map((n) => [n.id, ai.id])))}
                    >
                      <Ico name="bot" s={10} />
                      全派 AI
                    </button>
                  )}
                  <button className="tb-ghost" onClick={() => setAssignments({})}>
                    <Ico name="users" s={10} />
                    全部轮值
                  </button>
                </span>
              </div>
              {/*
               * 链轨:节点按编排序挂在一条竖轨上,右端是「插座」——
               * 空着即照旧轮值(有员工组按组轮,没有按全员最闲者先),插了人那一格点琥珀
               * (琥珀在这套语言里恒表「人」)。指派只在那人接得了这个节点时生效,接不了退回轮值。
               */}
              <div className="tb-asn">
                {nodes.map((n) => {
                  const pin = (assignments[n.id] ?? '') !== '';
                  return (
                    <div key={n.id} className={'tb-asn-r' + (pin ? ' pin' : '') + (n.kind === 'approval' ? ' apr' : '')}>
                      <span className="rail">
                        <i />
                      </span>
                      <span className="nid">{n.id}</span>
                      <span className="lb">{n.label}</span>
                      <span className="kd">{n.kind === 'approval' ? '审批' : '活动'}</span>
                      <select
                        className="tb-socket"
                        aria-label={`${n.id} ${n.label} 派给谁`}
                        value={assignments[n.id] ?? ''}
                        onChange={(e) => setAssignments((prev) => ({ ...prev, [n.id]: e.target.value }))}
                      >
                        <option value="">照旧轮值</option>
                        {staff.map((s) => (
                          <option key={s.id} value={s.id}>
                            {s.name} · {s.position.code}
                          </option>
                        ))}
                      </select>
                    </div>
                  );
                })}
              </div>

              {/* 起单条:仪器的前面板边缘 —— 全屏唯一的一枚动作钮,灯全亮才上膛 */}
              <div className="tb-fire">
                <span className="say">
                  {error !== undefined ? (
                    <b className="bad">{error}</b>
                  ) : keysReady ? (
                    '键全抽得出 —— 起单会先销毁上一单,任务真实落到被指派人的工作台'
                  ) : (
                    `有键抽不出(${mustCatch.filter((k) => !caught.has(k)).concat(unruled).join('、')})—— 照样能起,受理人会收到补全单`
                  )}
                </span>
                <button className={'tb-go' + (armed ? ' armed' : '')} disabled={!fireable || run.isPending} onClick={fire}>
                  <Ico name="play" s={13} />
                  {run.isPending ? '起单中…' : '起单试跑'}
                </button>
              </div>
            </section>
          </div>
        )}
      </QueryGate>
    </div>
  );
}

/* ==================== ① 一封信 ==================== */

function LetterForm({
  draft,
  onChange,
  channels,
  channel,
}: {
  draft: MailDraft;
  onChange: (next: MailDraft) => void;
  channels: readonly Channel[];
  channel: Channel | undefined;
}): ReactNode {
  const set = <K extends keyof MailDraft>(k: K, v: MailDraft[K]): void => onChange({ ...draft, [k]: v });
  return (
    <div className="tb-ml">
      <label className="tb-ml-r">
        <em>发件人</em>
        <input className="tb-ml-i" value={draft.from} onChange={(e) => set('from', e.target.value)} />
      </label>
      <label className="tb-ml-r">
        <em>收件箱</em>
        {/* 投给哪个信箱决定用哪套抽键规则 —— 选,不手打:地址错一位,预检整屏熄灯还不知道为什么 */}
        <select className="tb-ml-i sel" value={channel?.address ?? ''} onChange={(e) => set('to', e.target.value)}>
          {channels.map((ch) => (
            <option key={ch.id} value={ch.address}>
              {ch.address} —— {ch.name}
            </option>
          ))}
        </select>
      </label>
      <label className="tb-ml-r">
        <em>主题</em>
        <input className="tb-ml-i" value={draft.subject} onChange={(e) => set('subject', e.target.value)} />
      </label>
      <label className="tb-ml-r tall">
        <em>正文</em>
        <textarea className="tb-ml-i" rows={4} value={draft.body} onChange={(e) => set('body', e.target.value)} />
      </label>
      <div className="tb-ml-r tall">
        <em>附件</em>
        <div className="tb-ml-at">
          {draft.attachments.map((a, i) => (
            <span key={a.name} className="g-att">
              <Ico name="paperclip" s={11} />
              {a.name}
              <i>{(a.size / 1024).toFixed(0)} KB</i>
              <button
                aria-label={`移除 ${a.name}`}
                onClick={() => set('attachments', draft.attachments.filter((_, j) => j !== i))}
              >
                <Ico name="x" s={10} />
              </button>
            </span>
          ))}
          <button
            className="g-att-add"
            onClick={() =>
              set('attachments', [
                ...draft.attachments,
                { name: `BOM-${draft.attachments.length + 1}.xlsx`, contentType: XLSX, size: 20_480 },
              ])
            }
          >
            <Ico name="plus" s={11} />
            加一个 BOM
          </button>
        </div>
      </div>
    </div>
  );
}

/* ==================== 观测态 ==================== */

const LAMP_OF: Readonly<Record<string, 'live' | 'wait' | 'done' | 'bad'>> = {
  running: 'live',
  waiting: 'wait',
  completed: 'done',
  abnormal: 'bad',
};

function Observe({
  id,
  staffName,
  nav,
  onBack,
  stopping,
}: {
  id: string;
  staffName: (sid: string) => string;
  nav: Nav;
  onBack: () => void;
  stopping: boolean;
}): ReactNode {
  const wf = useRunWorkflow(id);
  const state = wf.data?.workflow.state;
  // 到终态就停轮询:已经不动的东西没必要每两秒问一遍
  const live = isLive(state);
  const trQ = useRunTrace(id, live);

  const spans = trQ.data?.spans ?? [];
  const w = wf.data;
  const nodeLabel = (nid: string): string => w?.pkg.nodes.find((n) => n.id === nid)?.label ?? nid;
  /** 节点实例出参里没有受理人,受理人只在 span 的 attributes 上 —— 从 TRACE 反查 */
  const assigneeOfNode = (nid: string): string | undefined => {
    const s = spans.find((x) => x.kind === 'node' && x.nodeId === nid);
    const a = s?.attributes?.['assigneeId'];
    return typeof a === 'string' ? staffName(a) : undefined;
  };

  const started = w === undefined ? undefined : new Date(w.workflow.startedAt);

  return (
    <div className="g-tb">
      <Strip
        lamp={state === undefined ? 'live' : (LAMP_OF[state] ?? 'live')}
        breathe={live}
        word={state === undefined ? '取数中' : (WORKFLOW_STATE_LABEL[state] ?? state)}
        detail={
          <>
            {w?.workflow.subject ?? id.slice(0, 8)}
            {live && <i className="auto"> · 自动刷新 2s</i>}
          </>
        }
        right={
          <button className="tb-stop" disabled={stopping} onClick={onBack}>
            <Ico name="square" s={11} />
            {stopping ? '销毁中…' : '停止仿真'}
          </button>
        }
      />

      <QueryGate query={wf}>
        {w !== undefined && (
          <>
            {/* 图签栏:工程图右下角那张表 —— 一条流的身份,一格一件事 */}
            <div className="g-sheet">
              <div className="g-sheet-h">
                <Ico name="file-text" s={12} />
                WF — 工作流
                <span className="x">
                  {w.workflow.source.kind} · {w.workflow.source.ref}
                </span>
              </div>
              <div className="g-tblock">
                <div>
                  <em>工作流号</em>
                  <b>{id.slice(0, 8)}</b>
                </div>
                <div>
                  <em>状态</em>
                  <b className={state === 'running' || state === 'waiting' ? 'run' : 'brass'}>
                    {WORKFLOW_STATE_LABEL[w.workflow.state] ?? w.workflow.state}
                  </b>
                </div>
                <div>
                  <em>流程包</em>
                  <b>
                    {w.workflow.packageId}@v{w.workflow.packageVersion}
                  </b>
                </div>
                <div>
                  <em>起单时刻</em>
                  <b>{started?.toLocaleTimeString('zh-CN', { hour12: false }) ?? '—'}</b>
                </div>
                <div>
                  <em>起单人</em>
                  <b>{w.workflow.source.by === undefined ? '—' : staffName(w.workflow.source.by)}</b>
                </div>
                <div>
                  <em>节点 / 边</em>
                  <b>
                    {w.pkg.nodes.length} / {w.pkg.edges.length}
                  </b>
                </div>
              </div>
            </div>

            {/* 派工带:测试台不代答,这句必须说满 */}
            <div className="g-tbdesk">
              <div className="g-tbdesk-h">
                <Ico name="briefcase" s={12} />
                DSK — 任务落到了谁的工作台
                <button className="g-btn xs" onClick={() => nav.jump('tasks', 'list')}>
                  <Ico name="activity" s={11} />
                  去运营中心 · 任务
                </button>
              </div>
              {w.tasks.length === 0 ? (
                <p>还没有任务落到任何工位 —— 流刚起,或者卡在审批点上(审批单不是任务,见下面的节点实例)。</p>
              ) : (
                w.tasks.map((t) => (
                  <div key={t.id} className="g-tbdesk-r">
                    <span className="nid">{t.nodeId}</span>
                    {t.title}
                    <span>→</span>
                    <b>{t.ownerName} 的工作台</b>
                  </div>
                ))
              )}
              <p>
                测试台<b>不代答</b>:这些是真任务,要那个人在自己的工作台上答,这条流才会往下走。
              </p>
            </div>

            <TraceSheet spans={spans} staffName={staffName} />

            <div className="g-sheet">
              <div className="g-sheet-h">
                <Ico name="list-checks" s={12} />
                NOD — 节点实例
                <span className="x">{w.instances.length} 个已进入</span>
              </div>
              {w.instances.length === 0 ? (
                <div className="g-tb-empty">
                  <Ico name="scan" s={26} />
                  <b>还没有节点进入</b>
                  <p>起点已过,第一个节点正在派工。</p>
                </div>
              ) : (
                <div className="g-nins">
                  <div className="g-nins-h">
                    <span>节点</span>
                    <span>名称</span>
                    <span>状态</span>
                    <span>终态</span>
                    <span>受理人</span>
                  </div>
                  {w.instances.map((it) => {
                    const bad = it.terminal !== undefined && it.terminal !== 'released';
                    const cls = bad ? 'bad' : it.running ? 'run' : it.waiting ? 'wait' : it.terminal === undefined ? '' : 'done';
                    const who = assigneeOfNode(it.nodeId);
                    return (
                      <div key={`${it.nodeId}#${it.instance}`} className="g-nins-r">
                        <span className="nid">{it.nodeId}</span>
                        <span className="lb">{nodeLabel(it.nodeId)}</span>
                        <span className={`st ${cls}`}>
                          <i />
                          {bad ? '异常' : it.running ? '在跑' : it.waiting ? '等人' : it.terminal === undefined ? '已进入' : '已放行'}
                        </span>
                        <span className="lb">
                          {it.terminal === undefined ? '—' : (TERMINAL_STATE_LABEL[it.terminal] ?? it.terminal)}
                        </span>
                        <span className="who">
                          {who === undefined ? '—' : <b>{who}</b>}
                          {it.instance > 1 && <span className="ins"> 第 {it.instance} 次</span>}
                        </span>
                      </div>
                    );
                  })}
                </div>
              )}
            </div>
          </>
        )}
      </QueryGate>
    </div>
  );
}