FamilyBook/templates/resources/index.php

<?php
/**
 * 资源（v12；v24 第 23 批 用户第 1 条重构）。
 *
 * 用户原话：
 *   「资源页面，还可以更简洁，资源打开后，没有正文就不显示（没有正文）这句话了，
 *     直接显示附件。附件列完后，列出来人员，所有者、共享给谁了。然后其他的都不要。
 *     把编辑、共享、附件、删除，四个按钮，放在每个资源的右上角，和标题一排，
 *     点击后分别是编辑信息、设置共享人员，包括删除共享人等，附件，点击后弹框，
 *     允许用户拖动上传。编辑黄色、共享绿色、附件蓝色、删除红色。
 *     按钮点击后的功能，都是弹框。」
 *
 * → 这一版做了三件事：
 *   ① **展开区只留"看"**：正文（没有就**不占位**，不再写「（没有正文）」）、
 *      附件墙（只读，可预览/下载）、人员行（所有者 + 共享给谁）。
 *      原来堆在展开区底部的补传附件 / 共享设置 / 编辑 / 删除 四坨内联表单**全部撤掉** ——
 *      那些是"改"的动作，都搬到弹框里去。
 *   ② **标题行右上角四色按钮**：编辑(黄) 共享(绿) 附件(蓝) 删除(红)，与标题同一排。
 *   ③ **四个动作全在弹框里**，容器 `#resPanels` 全页只有一份 ——
 *      与名册的 `#rosterMenus`、财务的 `#ledPanels` 是同一套做法：
 *      行上只留按钮，真正的 `<form>` 只渲染一份。
 *      ⚠️ 这正是项目一直在治的那类问题：每行内联一套表单，条目一多就是几千个 `<form>`，
 *         密码管理器逐个扫描会把主线程占死（用户报过两次，见 ledger/people 的注释）。
 *
 * ⚠️ 按钮放在 `<summary>` 里为什么不会误开合：
 *    `<summary>` 内任意位置点击都会 toggle `<details>`（浏览器默认行为），
 *    所以四个按钮的 click 处理里**必须** `preventDefault()`（见文件末尾脚本的说明）。
 *    真机探针专门断言了「点按钮 → 弹框打开、且这一条**没有**被展开」。
 *
 * ⚠️ 结构性约束：`<summary>` 里只能放 **phrasing content** ——
 *    所以按钮组写成 span（class 为 res-ops）而不是 div；
 *    `<form>` 更是绝对不能放进去（那是 flow content）。
 *    这也是"四个动作必须进弹框"的一条额外理由：删除/补传/共享/编辑在原实现里
 *    全都是 `<form>`，留在标题行会直接产出非法 HTML。
 *
 * @param array  $rows     我能看到的资源（带 perm / owner_nick）
 * @param array  $people   名册（新建/编辑时选归属人、共享给别人）
 * @param array  $attachs  resource_id => 附件列表
 * @param array  $shares   resource_id => 共享列表
 */
$isEditing = !empty($editing);
$canWrite  = \App\Auth::canWrite();
$myPerson  = (int)\App\Auth::personId();
?>
<div class="page-head">
  <h1>资源</h1>
  <span class="sub">共 <?= count($rows) ?> 条</span>
  <div class="actions">
    <?php if ($canWrite): ?>
      <button class="btn" type="button" id="resAddBtn"><?= $isEditing ? '收起' : '新建资源' ?></button>
    <?php else: ?>
      <span class="link-quiet">只读账号</span>
    <?php endif; ?>
  </div>
</div>

<?php /* v24（用户 2026-10-02 第 18 条）：**新建资源页**去掉「搜索资源」——
         资源本来就不多，搜索框反而把「新建」按钮挤下去了。
         ⚠️ 但 2026-10-03 第 6 / 10 条把搜索**请回列表页**了，而且是"上来就是搜索"：
            资源会越攒越多（第 10 条原话：「可能会非常多」），没有搜索就只能滚动。
            两件事不矛盾：新建那块仍然干净，搜索长在**列表**上。
            区别在于现在是页面顶部的**第一块**，不是夹在新建表单里的一个输入框。 */ ?>

