// screens/sheets.jsx — modal sheets: plan review, IGRT override, reject, role switcher

// ─────────── Sheet shell (bottom modal) ───────────
function Sheet({ open, onClose, title, subtitle, children, footer, height = '88%' }) {
  return (
    <div style={{
      position: 'absolute', inset: 0, zIndex: 80,
      pointerEvents: open ? 'auto' : 'none',
    }}>
      {/* backdrop */}
      <div onClick={onClose} style={{
        position:'absolute', inset:0,
        background: 'rgba(15,26,31,0.4)',
        opacity: open ? 1 : 0,
        transition: 'opacity 0.22s ease',
      }}/>
      {/* sheet */}
      <div style={{
        position:'absolute', left:0, right:0, bottom: 0,
        height,
        background: 'var(--bg)',
        borderTopLeftRadius: 22, borderTopRightRadius: 22,
        boxShadow: '0 -16px 40px rgba(15,26,31,0.16)',
        transform: open ? 'translateY(0)' : 'translateY(100%)',
        transition: 'transform 0.28s cubic-bezier(0.32,0.72,0,1)',
        display:'flex', flexDirection:'column', overflow:'hidden',
      }}>
        <div style={{
          padding: '8px 16px 0',
          display:'flex', flexDirection:'column', alignItems:'center',
        }}>
          <div style={{ width: 36, height: 4, background:'#D6DBE0', borderRadius: 4 }}/>
        </div>
        <div style={{
          padding: '12px 16px 12px',
          display:'flex', alignItems:'center', justifyContent:'space-between',
          borderBottom: '1px solid var(--border)',
        }}>
          <div style={{ minWidth: 0, flex: 1 }}>
            <div style={{ fontSize: 16, fontWeight: 700 }}>{title}</div>
            {subtitle && <div style={{ fontSize: 12, color:'var(--t3)', marginTop: 2 }}>{subtitle}</div>}
          </div>
          <button onClick={onClose} style={{
            width: 30, height: 30, borderRadius: 999,
            background: 'var(--bg-2)', border:'none',
            display:'flex', alignItems:'center', justifyContent:'center', color: 'var(--t2)',
            cursor:'pointer',
          }}><I.X size={12}/></button>
        </div>
        <div className="scroll" style={{ flex: 1, overflowY: 'auto' }}>{children}</div>
        {footer && (
          <div style={{
            borderTop: '1px solid var(--border)',
            background: '#fff', padding: '12px 16px 24px',
            display:'flex', gap: 10,
          }}>{footer}</div>
        )}
      </div>
    </div>
  );
}

