// 干部管理系统 — 钉钉移动端应用
// 依赖 shared.jsx 暴露的 window.Icon / Avatar / Badge / CADRES / DEPARTMENTS / getStats / parseResume
(function () {
  "use strict";
  const { useState, useMemo, useEffect } = React;
  const Icon = window.Icon;
  const Avatar = window.Avatar;
  const Badge = window.Badge;
  const CADRES = window.CADRES;
  const DEPARTMENTS = window.DEPARTMENTS;
  const LEVELS = window.LEVELS;
  const parseResume = window.parseResume;

  const TABS = [
    { id: "home", icon: "home", label: "首页" },
    { id: "roster", icon: "roster", label: "花名册" },
    { id: "assess", icon: "assessment", label: "考核" },
    { id: "data", icon: "chart", label: "数据" },
    { id: "mine", icon: "user", label: "我的" },
  ];

  function PhoneApp() {
    const [tab, setTab] = useState("home");
    const [detailId, setDetailId] = useState(null);
    const [subview, setSubview] = useState(null); // null | { type, ...payload }

    const openDetail = (id) => setDetailId(id);
    const closeDetail = () => setDetailId(null);
    const openSub = (type, payload = {}) => setSubview({ type, ...payload });
    const closeSub = () => setSubview(null);
    const changeTab = (t) => { setSubview(null); setTab(t); };

    const detail = detailId ? CADRES.find((c) => c.id === detailId) : null;

    const MM = window.MOBILE_MODULES || {};
    const renderSubview = () => {
      const sub = subview;
      const common = { onBack: closeSub, onOpen: openDetail };
      switch (sub.type) {
        case "approval": return <ApprovalCenter {...common} onOpenDetail={(item) => setSubview({ type: "approvalDetail", item })} />;
        case "approvalDetail": return <MM.ApprovalDetailMobile {...common} item={sub.item} />;
        case "promotion": return <MM.PromotionMobile {...common} />;
        case "reward": return <MM.RewardMobile {...common} />;
        case "talent": return <MM.TalentMobile {...common} />;
        case "log": return <MM.OperationLogMobile {...common} />;
        case "notify": return <MM.MessageCenterMobile {...common} />;
        default: return null;
      }
    };

    return (
      <React.Fragment>
        <SideInfo tab={tab} hasDetail={!!detail} onResetTab={() => { setTab("home"); closeDetail(); setSubview(null); }} />

        <div className="phone">
          <div className="screen">
            <StatusBar dark={tab === "home" || !!detail} />
            {detail ? (
              <DetailMobile cadre={detail} onBack={closeDetail} />
            ) : subview ? (
              renderSubview()
            ) : (
              <React.Fragment>
                {tab === "home" && <HomeTab onOpen={openDetail} onTab={changeTab} onSub={openSub} />}
                {tab === "roster" && <RosterTab onOpen={openDetail} />}
                {tab === "assess" && <AssessTab onOpen={openDetail} />}
                {tab === "data" && <DataTab onOpen={openDetail} />}
                {tab === "mine" && <MineTab onOpen={openDetail} onSub={openSub} onTab={changeTab} />}
              </React.Fragment>
            )}
            <TabBar tab={tab} onChange={changeTab} />
          </div>
        </div>
      </React.Fragment>
    );
  }

  // 桌面端左侧说明（窄屏隐藏）
  function SideInfo({ tab, hasDetail, onResetTab }) {
    const cur = TABS.find((t) => t.id === tab);
    return (
      <div className="stage-info">
        <h1>干部管理系统<br/><em>钉钉移动端</em></h1>
        <p>底部 5 个 Tab 切换主功能，点击花名册中的任意干部可查看其全景档案。本视图在手机设备框中演示，窄屏下自动全屏。</p>
        <div className="nav-list">
          {TABS.map((t) => (
            <div className="nl" key={t.id} style={t.id === tab ? {background:"var(--red-soft)"} : null}>
              <Icon name={t.icon} />
              <span><b>{t.label}</b>{t.id === tab ? " · 当前" : ""}</span>
            </div>
          ))}
        </div>
        <a className="back-link" href="index.html"><Icon name="back" /> 返回总览</a>
        {hasDetail && (
          <a className="back-link" href="pc.html" style={{marginTop:10}}>前往 PC 管理后台 <Icon name="chevronRight" /></a>
        )}
      </div>
    );
  }

  function StatusBar() {
    return (
      <div className="status-bar">
        <span>9:41</span>
        <div className="right">
          <div className="signal"><i style={{height:4}}></i><i style={{height:6}}></i><i style={{height:8}}></i><i style={{height:10}}></i></div>
          <svg width="16" height="14" viewBox="0 0 16 14" fill="currentColor"><path d="M8 3.5a8.5 8.5 0 015.5 2l1-1.1A10 10 0 008 2 10 10 0 001.5 4.4l1 1.1A8.5 8.5 0 018 3.5zm0 3a5.5 5.5 0 013.5 1.3l1-1.1A7 7 0 008 5a7 7 0 00-4.5 1.7l1 1.1A5.5 5.5 0 018 6.5zm0 3a2.5 2.5 0 011.5.5l1-1.1A4 4 0 008 8a4 4 0 00-2.5.9l1 1.1A2.5 2.5 0 018 9.5zm-.8 2.2a1 1 0 111.6 0L8 13l-.8-1.3z"/></svg>
          <div className="battery"><i></i></div>
        </div>
      </div>
    );
  }

  // ============ 首页 ============
  function HomeTab({ onOpen, onTab, onSub }) {
    const todos = [
      { icon: "assessment", color: "r", bg: "var(--red-light)", title: "2026 年度干部考核", sub: "您有 8 名干部待测评 · 截止 7 月 15 日", tag: "待处理", tagBg: "var(--red)", tagColor: "#fff", to: () => onTab("assess") },
      { icon: "trendUp", color: "b", bg: "var(--blue-light)", title: "郑文涛 晋升审批", sub: "技术研发中心副主任 → 主任 · 林部长发起", tag: "审批中", tagBg: "#FEF3C7", tagColor: "#B45309", to: () => onSub("approval") },
      { icon: "award", color: "y", bg: "var(--gold-light)", title: "陈志远 表彰确认", sub: "优秀党务工作者 · 市委颁授", tag: "待确认", tagBg: "var(--gold-light)", tagColor: "var(--gold)", to: () => onSub("reward") },
    ];
    const feeds = [
      { emoji: "📋", bg: "var(--red-light)", html: <span><b>郑文涛</b> 被新增至技术研发中心花名册</span>, time: "10 分钟前" },
      { emoji: "🎖", bg: "var(--gold-light)", html: <span><b>陈志远</b> 获得「优秀党务工作者」表彰</span>, time: "1 小时前" },
      { emoji: "📊", bg: "var(--blue-light)", html: <span>2026 年度<b>干部考核</b>工作已启动</span>, time: "3 小时前" },
      { emoji: "🔄", bg: "#DCFCE7", html: <span><b>朗新系统</b>同步完成，11 条数据更新</span>, time: "昨天 02:00" },
    ];
    return (
      <div className="app-body slide">
        <div className="app-header">
          <div className="ah-top">
            <div className="ah-ico has-dot" onClick={() => onSub("approval")}><Icon name="bell" /><span className="bell-dot"></span></div>
            <div className="ah-title">干部管理系统</div>
            <div className="ah-ico" onClick={() => onSub("notify")}><Icon name="scan" /></div>
          </div>
          <div className="ah-sub">您好，林部长 · 今天是 2026 年 6 月 29 日</div>
        </div>

        <div style={{marginTop:-6,borderRadius:"14px 14px 0 0",background:"var(--bg)",paddingTop:14}}>
          {/* 快捷入口 */}
          <div className="quick-grid" style={{margin:"0 14px"}}>
            <QuickEntry icon="roster" color="r" label="花名册" onClick={() => onTab("roster")} />
            <QuickEntry icon="assessment" color="b" label="考核" onClick={() => onTab("assess")} />
            <QuickEntry icon="trendUp" color="g" label="晋升" onClick={() => onSub("promotion")} />
            <QuickEntry icon="award" color="y" label="奖惩" onClick={() => onSub("reward")} />
            <QuickEntry icon="doc" color="p" label="审批" onClick={() => onSub("approval")} />
            <QuickEntry icon="bell" color="o" label="通知" onClick={() => onSub("notify")} />
            <QuickEntry icon="grid" color="b" label="九宫格" onClick={() => onSub("talent")} />
            <QuickEntry icon="chart" color="r" label="看板" onClick={() => onTab("data")} />
          </div>

          {/* 待办 */}
          <div style={{marginTop:14}}>
            <div className="section-h" style={{padding:"0 18px 10px"}}><h3>待办事项</h3><div className="more" onClick={() => onSub("approval")}>查看全部 <Icon name="chevronRight" /></div></div>
            <div className="card" style={{margin:"0 14px"}}>
              {todos.map((t, i) => (
                <div className="todo" key={i} onClick={t.to}>
                  <div className="ti" style={{background:t.bg,color:["var(--red)","var(--blue)","var(--gold)","var(--success)"][i] || "var(--red)"}}><Icon name={t.icon} /></div>
                  <div className="tc">
                    <div className="tt">{t.title}</div>
                    <div className="ts">{t.sub}</div>
                  </div>
                  <span className="badge-dot" style={{background:t.tagBg,color:t.tagColor}}>{t.tag}</span>
                </div>
              ))}
            </div>
          </div>

          {/* 动态 */}
          <div style={{marginTop:14,paddingBottom:18}}>
            <div className="section-h" style={{padding:"0 18px 10px"}}><h3>最新动态</h3></div>
            <div className="card" style={{margin:"0 14px"}}>
              {feeds.map((f, i) => (
                <div className="feed-item" key={i}>
                  <div className="fi" style={{background:f.bg}}>{f.emoji}</div>
                  <div className="fc">
                    <div className="ft">{f.html}</div>
                    <div className="fmeta">{f.time}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    );
  }

  function QuickEntry({ icon, color, label, onClick }) {
    return (
      <button className="quick" onClick={onClick}>
        <div className={"qi " + color}><Icon name={icon} /></div>
        <span>{label}</span>
      </button>
    );
  }

  // ============ 花名册 ============
  function RosterTab({ onOpen }) {
    const [q, setQ] = useState("");
    const [dept, setDept] = useState("全部");

    const filtered = useMemo(() => CADRES.filter((c) => {
      if (q && !(c.name.includes(q) || c.position.includes(q) || c.dept.includes(q))) return false;
      if (dept !== "全部" && c.dept !== dept) return false;
      return true;
    }), [q, dept]);

    useEffect(() => { document.querySelector(".app-body") && document.querySelector(".app-body").scrollTo(0,0); }, [dept, q]);

    return (
      <div className="app-body slide">
        <div className="app-header" style={{paddingBottom:"12px"}}>
          <div className="ah-top">
            <div className="ah-title">花名册</div>
            <div className="ah-ico"><Icon name="search" /></div>
            <div className="ah-ico"><Icon name="plus" /></div>
          </div>
        </div>

        <div style={{paddingTop:12}}>
          <div className="msearch">
            <Icon name="search" />
            <input value={q} onChange={(e) => setQ(e.target.value)} placeholder="搜索姓名 / 职务 / 部门" />
          </div>
          <div className="chips">
            {["全部", ...DEPARTMENTS.slice(0, 8)].map((d) => (
              <span key={d} className={"chip" + (dept === d ? " active" : "")} onClick={() => setDept(d)}>{d}</span>
            ))}
          </div>

          <div className="card" style={{margin:"0 14px 18px"}}>
            {filtered.map((c) => (
              <div className="person" key={c.id} onClick={() => onOpen(c.id)}>
                <Avatar cadre={c} size={44} />
                <div className="pc">
                  <div className="pn">{c.name} <span style={{fontSize:12,color:"var(--text3)",fontWeight:400}}>· {c.age}岁</span></div>
                  <div className="pd">{c.position} · {c.dept}</div>
                  <div className="ptags">
                    {c.party === "中共党员" && <span className="mtag" style={{background:"var(--red-light)",color:"var(--red)"}}>党员</span>}
                    {c.party === "中共预备党员" && <span className="mtag" style={{background:"#FEF3C7",color:"#B45309"}}>预备</span>}
                    <span className="mtag" style={{background:"var(--blue-light)",color:"var(--blue)"}}>{c.level}</span>
                    {c.assessment[0]?.result === "优秀" && <span className="mtag" style={{background:"#DCFCE7",color:"var(--success)"}}>优秀</span>}
                  </div>
                </div>
                <Icon name="chevronRight" style={{color:"var(--text3)",width:16,height:16}} />
              </div>
            ))}
            {filtered.length === 0 && <div className="mempty"><Icon name="search" /><div>未找到符合条件的干部</div></div>}
          </div>
          <div style={{textAlign:"center",fontSize:11.5,color:"var(--text3)",paddingBottom:14}}>共 {filtered.length} 名干部</div>
        </div>
      </div>
    );
  }

  // ============ 考核 ============
  function AssessTab({ onOpen }) {
    const [seg, setSeg] = useState("my"); // my | todo | progress

    // 我的任务：我的考核任务（作为被考核人）
    const myTasks = [
      { year: "2026 年度考核", period: "2026.01 — 2026.06", status: "self", deadline: "距自评截止 6 天" },
      { year: "2025 年度考核", period: "2025.01 — 2025.12", status: "done", result: "优秀", rank: "前 15%" },
      { year: "2024 年度考核", period: "2024.01 — 2024.12", status: "done", result: "优秀", rank: "前 15%" },
    ];

    // 待我评价：作为评价人
    const todoList = CADRES.slice(0, 5);

    // 进度提醒：考核周期时间线
    const milestones = [
      { date: "06-20", title: "考核工作启动", desc: "党委组织部发布 2026 年度考核通知，全员 24 人参评", tone: "done", icon: "check" },
      { date: "06-25", title: "民主测评阶段", desc: "同级互评已完成，平均参与率 92%", tone: "done", icon: "check" },
      { date: "今天", title: "上级评价阶段", desc: "请尽快完成对 5 名下属干部的评价打分", tone: "current", icon: "bell" },
      { date: "07-15", title: "评价提交截止", desc: "所有评价需在此前完成提交，逾期系统自动锁定", tone: "todo", icon: "clock" },
      { date: "07-25", title: "结果汇总公示", desc: "考核结果由组织部门统一汇总并公示 5 个工作日", tone: "todo", icon: "doc" },
    ];

    const me = CADRES[1]; // 林海峰

    return (
      <div className="app-body slide">
        <div className="app-header" style={{paddingBottom:"12px"}}>
          <div className="ah-top">
            <div className="ah-title">考核评价</div>
            <div className="ah-ico"><Icon name="filter" /></div>
          </div>
        </div>

        {/* 当前周期概览 */}
        <div className="cycle-card">
          <div className="cy-head">
            <div>
              <div className="cy-title">2026 年度干部考核</div>
              <div className="cy-sub">本单位组织部门 · 全员 24 人参评</div>
            </div>
            <span className="cy-status">进行中</span>
          </div>
          <div className="cy-bar"><div style={{width:"55%"}}></div></div>
          <div className="cy-meta">
            <span>整体进度 <b>55%</b></span>
            <span>截止 07-15 · 剩余 <b>16</b> 天</span>
          </div>
        </div>

        {/* 3 段切换 */}
        <div className="seg-tabs seg-three">
          <button className={seg === "my" ? "active" : ""} onClick={() => setSeg("my")}>我的任务</button>
          <button className={seg === "todo" ? "active" : ""} onClick={() => setSeg("todo")}>待我评价 ({todoList.length})</button>
          <button className={seg === "progress" ? "active" : ""} onClick={() => setSeg("progress")}>进度提醒</button>
        </div>

        <div style={{paddingBottom:18}}>
          {/* 我的任务 */}
          {seg === "my" && (
            <div className="fade">
              {myTasks.map((t, i) => (
                <div className="assess-item" key={i}>
                  <div className="ah">
                    <div className="ti" style={{background:t.status === "self" ? "var(--red-light)" : "var(--bg)", color:t.status === "self" ? "var(--red)" : "var(--text2)"}}><Icon name="assessment" /></div>
                    <div className="an">
                      <div className="nm">{t.year}</div>
                      <div className="np">{t.period}</div>
                    </div>
                    {t.status === "self"
                      ? <span className="badge-dot" style={{background:"var(--red)",color:"#fff"}}>待自评</span>
                      : (t.result === "优秀"
                        ? <Badge color="green">优秀</Badge>
                        : <Badge color="blue">{t.result}</Badge>)}
                  </div>
                  <div className="adesc">
                    {t.status === "self"
                      ? "请完成本周期自我评价，从「德、能、勤、绩、廉」五个维度进行总结，并填写主要工作成绩与不足。"
                      : "考核结果：" + t.result + "（" + t.rank + "）。该同志政治素质过硬，业务能力突出，在本职岗位上取得了显著成绩。"}
                  </div>
                  <div className="afoot">
                    <span className="adl">{t.status === "self" ? t.deadline : "已归档"}</span>
                    {t.status === "self"
                      ? <button className="mbtn r" onClick={() => onOpen(me.id)}>去自评</button>
                      : <button className="mbtn g" onClick={() => onOpen(me.id)}>查看详情</button>}
                  </div>
                </div>
              ))}
            </div>
          )}

          {/* 待我评价 */}
          {seg === "todo" && (
            <div className="fade">
              {todoList.map((c) => (
                <div className="assess-item" key={c.id}>
                  <div className="ah">
                    <Avatar cadre={c} size={40} />
                    <div className="an"><div className="nm">{c.name}</div><div className="np">{c.position} · {c.dept}</div></div>
                  </div>
                  <div className="adesc">请围绕「德、能、勤、绩、廉」五个维度，结合其本周期工作表现进行综合测评，并填写评语。</div>
                  <div className="afoot">
                    <span className="adl">距截止 16 天</span>
                    <button className="mbtn r" onClick={() => onOpen(c.id)}>去评价</button>
                  </div>
                </div>
              ))}
            </div>
          )}

          {/* 进度提醒 */}
          {seg === "progress" && (
            <div className="fade" style={{padding:"6px 14px 0"}}>
              <div className="assess-tl">
                {milestones.map((m, i) => (
                  <div key={i} className={"am-item " + m.tone}>
                    <div className="am-dot"><Icon name={m.icon} /></div>
                    <div className="am-body">
                      <div className="am-head">
                        <span className="am-date">{m.date}</span>
                        {m.tone === "current" && <span className="am-tag">进行中</span>}
                        {m.tone === "todo" && <span className="am-tag todo">待开始</span>}
                      </div>
                      <div className="am-title">{m.title}</div>
                      <div className="am-desc">{m.desc}</div>
                    </div>
                  </div>
                ))}
              </div>
              <div className="alert-mobile"><Icon name="bell" />开启「考核提醒」将在每个节点开始前通过钉钉工作通知提醒您。</div>
            </div>
          )}
        </div>
      </div>
    );
  }

  // ============ 数据 ============
  function DataTab({ onOpen }) {
    const stats = useMemo(() => window.getStats(CADRES), []);
    // 各部门人数（取前 6）
    const deptCount = useMemo(() => {
      const m = {};
      CADRES.forEach((c) => { m[c.dept] = (m[c.dept] || 0) + 1; });
      const arr = Object.entries(m).map(([k, v]) => ({ dept: k, n: v }));
      arr.sort((a, b) => b.n - a.n);
      return arr.slice(0, 6);
    }, []);
    const maxN = Math.max(...deptCount.map((d) => d.n));

    // 学历分布
    const eduDist = useMemo(() => {
      const m = { "博士研究生": 0, "硕士研究生": 0, "大学本科": 0, "大学专科": 0 };
      CADRES.forEach((c) => { m[c.edu.level] = (m[c.edu.level] || 0) + 1; });
      return Object.entries(m).filter(([, v]) => v > 0);
    }, []);
    const total = CADRES.length;
    const eduColors = ["#005d30", "#0A3B24", "#16A34A", "#dbb000"];

    // 构建 conic-gradient
    let acc = 0;
    const stops = eduDist.map(([k, v], i) => {
      const start = acc / total * 100;
      acc += v;
      const end = acc / total * 100;
      return eduColors[i] + " " + start + "% " + end + "%";
    }).join(", ");
    const conic = "conic-gradient(" + stops + ")";

    // 年龄段
    const ageBuckets = useMemo(() => {
      const b = { "35以下": 0, "36-45": 0, "46-50": 0, "51以上": 0 };
      CADRES.forEach((c) => {
        if (c.age <= 35) b["35以下"]++;
        else if (c.age <= 45) b["36-45"]++;
        else if (c.age <= 50) b["46-50"]++;
        else b["51以上"]++;
      });
      return b;
    }, []);
    const ageMax = Math.max(...Object.values(ageBuckets));

    return (
      <div className="app-body slide">
        <div className="app-header" style={{paddingBottom:"12px"}}>
          <div className="ah-top">
            <div className="ah-title">数据看板</div>
            <div className="ah-ico"><Icon name="more" /></div>
          </div>
        </div>

        <div style={{paddingTop:14,paddingBottom:18}}>
          {/* 核心指标 */}
          <div className="stat-row" style={{gridTemplateColumns:"repeat(2,1fr)"}}>
            <div className="mstat hi">
              <div className="ml">在册干部</div>
              <div className="mv">{stats.total}<small> 人</small></div>
              <div className="md">男 {stats.male} / 女 {stats.female} · 平均 {stats.avgAge} 岁</div>
            </div>
            <div className="mstat">
              <div className="ml">中共党员</div>
              <div className="mv" style={{color:"var(--red)"}}>{stats.party}<small> 人</small></div>
              <div className="md">占比 {Math.round(stats.party / stats.total * 100)}% · 预备 {stats.probParty} 人</div>
            </div>
            <div className="mstat">
              <div className="ml">研究生及以上</div>
              <div className="mv" style={{color:"var(--blue)"}}>{stats.master}<small> 人</small></div>
              <div className="md">含博士 {stats.doctor} 人</div>
            </div>
            <div className="mstat">
              <div className="ml">所属部门</div>
              <div className="mv" style={{color:"var(--gold)"}}>{DEPARTMENTS.length}<small> 个</small></div>
              <div className="md">平均 {Math.round(stats.total / DEPARTMENTS.length * 10) / 10} 人/部门</div>
            </div>
          </div>

          {/* 部门分布柱状图 */}
          <div className="section-h" style={{padding:"4px 18px 10px"}}><h3>部门人数分布</h3></div>
          <div className="card" style={{margin:"0 14px 14px",padding:"12px 6px 14px"}}>
            <div className="bars">
              {deptCount.map((d) => (
                <div className="bar-col" key={d.dept}>
                  <span style={{fontSize:10,color:"var(--text1)",fontWeight:600}}>{d.n}</span>
                  <div className="bar" style={{height: (d.n / maxN * 64) + "px"}}></div>
                  <span className="bl">{d.dept.length > 4 ? d.dept.slice(0,3) + "…" : d.dept}</span>
                </div>
              ))}
            </div>
          </div>

          {/* 学历分布环形 */}
          <div className="section-h" style={{padding:"4px 18px 10px"}}><h3>学历结构</h3></div>
          <div className="card" style={{margin:"0 14px 14px",padding:"14px"}}>
            <div className="donut-row">
              <div className="donut" style={{background: conic}}>
                <div className="dc">
                  <div className="dn">{total}</div>
                  <div className="dl">总数</div>
                </div>
              </div>
              <div className="legend">
                {eduDist.map(([k, v], i) => (
                  <div className="lr" key={k}>
                    <span className="dot" style={{background: eduColors[i]}}></span>
                    <span className="ln">{k}</span>
                    <span className="lv">{v} 人 · {Math.round(v/total*100)}%</span>
                  </div>
                ))}
              </div>
            </div>
          </div>

          {/* 年龄结构 */}
          <div className="section-h" style={{padding:"4px 18px 10px"}}><h3>年龄结构</h3></div>
          <div className="card" style={{margin:"0 14px 14px",padding:"14px 14px 10px"}}>
            {Object.entries(ageBuckets).map(([k, v]) => (
              <div key={k} style={{display:"flex",alignItems:"center",gap:10,marginBottom:10}}>
                <span style={{width:54,fontSize:12,color:"var(--text2)"}}>{k}</span>
                <div style={{flex:1,height:8,background:"var(--bg)",borderRadius:4,overflow:"hidden"}}>
                  <div style={{height:"100%",width:(v/ageMax*100)+"%",background:"linear-gradient(90deg,var(--red),var(--red-dark))",borderRadius:4}}></div>
                </div>
                <span style={{fontSize:12,color:"var(--text1)",fontWeight:600,width:46,textAlign:"right"}}>{v} 人</span>
              </div>
            ))}
          </div>

          {/* 职级分布 */}
          <div className="section-h" style={{padding:"4px 18px 10px"}}><h3>职级分布</h3></div>
          <div className="card" style={{margin:"0 14px 14px",padding:"14px"}}>
            {(() => {
              const lm = {};
              CADRES.forEach((c) => { lm[c.level] = (lm[c.level] || 0) + 1; });
              const max = Math.max(...Object.values(lm));
              return LEVELS.map((l) => {
                const v = lm[l] || 0;
                return (
                  <div key={l} style={{display:"flex",alignItems:"center",gap:10,marginBottom:10}}>
                    <span style={{width:62,fontSize:12,color:"var(--text2)"}}>{l}</span>
                    <div style={{flex:1,height:8,background:"var(--bg)",borderRadius:4,overflow:"hidden"}}>
                      <div style={{height:"100%",width:(v/max*100)+"%",background:"linear-gradient(90deg,var(--blue),#062A18)",borderRadius:4}}></div>
                    </div>
                    <span style={{fontSize:12,color:"var(--text1)",fontWeight:600,width:36,textAlign:"right"}}>{v}</span>
                  </div>
                );
              });
            })()}
          </div>

          {/* 考核结果分布 */}
          <div className="section-h" style={{padding:"4px 18px 10px"}}><h3>本年度考核结果</h3></div>
          <div className="card" style={{margin:"0 14px 14px",padding:"14px"}}>
            {(() => {
              const am = { "优秀": 0, "称职": 0, "基本称职": 0 };
              CADRES.forEach((c) => { if (c.assessment[0] && am[c.assessment[0].result] !== undefined) am[c.assessment[0].result]++; });
              const colors = { "优秀": "var(--success)", "称职": "var(--blue)", "基本称职": "var(--warning)" };
              const max = Math.max(...Object.values(am));
              return Object.entries(am).map(([k, v]) => (
                <div key={k} style={{display:"flex",alignItems:"center",gap:10,marginBottom:10}}>
                  <span style={{width:62,fontSize:12,color:"var(--text2)"}}>{k}</span>
                  <div style={{flex:1,height:8,background:"var(--bg)",borderRadius:4,overflow:"hidden"}}>
                    <div style={{height:"100%",width:(max?v/max*100:0)+"%",background:colors[k],borderRadius:4}}></div>
                  </div>
                  <span style={{fontSize:12,color:"var(--text1)",fontWeight:600,width:36,textAlign:"right"}}>{v}</span>
                </div>
              ));
            })()}
          </div>

          {/* 梯队预警 */}
          <div className="section-h" style={{padding:"4px 18px 10px"}}>
            <h3>梯队预警</h3>
            <div className="more">{(() => {
              const w = CADRES.filter((c) => (c.age > 50 && c.potential <= 3) || c.assessment[0]?.result === "基本称职");
              return <span>{w.length} 人关注</span>;
            })()} <Icon name="chevronRight" /></div>
          </div>
          <div className="card" style={{margin:"0 14px",padding:"6px 4px"}}>
            {(() => {
              const w = CADRES.filter((c) => (c.age > 50 && c.potential <= 3) || c.assessment[0]?.result === "基本称职").slice(0, 4);
              return w.map((c, i) => (
                <div key={c.id} className="person" style={{padding:"10px 12px"}} onClick={() => onOpen && onOpen(c.id)}>
                  <Avatar cadre={c} size={36} />
                  <div className="pc">
                    <div className="pn" style={{fontSize:13.5}}>{c.name}</div>
                    <div className="pd">{c.dept} · {c.position}</div>
                  </div>
                  {c.age > 50
                    ? <span className="mtag" style={{background:"#FEF3C7",color:"#B45309"}}>临近退休</span>
                    : <span className="mtag" style={{background:"#FEE2E2",color:"var(--danger)"}}>考核预警</span>}
                </div>
              ));
            })()}
          </div>
        </div>
      </div>
    );
  }

  // ============ 我的 ============
  function MineTab({ onOpen, onSub, onTab }) {
    const me = CADRES[1]; // 林海峰
    const menus = [
      { icon: "assessment", bg: "var(--red-light)", color: "var(--red)", label: "我的考核", val: "2025 年度 优秀", on: () => onTab("assess") },
      { icon: "award", bg: "var(--gold-light)", color: "var(--gold)", label: "我的奖惩", val: me.rewards.length + " 项荣誉", on: () => onSub("reward") },
      { icon: "doc", bg: "var(--blue-light)", color: "var(--blue)", label: "我的档案", val: "", on: () => onOpen(me.id) },
      { icon: "history", bg: "#F3E8FF", color: "#7C3AED", label: "操作记录", val: "", on: () => onSub("log") },
      { icon: "bell", bg: "#FEF3C7", color: "#B45309", label: "消息通知", val: "3 条未读", on: () => onSub("notify") },
      { icon: "grid", bg: "var(--blue-light)", color: "var(--blue)", label: "九宫格", val: "", on: () => onSub("talent") },
      { icon: "settings", bg: "var(--bg)", color: "var(--text2)", label: "设置", val: "", on: null },
    ];
    return (
      <div className="app-body slide">
        <div className="mine-head">
          <div className="mh-av">{me.avatar}</div>
          <div>
            <div className="mn">{me.name}</div>
            <div className="mp">{me.position} · {me.dept}</div>
          </div>
        </div>

        {/* 我的指标 */}
        <div className="stat-row" style={{gridTemplateColumns:"repeat(3,1fr)",marginTop:-14}}>
          <div className="mstat" style={{textAlign:"center",padding:"12px 8px"}}>
            <div className="mv" style={{fontSize:20,color:"var(--red)"}}>{me.workAge}</div>
            <div className="ml" style={{margin:"4px 0 0"}}>工龄（年）</div>
          </div>
          <div className="mstat" style={{textAlign:"center",padding:"12px 8px"}}>
            <div className="mv" style={{fontSize:20,color:"var(--blue)"}}>{me.assessment.length}</div>
            <div className="ml" style={{margin:"4px 0 0"}}>考核记录</div>
          </div>
          <div className="mstat" style={{textAlign:"center",padding:"12px 8px"}}>
            <div className="mv" style={{fontSize:20,color:"var(--gold)"}}>{me.rewards.length}</div>
            <div className="ml" style={{margin:"4px 0 0"}}>荣誉表彰</div>
          </div>
        </div>

        <div className="mine-menu">
          {menus.map((m, i) => (
            <div className="mine-item" key={i} onClick={m.on} style={m.on ? null : { opacity: 0.6 }}>
              <div className="mi" style={{background:m.bg,color:m.color}}><Icon name={m.icon} /></div>
              <span className="mt">{m.label}</span>
              {m.val && <span style={{fontSize:12,color:"var(--text3)"}}>{m.val}</span>}
              <span className="chev"><Icon name="chevronRight" /></span>
            </div>
          ))}
        </div>

        <button className="mine-item" style={{margin:"0 14px 18px",borderRadius:12,justifyContent:"center",color:"var(--red)",fontWeight:600}}>
          <Icon name="logout" style={{width:16,height:16}} /> 退出登录
        </button>
      </div>
    );
  }

  // ============ 干部详情（移动端） ============
  function DetailMobile({ cadre, onBack }) {
    const [tab, setTab] = useState("basic");
    const tabs = [["basic","基本信息"],["resume","履历"],["assessment","考核"],["reward","奖惩"]];
    return (
      <div className="app-body slide" style={{position:"relative"}}>
        <button className="dt-back" onClick={onBack}><Icon name="back" /></button>
        <div className="dt-hero">
          <div className="dh-av">{cadre.avatar}</div>
          <div style={{flex:1}}>
            <div className="dh-n">{cadre.name} <span style={{fontSize:13,opacity:.85,fontWeight:400}}>{cadre.gender} · {cadre.age}岁</span></div>
            <div className="dh-p">{cadre.position} · {cadre.dept}</div>
            <div className="dh-c">
              <span className="ct">{cadre.level}</span>
              {cadre.party === "中共党员" && <span className="ct">中共党员</span>}
              {cadre.party === "中共预备党员" && <span className="ct">预备党员</span>}
              <span className="ct">{cadre.edu.level}</span>
            </div>
          </div>
        </div>

        {/* 关键指标 */}
        <div style={{display:"grid",gridTemplateColumns:"repeat(3,1fr)",gap:0,margin:"0 14px",background:"var(--surface)",borderRadius:12,marginTop:-12,position:"relative",overflow:"hidden",boxShadow:"0 4px 14px rgba(16,24,40,.06)"}}>
          <div style={{textAlign:"center",padding:"14px 6px",borderRight:"1px solid var(--border)"}}>
            <div style={{fontSize:18,fontWeight:700,color: cadre.assessment[0]?.result === "优秀" ? "var(--red)" : "var(--text1)"}}>{cadre.assessment[0]?.result || "—"}</div>
            <div style={{fontSize:10.5,color:"var(--text3)",marginTop:3}}>年度考核</div>
          </div>
          <div style={{textAlign:"center",padding:"14px 6px",borderRight:"1px solid var(--border)"}}>
            <div style={{fontSize:18,fontWeight:700,color:"var(--blue)"}}>{"★".repeat(cadre.performance)}</div>
            <div style={{fontSize:10.5,color:"var(--text3)",marginTop:3}}>业绩表现</div>
          </div>
          <div style={{textAlign:"center",padding:"14px 6px"}}>
            <div style={{fontSize:18,fontWeight:700,color:"var(--gold)"}}>{"★".repeat(cadre.potential)}</div>
            <div style={{fontSize:10.5,color:"var(--text3)",marginTop:3}}>发展潜力</div>
          </div>
        </div>

        {/* 子 Tab */}
        <div className="seg-tabs" style={{margin:"14px"}}>
          {tabs.map(([k,label]) => (
            <button key={k} className={tab === k ? "active" : ""} onClick={() => setTab(k)}>{label}</button>
          ))}
        </div>

        {tab === "basic" && (
          <div className="dt-card" style={{marginTop:0}}>
            <div className="ch"><Icon name="user" />基本信息</div>
            <div className="cb">
              <KV k="姓名" v={cadre.name} />
              <KV k="性别" v={cadre.gender} />
              <KV k="出生年月" v={cadre.birth} />
              <KV k="民族" v={cadre.nation} />
              <KV k="籍贯" v={cadre.native} />
              <KV k="政治面貌" v={cadre.party} />
              <KV k="入党时间" v={cadre.partyDate} />
              <KV k="参加工作" v={cadre.workAge + " 年"} />
              <KV k="现任职务" v={cadre.position} />
              <KV k="所属部门" v={cadre.dept} />
              <KV k="学历" v={cadre.edu.level} />
              <KV k="毕业院校" v={cadre.edu.school} />
              <KV k="所学专业" v={cadre.edu.major} />
              <KV k="联系电话" v={cadre.phone} />
            </div>
          </div>
        )}

        {tab === "resume" && (
          <div className="dt-card" style={{marginTop:0}}>
            <div className="ch"><Icon name="history" />工作履历</div>
            <div className="cb">
              <div className="dt-tl">
                {parseResume(cadre.resume).map((r, i, arr) => (
                  <div key={i} className={"ti" + (i === arr.length - 1 ? " now" : "")}>
                    <div className="td">{r.from} — {r.to}</div>
                    <div className="tx">{r.desc}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        )}

        {tab === "assessment" && (
          <div className="dt-card" style={{marginTop:0}}>
            <div className="ch"><Icon name="assessment" />考核记录</div>
            <div className="cb">
              {cadre.assessment.map((a, i) => (
                <div className="rec" key={i}>
                  <div className="ri" style={{background: a.result === "优秀" ? "#DCFCE7" : a.result === "基本称职" ? "#FEF3C7" : "var(--bg)", color: a.result === "优秀" ? "var(--success)" : a.result === "基本称职" ? "var(--warning)" : "var(--text2)"}}><Icon name="assessment" /></div>
                  <div style={{flex:1}}>
                    <div className="rt">{a.year} 年度 · {a.result}</div>
                    <div className="rs">排名 {a.rank} · 本单位组织部门</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}

        {tab === "reward" && (
          <div className="dt-card" style={{marginTop:0,marginBottom:18}}>
            <div className="ch"><Icon name="award" />奖惩记录</div>
            <div className="cb">
              {cadre.rewards.length === 0 && cadre.punish.length === 0 && (
                <div className="mempty"><Icon name="award" /><div>暂无奖惩记录</div></div>
              )}
              {cadre.rewards.map((r, i) => (
                <div className="rec" key={"r"+i}>
                  <div className="ri" style={{background:"var(--gold-light)",color:"var(--gold)"}}><Icon name="award" /></div>
                  <div style={{flex:1}}>
                    <div className="rt">{r.title}</div>
                    <div className="rs">{r.date} · {r.org} · {r.type}</div>
                  </div>
                  <Badge color="gold">奖励</Badge>
                </div>
              ))}
              {cadre.punish.map((p, i) => (
                <div className="rec" key={"p"+i}>
                  <div className="ri" style={{background:"#FEE2E2",color:"var(--danger)"}}><Icon name="flag" /></div>
                  <div style={{flex:1}}>
                    <div className="rt">{p.title}</div>
                    <div className="rs">{p.date} · {p.org} · {p.type}</div>
                  </div>
                  <Badge color="red">惩戒</Badge>
                </div>
              ))}
            </div>
          </div>
        )}

        <div style={{height:14}}></div>
      </div>
    );
  }

  function KV({ k, v }) {
    return <div className="kv"><div className="k">{k}</div><div className="v">{v || "—"}</div></div>;
  }

  // ============ 审批中心（钉钉工作通知样式） ============
  function ApprovalCenter({ onBack, onOpen, onOpenDetail }) {
    const [seg, setSeg] = useState("todo"); // todo | done | cc

    const todo = [
      { id: 1, type: "晋升审批", icon: "trendUp", tone: "r", title: "郑文涛 · 职务提拔", from: "林海峰", dept: "技术研发中心", action: "副主任 → 主任 · 正处级", time: "06-22 14:30", status: "待审批", openId: "C20260008" },
      { id: 2, type: "考核测评", icon: "assessment", tone: "b", title: "2026 年度干部考核", from: "组织部", dept: "全单位 24 人", action: "请完成 5 名下属干部的评价", time: "06-20 09:00", status: "待测评" },
      { id: 3, type: "奖惩确认", icon: "award", tone: "y", title: "陈志远 · 优秀党务工作者", from: "市委", dept: "党委办公室", action: "荣誉表彰归档签批", time: "06-18 16:08", status: "待确认", openId: "C20260001" },
    ];
    const done = [
      { id: 4, type: "奖惩审批", icon: "award", tone: "y", title: "高芸 · 三八红旗手", from: "市妇联", dept: "市场营销部", action: "已通过 · 表彰已归档", time: "06-15 11:22", status: "已通过", openId: "C20260009" },
      { id: 5, type: "晋升审批", icon: "trendUp", tone: "r", title: "韩雪 · 处长提拔", from: "组织部", dept: "组织部", action: "已通过 · 任前公示中", time: "06-12 15:40", status: "已通过", openId: "C20260015" },
      { id: 6, type: "数据导入", icon: "sync", tone: "g", title: "朗新系统同步", from: "系统", dept: "全单位", action: "11 条变动已入库", time: "06-10 02:00", status: "已确认" },
    ];
    const cc = [
      { id: 7, type: "任职决定", icon: "briefcase", tone: "b", title: "秦海洋 · 市场营销部部长", from: "党委", dept: "市场营销部", action: "已任职 · 正处级", time: "06-25 10:00", status: "抄送", openId: "C20260018" },
      { id: 8, type: "数据同步", icon: "database", tone: "g", title: "朗新定时同步任务", from: "系统", dept: "全单位", action: "增量同步 11 条变动", time: "06-22 02:00", status: "抄送" },
    ];

    const list = seg === "todo" ? todo : seg === "done" ? done : cc;
    const toneBg = { r: "var(--red-light)", b: "var(--blue-light)", y: "var(--gold-light)", g: "#DCFCE7" };
    const toneFg = { r: "var(--red)", b: "var(--blue)", y: "var(--gold)", g: "var(--success)" };

    return (
      <div className="app-body slide">
        <div className="app-header" style={{paddingBottom:"12px"}}>
          <div className="ah-top">
            <button className="ah-back" onClick={onBack}><Icon name="back" /></button>
            <div className="ah-title">审批中心</div>
            <div className="ah-ico"><Icon name="filter" /></div>
          </div>
        </div>

        {/* 汇总条 */}
        <div className="ap-summary">
          <div className="ap-stat">
            <div className="ap-num" style={{color:"var(--red)"}}>{todo.length}</div>
            <div className="ap-lbl">待审批</div>
          </div>
          <div className="ap-stat">
            <div className="ap-num">{done.length}</div>
            <div className="ap-lbl">本月已办</div>
          </div>
          <div className="ap-stat">
            <div className="ap-num">2.4<small>h</small></div>
            <div className="ap-lbl">平均耗时</div>
          </div>
        </div>

        {/* 3 段 */}
        <div className="seg-tabs seg-three">
          <button className={seg === "todo" ? "active" : ""} onClick={() => setSeg("todo")}>待办 ({todo.length})</button>
          <button className={seg === "done" ? "active" : ""} onClick={() => setSeg("done")}>已办</button>
          <button className={seg === "cc" ? "active" : ""} onClick={() => setSeg("cc")}>抄送</button>
        </div>

        <div style={{paddingBottom:18}}>
          {list.map((it) => (
            <div className="ap-card" key={it.id}>
              <div className="ap-head">
                <div className="ap-ic" style={{background:toneBg[it.tone], color:toneFg[it.tone]}}><Icon name={it.icon} /></div>
                <div className="ap-main">
                  <div className="ap-type">{it.type}</div>
                  <div className="ap-time">{it.time} · {it.from} 发起</div>
                </div>
                <span className={"ap-status st-" + it.tone}>{it.status}</span>
              </div>
              <div className="ap-title">{it.title}</div>
              <div className="ap-sub">{it.dept} · {it.action}</div>
              {seg === "todo" ? (
                <div className="ap-actions">
                  <button className="ap-reject">拒绝</button>
                  <div style={{flex:1}}></div>
                  <button className="ap-view" onClick={() => onOpenDetail(it)}>查看详情</button>
                  <button className="mbtn r">同意</button>
                </div>
              ) : (
                <div className="ap-actions">
                  <div style={{flex:1}}></div>
                  <button className="ap-view" onClick={() => onOpenDetail(it)}>查看详情</button>
                </div>
              )}
            </div>
          ))}
          {list.length === 0 && <div className="mempty"><Icon name="check" /><div>暂无内容</div></div>}
        </div>
      </div>
    );
  }

  // ============ 底部 Tab Bar ============
  function TabBar({ tab, onChange }) {
    return (
      <nav className="tab-bar">
        {TABS.map((t) => (
          <button key={t.id} className={"tab" + (tab === t.id ? " active" : "")} onClick={() => onChange(t.id)}>
            <Icon name={t.icon} />
            <span>{t.label}</span>
          </button>
        ))}
      </nav>
    );
  }

  const root = ReactDOM.createRoot(document.getElementById("root"));
  root.render(React.createElement(PhoneApp));
})();