<div class="card card-pad res-search-card">
  <form class="search res-search" method="get" action="index.php">
    <input type="hidden" name="r" value="resources">
    <input type="hidden" name="sort" value="<?= e($sort) ?>">
    <label class="sr-only" for="resKw">搜索资源</label>
    <input class="input" id="resKw" name="keyword" value="<?= e($keyword) ?>"
           placeholder="搜标题 / 正文，如「身份证」" autocomplete="off">
    <button class="btn btn-ghost btn-sm" type="submit">搜索</button>
    <?php if ($keyword !== ''): ?>
      <a class="btn btn-ghost btn-sm" href="<?= e(url('resources')) ?>">清除</a>
    <?php endif; ?>
  </form>
  <?php /* 排序：最新新增 / 最近改动。用链接而不是下拉，一眼看出当前按什么排的。 */ ?>
  <div class="res-sortbar">
    <span class="small muted">排序</span>
    <span class="seg">
      <a class="seg-btn<?= $sort === 'used' ? ' is-on' : '' ?>"
         href="<?= e(url('resources', ['sort' => 'used', 'keyword' => $keyword])) ?>">最近改动</a>
      <a class="seg-btn<?= $sort === 'new' ? ' is-on' : '' ?>"
         href="<?= e(url('resources', ['sort' => 'new', 'keyword' => $keyword])) ?>">最新新增</a>
    </span>
    <?php if (!$showAll && $totalAll > count($rows)): ?>
      <a class="link-quiet res-showall" href="<?= e(url('resources', ['sort' => $sort, 'keyword' => $keyword, 'all' => 1])) ?>">
        显示全部 <?= (int)$totalAll ?> 条
      </a>
    <?php endif; ?>
  </div>
</div>

<?php if ($canWrite): ?>
  <div class="card card-pad" id="resAddCard" <?= $isEditing ? '' : 'hidden' ?>>
    <h2 class="cinema-h2"><?= $isEditing ? '编辑资源' : '新建资源' ?></h2>
    <form method="post" enctype="multipart/form-data"
          action="<?= e(url($isEditing ? 'resources/update' : 'resources/create')) ?>">
      <?= csrf_field() ?>
      <?php if ($isEditing): ?>
        <input type="hidden" name="id" value="<?= (int)$editing['id'] ?>">
      <?php endif; ?>
      <div class="form-grid">
        <div class="field">
          <label>归属于谁 *</label>
          <?php /* v24 第 11 条：与全局选人组件统一（原来是下拉，名册一长就难找） */ ?>
          <?php
          $ppName     = 'owner_id';
          $ppPeople   = $people;
          $ppSelected = [(int)($editing['owner_id'] ?? (int)\App\Auth::personId())];
          $ppMode     = 'single';
          $ppOpenBtn  = '选择归属人';
          $ppTitle    = '资源归属于谁';
          $ppEmptyText = '未选择';
          require __DIR__ . '/../_person_picker.php';
          ?>
        </div>
        <div class="field">
          <label for="rs-title">标题 *</label>
          <input class="input" id="rs-title" name="title" required
                 value="<?= e($editing['title'] ?? '') ?>" placeholder="如：身份证 / 学位证">
        </div>
        <div class="field full">
          <label for="rs-content">正文</label>
          <textarea class="input" id="rs-content" name="content" rows="3"
                    placeholder="编号、有效期、放在哪里…"><?= e($editing['content'] ?? '') ?></textarea>
        </div>
        <div class="field full">
          <label for="sd-attach">附件（可多选）</label>
          <?php /* ⚠️ 新建时资源还不存在，附件只能在这里一起提交（建完再挂）。
                 列表里那条的附件管理则走右上角蓝色的「附件」弹框。
                 两处的文件框 id 必须**不同**（同 id 会撞），所以这里显式给一个。 */
                $sdName = 'attach[]'; $sdSlot = 'photo'; $sdId = 'sd-attach';
                require __DIR__ . '/../_stage_drop.php'; ?>
        </div>
      </div>
      <div class="btn-row">
        <button class="btn" type="submit"><?= $isEditing ? '保存' : '新建' ?></button>
        <?php if ($isEditing): ?>
          <a class="btn btn-ghost" href="<?= e(url('resources')) ?>">取消</a>
        <?php endif; ?>
      </div>
    </form>
  </div>