// ─────────── Plan review sheet — scenario A core ───────────
function PlanReviewSheet({ open, onClose, patientId = 'zhang', role }) {
  const p = PATIENTS[patientId];
  const [decision, setDecision] = useState(null); // null / 'approved' / 'rejected'

  const ok = () => { setDecision('approved'); setTimeout(() => { setDecision(null); onClose(); }, 1400); };
  const reject = () => { setDecision('rejected'); setTimeout(() => { setDecision(null); onClose(); }, 1400); };

  return (
    <Sheet
      open={open}
      onClose={onClose}
      title="计划会签 · 决策驾驶舱"
      subtitle={`${p.name} · ${p.rx} · 节点 6 / 12`}
      footer={
        decision ? (
          <div style={{
            flex: 1, padding: '12px',
            background: decision==='approved' ? 'var(--st-done-bg)' : 'var(--st-block-bg)',
            color: decision==='approved' ? 'var(--st-done-ink)' : 'var(--st-block-ink)',
            borderRadius: 10, textAlign:'center', fontWeight: 600, fontSize: 14,
            display:'flex', alignItems:'center', justifyContent:'center', gap: 8,
          }}>
            {decision==='approved' ? <I.Check size={16}/> : <I.X size={14}/>}
            {decision==='approved' ? '已会签 · 推送至 QA 节点' : '已驳回 · 通知剂量师返工'}
          </div>
        ) : (
          <>
            <button onClick={reject} style={{
              flex: 1, padding: '12px', borderRadius: 10,
              background:'#fff', color: 'var(--st-block-ink)',
              border: '1.5px solid var(--st-block-ink)', fontWeight: 600, fontSize: 14,
              cursor:'pointer',
            }}>驳回</button>
            <button onClick={ok} style={{
              flex: 2, padding: '12px', borderRadius: 10,
              background:'var(--brand)', color: '#fff', border:'none',
              fontWeight: 600, fontSize: 14, cursor:'pointer',
              display:'flex', alignItems:'center', justifyContent:'center', gap: 6,
            }}>
              <I.Check size={14}/>
              {role.id === 'physician' ? '终审批准 · 电子签名' : '会签通过'}
            </button>
          </>
        )
      }
    >
      {/* Patient identity strip */}
      <div style={{ padding: '14px 16px 0' }}>
        <Card pad={14}>
          <div style={{ display:'flex', alignItems:'center', gap: 12 }}>
            <PatientSigil tag={p.photoTag} size={40}/>
            <div style={{ flex: 1 }}>
              <div style={{ display:'flex', alignItems:'baseline', gap: 8 }}>
                <span style={{ fontSize: 17, fontWeight: 700 }}>{p.name}</span>
                <span style={{ fontSize: 12, color: 'var(--t3)' }}>{p.sex} · {p.age}岁</span>
              </div>
              <div style={{ fontSize: 12, color:'var(--t2)' }}>{p.dx}</div>
            </div>
            <Chip kind="mine" dot>等待 02:14</Chip>
          </div>
        </Card>
      </div>

      {/* DVH at top, prominent */}
      <SectionLabel right="γ(3%/3mm)">DVH 关键约束</SectionLabel>
      <div style={{ padding: '0 16px' }}>
        <DVHSummary patient={p} />
      </div>

      {/* RT Struct preview slices */}
      <SectionLabel right="3 关键层">勾画快照</SectionLabel>
      <div style={{ padding: '0 16px' }}>
        <Card pad={0}>
          <div style={{ padding: 12, display:'flex', gap: 8 }}>
            {[
              { z: 'Z = -42', label: 'PTV 顶' },
              { z: 'Z = 0',   label: 'PTV 中' },
              { z: 'Z = +38', label: 'PTV 底' },
            ].map(s => (
              <div key={s.z} style={{
                flex: 1, aspectRatio: '1',
                background: 'repeating-linear-gradient(135deg, #1a2326 0 2px, #232c30 2px 4px)',
                borderRadius: 7, position:'relative', overflow:'hidden',
                border: '1px solid var(--border)',
              }}>
                {/* fake contours */}
                <svg viewBox="0 0 100 100" style={{ position:'absolute', inset: 0, width:'100%', height:'100%' }}>
                  <ellipse cx="50" cy="55" rx="32" ry="28" fill="none" stroke="#3FBAA8" strokeWidth="1" opacity="0.9"/>
                  <ellipse cx="50" cy="55" rx="22" ry="18" fill="none" stroke="#F2C94C" strokeWidth="1" opacity="0.9"/>
                  <ellipse cx="50" cy="55" rx="12" ry="10" fill="none" stroke="#EB5757" strokeWidth="1.2" opacity="0.9"/>
                </svg>
                <div style={{
                  position:'absolute', top: 6, left: 6, color:'#fff',
                  fontFamily: "'IBM Plex Mono', monospace", fontSize: 10, opacity: 0.8,
                }}>{s.z}</div>
                <div style={{
                  position:'absolute', bottom: 6, left: 6, right: 6,
                  fontSize: 10, color: '#fff', fontWeight: 500,
                  background: 'rgba(0,0,0,0.4)', padding: '2px 6px', borderRadius: 4,
                  display:'inline-block', width:'fit-content',
                }}>{s.label}</div>
              </div>
            ))}
          </div>
          <div style={{
            padding: '10px 14px', borderTop:'1px solid var(--border-soft)',
            display:'flex', alignItems:'center', gap: 8,
          }}>
            <span style={{ width: 8, height: 8, borderRadius: 8, background:'#EB5757' }}/>
            <span style={{ fontSize: 11.5, color:'var(--t2)' }}>GTV</span>
            <span style={{ width: 8, height: 8, borderRadius: 8, background:'#F2C94C', marginLeft: 8 }}/>
            <span style={{ fontSize: 11.5, color:'var(--t2)' }}>CTV</span>
            <span style={{ width: 8, height: 8, borderRadius: 8, background:'#3FBAA8', marginLeft: 8 }}/>
            <span style={{ fontSize: 11.5, color:'var(--t2)' }}>PTV</span>
            <button style={{
              marginLeft:'auto', fontSize: 11, color:'var(--brand)', border:'none', background:'transparent',
              display:'inline-flex', alignItems:'center', gap: 4, cursor:'pointer',
            }}>TPS 打开 <I.External size={11}/></button>
          </div>
        </Card>
      </div>

      {/* Review chain */}
      <SectionLabel>审核链 · 已会签</SectionLabel>
      <div style={{ padding: '0 16px 24px' }}>
        <Card pad={0}>
          {[
            { name:'王思雨', role:'剂量师 · 提交', at:'05-14 11:48', ok:true,  cur:false },
            { name:'林志远', role:'物理师 · 会签', at:role.id==='physicist'?'当前等我':'05-14 13:34', ok:role.id!=='physicist', cur: role.id==='physicist' },
            { name:'陈雯',   role:'主任 · 终审',  at: role.id==='physician'?'当前等我':'待会签后',  ok: false, cur: role.id==='physician' },
          ].map((s, i, arr) => (
            <div key={i} style={{
              padding: '12px 14px', display:'flex', alignItems:'center', gap: 10,
              borderBottom: i<arr.length-1 ? '1px solid var(--border-soft)' : 'none',
            }}>
              <div style={{
                width: 24, height: 24, borderRadius: 24,
                background: s.ok ? 'var(--st-done-bg)' : s.cur ? 'var(--st-mine-bg)' : 'var(--bg-2)',
                color:    s.ok ? 'var(--st-done-ink)' : s.cur ? 'var(--st-mine-ink)' : 'var(--t3)',
                display:'flex', alignItems:'center', justifyContent:'center',
              }}>
                {s.ok ? <I.Check size={11}/> : s.cur ? <I.Bolt size={10}/> : <span style={{ fontSize: 10, fontWeight: 600 }}>{i+1}</span>}
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 13, fontWeight: 500 }}>{s.name}</div>
                <div style={{ fontSize: 11, color:'var(--t3)' }}>{s.role}</div>
              </div>
              <div style={{ fontSize: 11, color: s.cur?'var(--st-mine-ink)':'var(--t3)' }} className={s.cur?'':'mono'}>{s.at}</div>
            </div>
          ))}
        </Card>
      </div>
    </Sheet>
  );
}

// ─────────── IGRT 超阈 sheet — scenario C ───────────
function IgrtSheet({ open, onClose, patientId = 'li' }) {
  const p = PATIENTS[patientId];
  const [decision, setDecision] = useState(null);

  const approve = () => { setDecision('go'); setTimeout(() => { setDecision(null); onClose(); }, 1500); };
  const hold = () => { setDecision('stop'); setTimeout(() => { setDecision(null); onClose(); }, 1500); };

  return (
    <Sheet
      open={open}
      onClose={onClose}
      title="IGRT 偏差超阈 · 等待授权"
      subtitle={`${p.name} · ${p.machine} · 床位 #3`}
      height="92%"
      footer={
        decision ? (
          <div style={{
            flex: 1, padding: '12px',
            background: decision==='go' ? 'var(--st-done-bg)' : 'var(--st-block-bg)',
            color: decision==='go' ? 'var(--st-done-ink)' : 'var(--st-block-ink)',
            borderRadius: 10, textAlign:'center', fontWeight: 600, fontSize: 14,
            display:'flex', alignItems:'center', justifyContent:'center', gap: 8,
          }}>
            {decision==='go' ? <I.Check size={16}/> : <I.X size={14}/>}
            {decision==='go' ? '已授权 · 控制台已解锁' : '暂停照射 · 通知技师复位'}
          </div>
        ) : (
          <>
            <button onClick={hold} style={{
              flex: 1, padding: '12px', borderRadius: 10,
              background:'#fff', color: 'var(--st-block-ink)',
              border: '1.5px solid var(--st-block-ink)', fontWeight: 600, fontSize: 14, cursor:'pointer',
            }}>暂停 · 复位</button>
            <button onClick={approve} style={{
              flex: 2, padding: '12px', borderRadius: 10,
              background:'#C0252F', color:'#fff', border:'none',
              fontWeight: 600, fontSize: 14, cursor:'pointer',
              display:'flex', alignItems:'center', justifyContent:'center', gap: 6,
            }}>
              <I.Check size={14}/>
              授权本次照射
            </button>
          </>
        )
      }
    >
      {/* Urgency banner */}
      <div style={{ padding: '14px 16px 0' }}>
        <div style={{
          background: 'linear-gradient(135deg, #C0252F 0%, #9F1117 100%)',
          color: '#fff', borderRadius: 14, padding: '14px 16px',
          position:'relative', overflow:'hidden',
        }}>
          <div style={{ display:'flex', alignItems:'center', gap: 8 }}>
            <I.Alert size={16}/>
            <span style={{ fontSize: 11, fontWeight: 600, letterSpacing: '0.06em', textTransform:'uppercase' }}>偏差超阈 · 治疗暂停</span>
            <span style={{ marginLeft:'auto', background:'rgba(0,0,0,0.22)', padding: '3px 8px', borderRadius: 6, fontSize: 12 }} className="mono">
              剩余 04:21
            </span>
          </div>
          <div style={{ display:'flex', gap: 24, marginTop: 14 }}>
            <div>
              <div style={{ fontSize: 11, opacity: 0.85 }}>实测偏差</div>
              <div className="mono" style={{ fontSize: 26, fontWeight: 700, marginTop: 2 }}>8.2 mm</div>
            </div>
            <div style={{ width: 1, background:'rgba(255,255,255,0.25)' }}/>
            <div>
              <div style={{ fontSize: 11, opacity: 0.85 }}>科室阈值</div>
              <div className="mono" style={{ fontSize: 26, fontWeight: 700, marginTop: 2, opacity:0.7 }}>5.0 mm</div>
            </div>
            <div style={{ marginLeft:'auto', textAlign:'right' }}>
              <div style={{ fontSize: 11, opacity: 0.85 }}>分次</div>
              <div className="mono" style={{ fontSize: 20, fontWeight: 700, marginTop: 4 }}>18/33</div>
            </div>
          </div>
        </div>
      </div>

      {/* Patient brief */}
      <SectionLabel>患者信息</SectionLabel>
      <div style={{ padding: '0 16px' }}>
        <Card pad={14}>
          <div style={{ display:'flex', alignItems:'center', gap: 12 }}>
            <PatientSigil tag={p.photoTag} size={36}/>
            <div style={{ flex: 1 }}>
              <div style={{ display:'flex', alignItems:'baseline', gap: 8 }}>
                <span style={{ fontSize: 16, fontWeight: 700 }}>{p.name}</span>
                <span style={{ fontSize: 11.5, color:'var(--t3)' }}>{p.sex} · {p.age}岁 · <span className="mono">{p.id}</span></span>
              </div>
              <div style={{ fontSize: 12, color:'var(--t2)', marginTop: 1 }}>{p.dx} · {p.rx}</div>
            </div>
          </div>
        </Card>
      </div>

      {/* Offset vectors */}
      <SectionLabel right="向量">CBCT 配准偏差</SectionLabel>
      <div style={{ padding: '0 16px' }}>
        <Card pad={0}>
          <div style={{ padding: '14px', display:'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10 }}>
            {[
              { ax:'LR (X)',  v:'-6.8', dir:'右', ok:false },
              { ax:'AP (Y)',  v:'+3.2', dir:'前', ok:true  },
              { ax:'SI (Z)',  v:'+2.4', dir:'上', ok:true  },
              { ax:'Roll',    v:'+1.4°', dir:'',   ok:true },
              { ax:'Pitch',   v:'-0.8°', dir:'',   ok:true },
              { ax:'Yaw',     v:'+0.2°', dir:'',   ok:true },
            ].map(v => (
              <div key={v.ax} style={{
                padding: '8px 10px', borderRadius: 8,
                background: v.ok ? 'var(--surface-2)' : 'var(--st-block-bg)',
                border: `1px solid ${v.ok?'var(--border)':'#F2C9A2'}`,
              }}>
                <div style={{ fontSize: 10, color: 'var(--t3)', letterSpacing: 0.4 }}>{v.ax}</div>
                <div className="mono" style={{
                  fontSize: 16, fontWeight: 700, marginTop: 2,
                  color: v.ok ? 'var(--t1)' : 'var(--st-block-ink)',
                }}>{v.v}<span style={{ fontSize: 10, marginLeft: 2 }}>mm</span></div>
              </div>
            ))}
          </div>

          {/* fake CBCT/Reg image */}
          <div style={{ padding: '0 14px 14px' }}>
            <div style={{
              aspectRatio: '16/9', borderRadius: 10,
              background: 'repeating-linear-gradient(135deg, #1a2326 0 2px, #232c30 2px 4px)',
              position:'relative', overflow:'hidden', border: '1px solid var(--border)',
            }}>
              <svg viewBox="0 0 320 180" style={{ position:'absolute', inset:0, width:'100%', height:'100%' }}>
                {/* reference body */}
                <ellipse cx="160" cy="100" rx="92" ry="60" fill="none" stroke="#7FCFC0" strokeWidth="1" strokeDasharray="3 2" opacity="0.7"/>
                {/* live body, offset right -6.8mm => shift left in image */}
                <ellipse cx="148" cy="100" rx="92" ry="60" fill="none" stroke="#F2C94C" strokeWidth="1.4" opacity="0.95"/>
                {/* crosshair */}
                <line x1="160" y1="20" x2="160" y2="180" stroke="#fff" strokeOpacity="0.18" strokeWidth="0.6"/>
                <line x1="0" y1="100" x2="320" y2="100" stroke="#fff" strokeOpacity="0.18" strokeWidth="0.6"/>
              </svg>
              <div style={{
                position:'absolute', top: 8, left: 8,
                fontFamily:"'IBM Plex Mono', monospace", fontSize: 10, color:'#fff', opacity:0.85,
              }}>CBCT · 14:18:42</div>
              <div style={{
                position:'absolute', bottom: 8, left: 8, right: 8,
                display:'flex', gap: 10, fontSize: 10, color:'#fff',
              }}>
                <span style={{ display:'inline-flex', alignItems:'center', gap: 4 }}>
                  <span style={{ width:10, height:2, background:'#7FCFC0' }}/>计划参考
                </span>
                <span style={{ display:'inline-flex', alignItems:'center', gap: 4 }}>
                  <span style={{ width:10, height:2, background:'#F2C94C' }}/>当前
                </span>
                <button style={{
                  marginLeft:'auto', fontSize: 10, color:'#fff', border:'none', background:'rgba(255,255,255,0.18)',
                  borderRadius: 4, padding: '3px 8px', cursor:'pointer',
                  display:'inline-flex', alignItems:'center', gap: 4,
                }}>在 RVS 查看 <I.External size={10}/></button>
              </div>
            </div>
          </div>
        </Card>
      </div>

      {/* History */}
      <SectionLabel right="近 5 分次">该患者历史偏差</SectionLabel>
      <div style={{ padding: '0 16px 24px' }}>
        <Card pad={14}>
          <div style={{ display:'flex', alignItems:'flex-end', gap: 8, height: 70 }}>
            {[2.1, 1.8, 3.0, 2.4, 8.2].map((v, i, a) => {
              const oot = v > 5;
              return (
                <div key={i} style={{ flex: 1, display:'flex', flexDirection:'column', alignItems:'center', gap: 5 }}>
                  <div style={{
                    width: '100%', height: `${(v/10)*52}px`,
                    background: oot ? '#C0252F' : '#C9D1D7', borderRadius: 3,
                  }}/>
                  <div style={{ fontSize: 10, color: oot?'#C0252F':'var(--t3)', fontWeight: oot?600:500 }} className="mono">{v}</div>
                </div>
              );
            })}
          </div>
          <div style={{ marginTop: 8, paddingTop: 8, borderTop: '1px solid var(--border-soft)', display:'flex', justifyContent:'space-between', fontSize: 11, color:'var(--t3)' }}>
            <span>F14 · F15 · F16 · F17 · F18(当前)</span>
            <span>阈值 <span className="mono">5.0mm</span></span>
          </div>
        </Card>
      </div>
    </Sheet>
  );
}

// ─────────── Reject reason sheet — scenario B ───────────
function RejectSheet({ open, onClose, patientId = 'wang' }) {
  const p = PATIENTS[patientId];
  return (
    <Sheet
      open={open}
      onClose={onClose}
      title="计划被驳回 · 返工"
      subtitle={`${p.name} · 节点 5 / 12`}
      footer={
        <>
          <button onClick={onClose} style={{
            flex: 1, padding: '12px', borderRadius: 10,
            background:'#fff', color: 'var(--t2)',
            border: '1.5px solid var(--border)', fontWeight: 600, fontSize: 14, cursor:'pointer',
          }}>稍后处理</button>
          <button style={{
            flex: 2, padding: '12px', borderRadius: 10,
            background:'var(--brand)', color:'#fff', border:'none',
            fontWeight: 600, fontSize: 14, cursor:'pointer',
            display:'flex', alignItems:'center', justifyContent:'center', gap: 6,
          }}>
            <I.External size={14}/>
            在 TPS 打开返工
          </button>
        </>
      }
    >
      <div style={{ padding: '14px 16px 0' }}>
        <Card pad={14}>
          <div style={{ display:'flex', alignItems:'center', gap: 12 }}>
            <PatientSigil tag={p.photoTag} size={40}/>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 17, fontWeight: 700 }}>{p.name}</div>
              <div style={{ fontSize: 12, color:'var(--t2)' }}>{p.dx} · {p.rx}</div>
            </div>
            <Chip kind="blocked" dot>驳回</Chip>
          </div>
        </Card>
      </div>

      <SectionLabel>驳回原因 · 主任 张力</SectionLabel>
      <div style={{ padding: '0 16px' }}>
        <Card pad={0}>
          <div style={{
            padding: '12px 14px',
            background: 'var(--st-block-bg)',
            color: 'var(--st-block-ink)',
            display:'flex', alignItems:'center', gap: 8,
            borderBottom: '1px solid var(--border-soft)',
          }}>
            <I.Alert size={14}/>
            <span style={{ fontWeight: 600, fontSize: 13 }}>结构化类别：靶区覆盖不足</span>
          </div>
          <div style={{ padding: '14px', fontSize: 13.5, color:'var(--t1)', lineHeight: 1.6 }}>
            PTV 覆盖率仅 92.3%，未达 ≥ 95% 处方剂量约束。建议提高靶区权重，重新优化 IMRT 通量分布；同时关注同侧肺 V20 不要回升。
          </div>
          <div style={{
            padding: '10px 14px', borderTop: '1px solid var(--border-soft)',
            display:'flex', alignItems:'center', justifyContent:'space-between',
            fontSize: 11, color:'var(--t3)',
          }}>
            <span>驳回于 <span className="mono">05-14 17:08</span></span>
            <span>SLA 剩余 <span className="mono" style={{color:'var(--st-block-ink)', fontWeight:600}}>01:21</span></span>
          </div>
        </Card>
      </div>

      <SectionLabel>关键差距</SectionLabel>
      <div style={{ padding: '0 16px' }}>
        <DVHSummary patient={p} />
      </div>

      <SectionLabel right="回退 · 状态机自动记录">流水线回退</SectionLabel>
      <div style={{ padding: '0 16px 24px' }}>
        <Card pad={14}>
          <NodeStripV2 patient={p}/>
          <div style={{ marginTop: 10, fontSize: 11.5, color: 'var(--t3)' }}>
            <span style={{ color: 'var(--st-block-ink)', fontWeight: 600 }}>橙环</span> = 当前回退节点。本次驳回已计入剂量师"被驳回率"KPI。
          </div>
        </Card>
      </div>
    </Sheet>
  );
}