<?php endif; ?>

<div class="card card-pad">
  <h2 class="cinema-h2">
    资源列表
    <?php
    // ⚠️ 提示语要说清"为什么只有这些"：
    //    · 搜索时只有几条是**因为搜索**（不是被截断）→ 别在这儿提"只显示最新 10 条"，
    //      否则用户会以为"搜出来的结果又被砍了"；
    //    · 没搜索又确实多于 10 条，才提示截断，并给出"显示全部"。
    ?>
    <?php if ($keyword !== ''): ?>
      <span class="hint">匹配「<?= e($keyword) ?>」的 <?= count($rows) ?> 条</span>
    <?php elseif (!$showAll && $totalAll > count($rows)): ?>
      <span class="hint">只显示最新的 <?= (int)$limit ?> 条（共 <?= (int)$totalAll ?> 条）</span>
    <?php else: ?>
      <span class="hint">共 <?= count($rows) ?> 条</span>
    <?php endif; ?>
  </h2>
  <?php if (!$rows): ?>
    <p class="empty-hint">
      <?= $keyword !== ''
          ? '没有匹配「' . e($keyword) . '」的资源，换个词试试。'
          : '还没有资源。证件、照片、账号这些"挂在某人名下的东西"都可以记在这里。' ?>
    </p>
  <?php else: ?>
    <div class="res-list">
      <?php foreach ($rows as $r): ?>
        <?php
        $rid     = (int)$r['id'];
        $as      = $attachs[$rid] ?? [];
        $sh      = $shares[$rid] ?? [];
        $canEdit = $canWrite && \App\Resource::canWrite($r, $myPerson);
        $ownerArr = [
            'id' => (int)$r['owner_id'], 'name' => (string)$r['owner_name'],
            'my_nickname' => (string)($r['owner_nick'] ?? ''),
            'avatar' => $r['avatar'] ?? null, 'avatar_color' => $r['avatar_color'] ?? null,
        ];
        ?>
        <details class="res-item">
          <summary class="res-head">
            <span class="res-title"><?= e((string)$r['title']) ?></span>
            <?php /* 归属人标签：查询里"人"的字段没加前缀（owner_name / avatar / avatar_color），
                     只有昵称带 owner_ 前缀 —— 在这里拼成 person_chip 认的形状。 */ ?>
            <?= person_chip($ownerArr) ?>
            <span class="node-badge"><?= e(\App\Resource::permWord((string)$r['perm'])) ?></span>
            <?php if ($as): ?><span class="res-n"><?= count($as) ?> 个附件</span><?php endif; ?>

            <?php /* ---- 右上角四色按钮（与标题同一排）----
                     ⚠️ 必须用 <span> 包（phrasing content）；`<div>`/`<form>` 放 <summary> 里是非法 HTML。
                     ⚠️ 每个按钮都带 `data-res-open`，脚本里对它 `preventDefault()`
                        以阻止 <summary> 顺带把这一条展开。 */ ?>
            <?php if ($canEdit): ?>
              <span class="res-ops">
                <button type="button" class="btn btn-warn btn-sm res-op"
                        data-res-open="edit" data-res-id="<?= $rid ?>"
                        data-res-title="<?= e((string)$r['title']) ?>"
                        data-res-content="<?= e((string)($r['content'] ?? '')) ?>"
                        data-res-owner="<?= (int)$r['owner_id'] ?>">编辑</button>
                <button type="button" class="btn btn-ok btn-sm res-op"
                        data-res-open="share" data-res-id="<?= $rid ?>"
                        data-res-title="<?= e((string)$r['title']) ?>"
                        data-res-shares="<?= e((string)json_encode(array_map(
                            static fn($s): array => [
                                'id'   => (int)$s['person_id'],
                                'name' => (string)$s['name'],
                                'perm' => (string)($s['perm'] ?? 'read'),
                            ], $sh), JSON_UNESCAPED_UNICODE)) ?>">共享</button>
                <button type="button" class="btn btn-info btn-sm res-op"
                        data-res-open="att" data-res-id="<?= $rid ?>"
                        data-res-title="<?= e((string)$r['title']) ?>"
                        data-res-atts="<?= e((string)json_encode(array_map(
                            static function ($a): array {
                                $k = \App\Attachment::kind($a);
                                return [
                                    'id'   => (int)$a['id'],
                                    'name' => (string)($a['name'] ?? ''),
                                    'kw'   => \App\Attachment::kindWord($k),
                                    'kind' => $k,
                                    'url'  => media_url((string)$a['key']),
                                    'dl'   => media_url((string)$a['key'], ['dl' => 1]),
                                    'sz'   => \App\Attachment::sizeWord($a['size'] ?? 0),
                                ];
                            }, $as), JSON_UNESCAPED_UNICODE)) ?>">附件</button>
                <button type="button" class="btn btn-del btn-sm res-op"
                        data-res-open="del" data-res-id="<?= $rid ?>"
                        data-res-title="<?= e((string)$r['title']) ?>"
                        data-res-n="<?= count($as) ?>">删除</button>
              </span>
            <?php endif; ?>
            <span class="res-caret" aria-hidden="true">▾</span>
          </summary>

          <div class="res-body">
            <?php /* ① 正文：**没有就不占位**（用户第 1 条：不再写「（没有正文）」）。 */ ?>
            <?php if (!empty($r['content'])): ?>
              <p class="info-text"><?= nl2br(e((string)$r['content'])) ?></p>
            <?php endif; ?>

            <?php /* ② 附件墙：这里是"看"，删除入口在蓝色「附件」弹框里（见下）。
                     ⚠️ `$attCanEdit = false`：把删除按钮从展开区撤掉。
                        理由：① 用户要的四个动作都在右上角按钮里；
                              ② 内联的删除表单是"每行一个 <form>"膨胀的最后一处。 */ ?>
            <?php
            $attRows    = $as;
            $attCanEdit = false;
            $attDelUrl  = 'resources/attach_del';
            $attDelField = 'id';
            $attExtra   = [];
            require __DIR__ . '/../_attachments.php';
            ?>

            <?php /* ③ 人员行：附件列完之后列出来 —— 所有者、共享给谁（用户原话）。 */ ?>
            <div class="res-people">
              <span class="res-label">所有者</span>
              <?= person_chip($ownerArr) ?>
              <?php if ($sh): ?>
                <span class="res-label">共享给</span>
                <?php foreach ($sh as $s): ?>
                  <?= person_chip($s) ?>
                  <span class="node-badge"><?= ($s['perm'] ?? '') === 'write' ? '可读写' : '只读' ?></span>
                <?php endforeach; ?>
              <?php else: ?>
                <span class="small muted">（还没有共享给谁）</span>
              <?php endif; ?>
            </div>
          </div>
        </details>
      <?php endforeach; ?>
    </div>
    <?php /* 用户第 10 条：截断的地方要留一个明确的出口，别让人以为"就只有这 10 条"。 */ ?>
    <?php if (!$showAll && $totalAll > count($rows)): ?>
      <div class="res-more">
        <a class="btn btn-ghost btn-sm"
           href="<?= e(url('resources', ['sort' => $sort, 'keyword' => $keyword, 'all' => 1])) ?>">
          显示全部 <?= (int)$totalAll ?> 条
        </a>
        <span class="small muted">只按「<?= $sort === 'new' ? '最新新增' : '最近改动' ?>」取了前 <?= (int)$limit ?> 条 —— 找不到就直接搜。</span>
      </div>
    <?php endif; ?>
  <?php endif; ?>