// ─────────── Role switcher (bottom drawer) ───────────
function RoleSwitcher({ open, onClose, currentRoleId, onPick }) {
  return (
    <Sheet open={open} onClose={onClose} title="切换工作台" subtitle="一人可拥有多个工作台" height="62%">
      <div style={{ padding: '12px 16px' }}>
        {Object.values(ROLES).map(r => {
          const active = r.id === currentRoleId;
          return (
            <button key={r.id} onClick={() => { onPick(r.id); onClose(); }} style={{
              width:'100%', background:'#fff',
              border: active ? `1.5px solid ${r.color}` : '1px solid var(--border)',
              borderRadius: 12, padding: 14,
              marginBottom: 10,
              display:'flex', alignItems:'center', gap: 12, cursor:'pointer',
            }}>
              <span style={{
                width: 40, height: 40, borderRadius: 12, background: r.color, color:'#fff',
                display:'flex', alignItems:'center', justifyContent:'center',
                fontSize: 17, fontWeight: 700,
              }}>{r.short}</span>
              <div style={{ flex: 1, textAlign:'left' }}>
                <div style={{ fontSize: 15, fontWeight: 600 }}>{r.workbench}</div>
                <div style={{ fontSize: 12, color: 'var(--t3)', marginTop: 1 }}>{r.name} · {r.me}</div>
              </div>
              {active && <Chip kind="brand" dot>当前</Chip>}
            </button>
          );
        })}
      </div>
    </Sheet>
  );
}

Object.assign(window, { Sheet, PlanReviewSheet, IgrtSheet, RejectSheet, RoleSwitcher });