</div>

<?php /* ==================== 四个动作的弹框（全页各一份）====================
   与名册的 #rosterMenus、财务的 #ledPanels 同一套：
   行上只留按钮，真正的 <form> 集中在这里渲染**一份**。

   ⚠️ `[hidden]` 必须自己声明：`.res-modal` 与 `.res-panel-lg` 都写了 `display:flex`，
      浏览器默认的 `[hidden]{display:none}` 会被它们盖过 —— 于是"关不掉"。
      （项目在 `.pv` / `.pp-item` 上各栽过一次，所以 CSS 里 `.res-modal[hidden]` 是硬要求。） */ ?>
<?php if ($canWrite): ?>
  <div class="res-modal" id="resPanels" hidden>
    <div class="res-mask" data-res-close></div>

    <?php /* ---------- ① 编辑信息（黄色按钮） ---------- */ ?>
    <div class="res-panel-lg" id="resEditPanel" hidden role="dialog" aria-modal="true" aria-label="编辑资源">
      <div class="res-ph"><b>编辑「<span class="rd-title"></span>」</b>
        <button type="button" class="res-x" data-res-close aria-label="关闭">✕</button></div>
      <form method="post" action="<?= e(url('resources/update')) ?>">
        <?= csrf_field() ?>
        <input type="hidden" name="id" value="">
        <div class="res-pb">
          <div class="field">
            <label>归属于谁 *</label>
            <?php
            $ppName     = 'owner_id';
            $ppPeople   = $people;
            $ppSelected = [];
            $ppMode     = 'single';
            $ppOpenBtn  = '更换归属人';
            $ppTitle    = '资源归属于谁';
            $ppEmptyText = '未选择';
            require __DIR__ . '/../_person_picker.php';
            ?>
          </div>
          <div class="field">
            <label>标题 *</label>
            <input class="input" name="title" required>
          </div>
          <div class="field">
            <label>正文</label>
            <textarea class="input" name="content" rows="3"
                      placeholder="编号、有效期、放在哪里…"></textarea>
          </div>
          <p class="tip" style="margin:0">
            附件不在这里改 —— 用蓝色「附件」按钮（那边可以拖动上传、也能删）。
          </p>
        </div>
        <div class="res-pf">
          <button class="btn btn-warn" type="submit">保存</button>
          <button class="btn btn-ghost" type="button" data-res-close>取消</button>
        </div>
      </form>
    </div>

    <?php /* ---------- ② 共享设置（绿色按钮）----------
       用户原话：「设置共享人员，**包括删除共享人**等」→ 一个面板里两件事：
         · 上面：给谁开共享（选人 + 权限 + 共享按钮）
         · 下面：已经共享给谁 + 逐个「取消共享」
       ⚠️ "已共享"那一段由脚本按按钮上的 `data-res-shares` 现渲染，
          **不是**每条资源渲染一份表单 —— 那正是要避免的膨胀。
          取消共享走下面这个唯一的 #resUnshareForm（脚本填 id/person_id 后提交）。 */ ?>
    <div class="res-panel-lg" id="resSharePanel" hidden role="dialog" aria-modal="true" aria-label="共享设置">
      <div class="res-ph"><b>共享「<span class="rd-title"></span>」</b>
        <button type="button" class="res-x" data-res-close aria-label="关闭">✕</button></div>
      <div class="res-pb">
        <form method="post" action="<?= e(url('resources/share')) ?>">
          <?= csrf_field() ?>
          <input type="hidden" name="id" value="">
          <div class="field">
            <label>共享给谁</label>
            <?php
            $ppName     = 'person_id';
            $ppPeople   = $people;
            $ppSelected = [];
            $ppMode     = 'single';
            $ppOpenBtn  = '选择要共享给谁';
            $ppTitle    = '共享给谁';
            $ppEmptyText = '未选择';
            require __DIR__ . '/../_person_picker.php';
            ?>
            <span class="tip">所有者本来就有全部权限，不用（也不能）共享给他。</span>
          </div>
          <div class="field">
            <label>权限</label>
            <select class="select" name="perm">
              <option value="read">只读</option>
              <option value="write">可读写</option>
            </select>
          </div>
          <div class="btn-row" style="margin-top:0">
            <button class="btn btn-ok" type="submit">共享</button>
          </div>
        </form>

        <div class="res-share-now">
          <h3 class="res-sub">已共享给</h3>
          <div class="rd-share-list" id="resShareNow"></div>
        </div>
      </div>
      <?php /* 取消共享：唯一的一份表单，脚本填两个隐藏字段后提交。 */ ?>
      <form method="post" action="<?= e(url('resources/unshare')) ?>" id="resUnshareForm" hidden>
        <?= csrf_field() ?>
        <input type="hidden" name="id" value="">
        <input type="hidden" name="person_id" value="">
      </form>
    </div>

    <?php /* ---------- ③ 附件（蓝色按钮）----------
       用户原话：「附件，点击后弹框，允许用户拖动上传」。
       → 上：已有附件（可删）；下：拖动/点击上传区（复用全站那套 `_stage_drop.php`，
         框 + 立刻上传 + 暂存令牌，与其它模块完全一致）。 */ ?>
    <div class="res-panel-lg" id="resAttPanel" hidden role="dialog" aria-modal="true" aria-label="附件">
      <div class="res-ph"><b>附件 ·「<span class="rd-title"></span>」</b>
        <button type="button" class="res-x" data-res-close aria-label="关闭">✕</button></div>
      <div class="res-pb">
        <div class="rd-att-now">
          <h3 class="res-sub">已有附件</h3>
          <div class="rd-att-list" id="resAttNow"></div>
        </div>
        <form method="post" enctype="multipart/form-data"
              action="<?= e(url('resources/attach_add')) ?>" id="resAttForm">
          <?= csrf_field() ?>
          <input type="hidden" name="id" value="">
          <h3 class="res-sub">添加附件</h3>
          <?php /* ⚠️ 自己的文件框 id（与"新建资源"里那个必须不同，同 id 会撞）。 */ ?>
          <?php $sdName = 'attach[]'; $sdSlot = 'photo'; $sdId = 'sd-attach-panel';
                require __DIR__ . '/../_stage_drop.php'; ?>
          <div class="btn-row">
            <button class="btn btn-info" type="submit">上传</button>
          </div>
          <p class="tip" style="margin:4px 0 0">
            拖进来会**立刻上传**；点「上传」才真正挂到这条资源上。
          </p>
        </form>
      </div>
      <?php /* 删附件：唯一的一份表单，脚本填 id 后提交。 */ ?>
      <form method="post" action="<?= e(url('resources/attach_del')) ?>" id="resAttDelForm" hidden>
        <?= csrf_field() ?>
        <input type="hidden" name="id" value="">
      </form>
    </div>

    <?php /* ---------- ④ 删除（红色按钮）---------- */ ?>
    <div class="res-panel-sm" id="resDelPanel" hidden role="dialog" aria-modal="true" aria-label="删除资源">
      <div class="res-ph"><b>删除「<span class="rd-title"></span>」</b>
        <button type="button" class="res-x" data-res-close aria-label="关闭">✕</button></div>
      <form method="post" action="<?= e(url('resources/destroy')) ?>">
        <?= csrf_field() ?>
        <input type="hidden" name="id" value="">
        <div class="res-pb">
          <p class="del-big-tip" style="margin:0">
            删除后<b>不能撤销</b>，这条资源连同它的
            <b><span class="rd-attn">0</span> 个附件</b>会一起删掉。
          </p>
        </div>
        <div class="res-pf">
          <button class="btn btn-del" type="submit">确认删除</button>
          <button class="btn btn-ghost" type="button" data-res-close>取消</button>
        </div>
      </form>
    </div>
  </div>
<?php endif; ?>

<script>
(function () {
  /* ---- 「新建资源」开合（与旧版一致）---- */
  var addBtn  = document.getElementById('resAddBtn');
  var addCard = document.getElementById('resAddCard');
  if (addBtn && addCard) {
    addBtn.addEventListener('click', function () {
      addCard.hidden = !addCard.hidden;
      addBtn.textContent = addCard.hidden ? '新建资源' : '收起';
      if (!addCard.hidden) { addCard.scrollIntoView({ block: 'nearest' }); }
    });
  }

  /* ============================================================
     四个动作 → 一份共享弹框（v24 第 23 批 用户第 1 条）
     ============================================================ */
  var wrap = document.getElementById('resPanels');
  if (!wrap) { return; }

  var panels = {
    edit:  document.getElementById('resEditPanel'),
    share: document.getElementById('resSharePanel'),
    att:   document.getElementById('resAttPanel'),
    del:   document.getElementById('resDelPanel')
  };

  function closeAll() {
    wrap.hidden = true;
    Object.keys(panels).forEach(function (k) {
      if (panels[k]) { panels[k].hidden = true; }
    });
  }

  function show(which) {
    Object.keys(panels).forEach(function (k) {
      if (panels[k]) { panels[k].hidden = (k !== which); }
    });
    wrap.hidden = false;
    var p = panels[which];
    if (!p) { return; }
    var first = p.querySelector('input:not([type=hidden]), textarea, select');
    if (first) { first.focus(); }
  }

  /** 从 data 属性读 JSON（坏了就当空数组，别让一个坏属性把整个弹框搞死） */
  function jsonOf(el, attr) {
    try {
      var v = JSON.parse(el.getAttribute(attr) || '[]');
      return Array.isArray(v) ? v : [];
    } catch (e) { return []; }
  }

  /** 建一个转义过的文本节点（**不拼 HTML 字符串** —— 名字来自用户输入） */
  function el(tag, cls, text) {
    var n = document.createElement(tag);
    if (cls) { n.className = cls; }
    if (text !== undefined) { n.textContent = text; }
    return n;
  }

  var shareNow = document.getElementById('resShareNow');
  var attNow   = document.getElementById('resAttNow');

  document.addEventListener('click', function (e) {
    var t = e.target;
    if (!t || !t.closest) { return; }

    /* ---- 展开卡上的四个按钮 ----
       🔴 必须 preventDefault：`<summary>` 内任意点击都会 toggle `<details>`，
          不挡的话"点编辑 → 弹框开了、同时这一条也被展开了"，看着像误触。
          （stopPropagation 挡不住它 —— 那是**默认行为**，不是冒泡。） */
    var op = t.closest('[data-res-open]');
    if (op) {
      e.preventDefault();
      e.stopPropagation();

      var which = op.getAttribute('data-res-open');
      var id    = op.getAttribute('data-res-id');
      var title = op.getAttribute('data-res-title') || '';
      var panel = panels[which];
      if (!panel) { return; }

      // 每个面板都有的两样：标题回显 + 宿主 id
      var tt = panel.querySelector('.rd-title');
      if (tt) { tt.textContent = title; }
      var idInp = panel.querySelector('input[name="id"]');
      if (idInp) { idInp.value = id; }

      if (which === 'edit') {
        var tInp = panel.querySelector('input[name="title"]');
        if (tInp) { tInp.value = title; }
        var cInp = panel.querySelector('textarea[name="content"]');
        if (cInp) { cInp.value = op.getAttribute('data-res-content') || ''; }
        // 归属人：选人组件是单选的，用它的对外接口设置。
        // ⚠️ 必须把 panel 作为 root 传进去 —— 本页有多个同类组件
        //    （新建表单的 owner_id、本面板的 owner_id、共享面板的 person_id），
        //    只按字段名找会命中**文档里第一个**（财务页在这上面栽过）。
        var pid = op.getAttribute('data-res-owner') || '0';
        if (window.ppSetSelected) { window.ppSetSelected('owner_id', pid, panel); }
      }

      if (which === 'share') {
        // 渲染"已共享给谁"。每行一个「取消共享」按钮 →
        // 点它时把 id/person_id 灌进唯一的 #resUnshareForm 再提交。
        if (shareNow) {
          shareNow.innerHTML = '';
          var list = jsonOf(op, 'data-res-shares');
          if (!list.length) {
            shareNow.appendChild(el('span', 'small muted', '还没有共享给谁。'));
          }
          list.forEach(function (s) {
            var row = el('span', 'rd-share-row');
            row.appendChild(el('span', 'rd-share-name', s.name || ('#' + s.id)));
            row.appendChild(el('span', 'node-badge', s.perm === 'write' ? '可读写' : '只读'));
            var b = el('button', 'btn btn-ghost btn-sm', '取消共享');
            b.type = 'button';
            b.setAttribute('data-rd-unshare', String(s.id));
            row.appendChild(b);
            shareNow.appendChild(row);
          });
        }
      }

      if (which === 'att') {
        // 渲染"已有附件"（名字 + 下载 + 删除）
        if (attNow) {
          attNow.innerHTML = '';
          var atts = jsonOf(op, 'data-res-atts');
          if (!atts.length) {
            attNow.appendChild(el('span', 'small muted', '还没有附件。'));
          }
          atts.forEach(function (a) {
            var row = el('span', 'rd-att-row');
            // 图片给一个缩略图，别的给类别词方块 —— 与展开区的附件墙观感一致
            if (a.kind === 'image') {
              var im = el('img', 'rd-att-thumb');
              im.src = a.url;
              im.alt = '';
              row.appendChild(im);
            } else {
              row.appendChild(el('span', 'rd-att-ico', a.kw || '文件'));
            }
            row.appendChild(el('span', 'rd-att-name', a.name || a.kw || '附件'));
            row.appendChild(el('span', 'small muted', a.sz || ''));
            var dl = el('a', 'link-quiet', '下载');
            dl.href = a.dl;
            row.appendChild(dl);
            var db = el('button', 'btn btn-ghost btn-sm', '删除');
            db.type = 'button';
            db.setAttribute('data-rd-attdel', String(a.id));
            row.appendChild(db);
            attNow.appendChild(row);
          });
        }
      }

      if (which === 'del') {
        var n = op.getAttribute('data-res-n') || '0';
        var nn = panel.querySelector('.rd-attn');
        if (nn) { nn.textContent = n; }
      }

      show(which);
      return;
    }

    /* ---- 取消共享（共享面板里现渲染出来的行）---- */
    var un = t.closest('[data-rd-unshare]');
    if (un) {
      e.preventDefault();
      var uf = document.getElementById('resUnshareForm');
      if (!uf) { return; }
      uf.querySelector('input[name="person_id"]').value = un.getAttribute('data-rd-unshare');
      uf.submit();
      return;
    }

    /* ---- 删附件（附件面板里现渲染出来的行）---- */
    var ad = t.closest('[data-rd-attdel]');
    if (ad) {
      e.preventDefault();
      if (!window.confirm('删掉这个附件？')) { return; }
      var df = document.getElementById('resAttDelForm');
      if (!df) { return; }
      df.querySelector('input[name="id"]').value = ad.getAttribute('data-rd-attdel');
      df.submit();
      return;
    }

    if (t.closest('[data-res-close]')) { e.preventDefault(); closeAll(); }
  });

  document.addEventListener('keydown', function (e) {
    if (e.key === 'Escape' && !wrap.hidden) { closeAll(); }
  });
})();
</script>