/**
 * 家书 FamilyBook · 任务面板（鸿蒙端 v79）
 *
 * 🔴 用户 2026-10-22 原话：
 *    「鸿蒙端的功能，也需要同样适配，在首页上可以直接修改编辑任务，
 *      另外任务模块的功能需要完善。」
 *
 * 对应网页 v78 的「就地处理面板」（`templates/tasks/_panel.php`）：
 * 首页点一条任务 / 任务页点一张卡 —— 都在**当前页面**弹出这块面板，
 * 不跳模块、不跳整页，就能：
 *   · 改状态（待办 / 进行中 / 已完成）
 *   · 挪分组（换看板）
 *   · 勾子任务、加一条子任务
 *   · 加图片附件、删附件
 *   · 发留言
 *   · 打开编辑表单（标题/备注/期限/看板/负责人/分类/循环）
 *   · 删任务（二次确认）
 *
 * ⚠️ 为什么不直接复用 `FbTaskEditSheet`：那是**表单**（点开就在编辑）。
 *    用户此刻多数是"看看它是什么、顺手改一下状态"。拿表单当详情，
 *    误触一下就把标题改了（v73 的取舍，见 `FbTaskDetailSheet` 文件头）。
 *    ⇒ 面板只读为主 + 两颗明确的动作（编辑 / 删除），编辑才进表单。
 *
 * 🔴 三条纪律：
 *    ① 改状态**只走** `POST /tasks/<id>/status`（PATCH 会忽略 status）；
 *    ② 每个动作成功后再 `getTask()` 重拉一次：一次动作会牵动子任务计数、
 *       附件张数、看板色，逐处同步 DOM 必然漏一处（与网页 v78 同一取舍）；
 *    ③ 浮层根必须是 `Stack`：遮罩与卡片要**叠**，当 `Column` 子项"排"会把卡片
 *       挤出屏幕（本项目 2026-10-20 真机事故，见 pitfalls）。
 */

import { FbColors, FbMetric, FB_MASK, fbAlpha, fbTint, fbMixWhite } from '../common/Theme';
import {
  FbBoardOpt, FbCatOpt, FbTaskAttach, FbTaskComment, FbTaskDetail, FbTaskItem, FbTaskKid, FbTaskShare,
} from '../model/Types';
import { FbSheetRing } from './FbSheetRing';
import { FbSheetClose } from './FbSheetClose';
import { FbCheckCircle, FbAvatar, FbSectionTitle, FbPersonChip } from './Widgets';
import { FbPersonPickSheet } from './FbPersonPickSheet';
import { FbDateTimePicker, fbIsoOf, fbJoinDateTime } from './FbDateTimeField';
import { fbAttachOpen } from '../common/FbAttachOpen';
import { common } from '@kit.AbilityKit';
import { FbPersonRepo, FbRosterPerson } from '../data/FbPersonRepo';
import { FB_TOKEN_STORE } from '../data/FbTokenStore';
import { fbApi, FbApiResult, FbApiOptions } from '../data/FbHttp';
import { fbImageSrc } from '../data/FbAttachQueue';
import {
  addTaskComment, createTask, deleteTask, delTaskAttach, getTask, moveTask,
  setTaskStatus, uploadTaskAttach, FbTaskDraft,
  fetchTaskShares, shareTask, unshareTask, addTaskCommentWithFile } from '../data/FbTaskRepo';
import { parseTaskDetail } from '../data/FbParse';
import { picker } from '@kit.CoreFileKit';
import { BusinessError } from '@kit.BasicServicesKit';
import { hilog } from '@kit.PerformanceAnalysisKit';

const FB_PANEL_BOTTOM_GAP: number = 14;

@ComponentV2
export struct FbTaskPanel {
  /** 要看的这条任务 */
  @Param taskId: number = 0;
  /**
   * 列表里那一份（先用它渲染，详情接口回来再替换）。
   *
   * ⚠️ 为什么不直接等接口：手机上网络慢一点，点开就是一片空白/转圈，
   *    用户会以为"点不动"。列表里本来就有标题、状态、看板、截止，
   *    先画出来，再补子任务/留言/附件。
   */
  @Param seed: FbTaskItem | null = null;
  /** 全部看板（含空看板）—— 父页面用 `?view=boards` 拿，别从任务里反推 */
  @Param boards: FbBoardOpt[] = [];
  /**
   * 全部分类（`id=0` 由这里补「未分类」，所以传进来的是"真实分类"）。
   *
   * 🔴 #83（用户 2026-11-05）：「分类和重复，也就是循环，都需要加上，
   *    鸿蒙端也得加上。」
   *
   * ⚠️ 与 boards 同一理由：**不能从任务里反推** ——
   *    反推只能看见"已经被用过的"分类，新建的分类在端上永远选不到。
   */
  @Param cats: FbCatOpt[] = [];
  /** 模块主题色（任务 = 赭红） */
  @Param accent: string = '#A8574F';
  /**
   * 外部要求重画的脉冲（宿主改完任务后 +1）。
   *
   * 🔴 为什么不用"关掉再打开"：会闪一下，还会丢掉滚动位置。
   *    ⚠️ 只监听这个数字，**不要**把整条任务当 `@Param` 传进来再比对 ——
   *      对象相等判断会永远认为"没变"（本项目 v54b 的教训）。
   */
  @Param refreshTick: number = 0;

  @Event onClose: () => void = (): void => {
  };
  /**
   * 点「编辑」→ 宿主打开 `FbTaskEditSheet`。
   *
   * ⚠️ 传的是**详情**而不是列表行：编辑要回填「分类 / 循环」，
   *    而列表行（`FbTaskItem`）里没有这两项 —— 只传列表行会让用户一保存
   *    就把分类和循环**静默清空**（端上 v77 已踩过同类"没传=清空"）。
   */
  @Event onEdit: (d: FbTaskDetail) => void = (): void => {
  };
  /** 有任何变化（状态/看板/子任务/附件/留言）→ 宿主重拉列表 */
  @Event onChanged: () => void = (): void => {
  };
  /** 删掉了 → 宿主关面板 + 重拉 */
  @Event onDeleted: () => void = (): void => {
  };

  @Local detail: FbTaskDetail | null = null;
  @Local loading: boolean = true;
  /** 正在提交（所有动作共用；防连点打重复请求） */
  @Local busy: boolean = false;
  /** 一行提示（成功/失败都写这里，就地显示，不弹 toast） */
  @Local note: string = '';
  @Local kidDraft: string = '';
  @Local cmtDraft: string = '';
  /** 删除按钮点第一次 → 变成「确定删除？」 */
  @Local confirmDel: boolean = false;
  @Local uploading: boolean = false;

  /* ---- #77：就地编辑（截止 / 负责人 / 备注）----
     🔴 用户 2026-11-05：「截止日期需要可以修改」「负责人可以修改，备注也要修改」

     为什么要就地改而不是"点编辑进整页表单"：
       这个面板本来就是"点开就能改"的定位（状态/看板/子任务/留言/附件都能改），
       只有这三项是只读的 —— 用户改个日期要跳到另一个页面，那才叫别扭。

     ⚠️ 每次改完**立刻保存**，不设「保存」按钮：与状态/看板/子任务/留言同一套
        交互（那几处都是点一下就生效）。这里多一颗按钮反而不一致。 */
  @Local duePickOpen: boolean = false;
  @Local attPickOpen: boolean = false;
  /* #77n：标题与备注都是**常驻输入框**（用户：「它应该直接就是输入框」），
     所以不再需要 `titleEdit` / `noteEdit` 这类双态标记，
     只要两个受控值（框里的文字）。
     ⚠️ 必须受控：直接 `TextArea({text: this.titleOf()})` 是非受控的，
        每次 reload() 重建组件会丢掉用户正在打的字。 */
  @Local titleDraft: string = '';
  @Local noteDraft: string = '';
  /* 输入框是否有焦点。用来决定「重新载入后要不要用服务端的值覆盖框里的字」——
     有焦点说明用户正在打字，这时覆盖会把刚打的字冲掉。 */
  @Local titleFocus: boolean = false;
  @Local noteFocus: boolean = false;
  /* 点「保存」时的忙碌态（标题 + 备注两次请求要串行，不能并发） */
  @Local saving: boolean = false;
  @Local inlineBusy: boolean = false;

  /* #77c：附件预览浮层 —— 存当前要全屏看的那张图的地址，空 = 没开 */
  @Local previewSrc: string = '';
  @Local previewName: string = '';

  /* #77g：留言待发附件（URI + 显示名）。
     ⚠️ 只存**一个**：服务端评论附件接口一次收一个 `file`。
        要支持多个得改 API 成数组，用户没提，先按单个做（够用且简单）。 */
  @Local cmtAttachUri: string = '';
  @Local cmtAttachNames: string[] = [];
  @Local cmtBusy: boolean = false;
  // 共享（工单 #26）
  @Local roster: FbRosterPerson[] = [];
  @Local pickingShare: boolean = false;
  @Local shareBusy: boolean = false;

  aboutToAppear(): void {
    this.reload();
  }

  @Monitor('refreshTick')
  onTick(): void {
    this.reload();
  }

  /* ---------------- 数据 ---------------- */

  private token(): string {
    return FB_TOKEN_STORE.get();
  }

  private async reload(): Promise<void> {
    if (this.taskId <= 0) {
      this.loading = false;
      return;
    }
    const res: FbApiResult = await getTask(this.token(), this.taskId);
    this.loading = false;
    if (!res.ok) {
      this.note = res.error !== '' ? res.error : '这条任务没载入，先看基本信息。';
      return;
    }
    const d: FbTaskDetail | null = parseTaskDetail(res.data);
    if (d !== null) {
      this.detail = d;
    }
    /* #77n：标题/备注是常驻输入框，值要跟着服务端走。
       ⚠️ 但**有焦点时不能覆盖**：@Monitor('refreshTick') 会在外部刷新时
          调 reload()，用户正打字时被覆盖就是"打着打着字没了"。
          失焦时会再同步一次（onBlur -> save -> reload）。
       ⚠️ 比较用 trim：服务端存的可能带首尾空格，
          直接赋值会让框里的文字"莫名多一个空格"。 */
    const tt: FbTaskItem | null = this.cur();
    if (tt !== null) {
      if (!this.titleFocus && this.titleDraft !== tt.title) {
        this.titleDraft = tt.title;
      }
      if (!this.noteFocus && this.noteDraft !== tt.note) {
        this.noteDraft = tt.note;
      }
    }
  }

  /** 当前要显示的任务（详情优先，退回列表那一份） */
  private cur(): FbTaskItem | null {
    const d: FbTaskDetail | null = this.detail;
    if (d !== null) {
      return d.base;
    }
    return this.seed;
  }

  private titleOf(): string {
    const t: FbTaskItem | null = this.cur();
    return t !== null && t.title !== '' ? t.title : '未命名任务';
  }

  private statusOf(): string {
    const t: FbTaskItem | null = this.cur();
    return t !== null && t.status !== '' ? t.status : 'todo';
  }

  private boardIdOf(): number {
    const t: FbTaskItem | null = this.cur();
    return t !== null ? t.boardId : 0;
  }

  private boardOf(): string {
    const t: FbTaskItem | null = this.cur();
    if (t === null) {
      return '';
    }
    /* 🔴 v79b：原来只 `return t.board`。`?view=boards` 之外的老接口/某些行
       `board` 是空串 ⇒ 面板上就**完全不显示这条属于哪个看板**，
       用户没法判断"挪看板"到底挪成了没有（真机验收时就是这么发现 `boardOf()`
       定义了却没被任何地方用）。这里补两层兜底：空名 → 按 id 反查 → 默认看板。 */
    if (t.board !== '') {
      return t.board;
    }
    for (const b of this.boards) {
      if (b.id === t.boardId) {
        return b.name;
      }
    }
    return t.boardId === 0 ? '默认看板' : '';
  }

  private boardColorOf(): string {
    const t: FbTaskItem | null = this.cur();
    return t !== null && t.boardColor !== '' ? t.boardColor : '#9AA0A6';
  }

  private dueOf(): string {
    const t: FbTaskItem | null = this.cur();
    return t !== null ? t.dueText : '';
  }

  private overdueOf(): boolean {
    const t: FbTaskItem | null = this.cur();
    return t !== null && t.overdue && this.statusOf() !== 'done';
  }

  private assigneeOf(): string {
    const t: FbTaskItem | null = this.cur();
    return t !== null ? t.assignee : '';
  }

  private noteOf(): string {
    const t: FbTaskItem | null = this.cur();
    return t !== null ? t.note : '';
  }

  private kids(): FbTaskKid[] {
    const d: FbTaskDetail | null = this.detail;
    return d !== null ? d.kids : [];
  }

  private kidDoneCount(): number {
    let k: number = 0;
    for (const one of this.kids()) {
      if (one.status === 'done') {
        k = k + 1;
      }
    }
    return k;
  }

  private comments(): FbTaskComment[] {
    const d: FbTaskDetail | null = this.detail;
    return d !== null ? d.comments : [];
  }

  private attachs(): FbTaskAttach[] {
    const d: FbTaskDetail | null = this.detail;
    return d !== null ? d.attachs : [];
  }

  /** 共享给谁（工单 #26） */
  private shares(): FbTaskShare[] {
    const d: FbTaskDetail | null = this.detail;
    return d !== null ? d.shares : [];
  }

  private async openSharePicker(): Promise<void> {
    if (this.roster.length === 0) {
      try {
        this.roster = await FbPersonRepo.inst().list();
      } catch (e) {
        this.roster = [];
      }
    }
    this.pickingShare = true;
  }

  private async addShares(ids: number[]): Promise<void> {
    this.pickingShare = false;
    if (ids.length === 0) {
      return;
    }
    this.shareBusy = true;
    let bad: string = '';
    for (const pid of ids) {
      const res: FbApiResult = await shareTask(this.token(), this.taskId, pid, 'write');
      if (!res.ok && bad === '') {
        bad = res.error;
      }
    }
    this.shareBusy = false;
    this.note = bad !== '' ? bad : '';
    await this.reload();
  }

  private async dropShare(personId: number): Promise<void> {
    this.shareBusy = true;
    const res: FbApiResult = await unshareTask(this.token(), this.taskId, personId);
    this.shareBusy = false;
    if (!res.ok) {
      this.note = res.error !== '' ? res.error : '没取消成。';
      return;
    }
    await this.reload();
  }

  /**
   * 就地保存单个字段（#77）。
   *
   * 🔴 只传**要改的那一个**字段 —— 服务端 PATCH 的每个字段都是
   *    `Api::str('x', 原值)` 这种"没传就用原值"的写法
   *    （见 `app/ApiHandler.php` 的 `tasks` PATCH 分支），
   *    所以不必把整条任务都带上。
   *
   * ⚠️ 这与我一开始的担心相反：端上 `updateTask()` **会**把 title/note/due_at/
   *    board_id/category_id/repeat 全部塞进 body ⇒ 只改截止时间时，
   *    其余几个字段会被原值覆盖一遍（虽然值相同、无害，但会平白触发一次
   *    `updated_at`，而且 repeat 传错就会真丢数据）。
   *    ⇒ 这里直接用 `fbApi` 发 PATCH，只带一个字段，不走 `updateTask()`。
   */
  private async saveField(name: string, value: string, numValue: number): Promise<boolean> {
    if (this.inlineBusy) {
      return false;
    }
    this.inlineBusy = true;
    this.note = '';
    const body: Record<string, Object> = {};
    if (numValue >= 0) {
      body[name] = numValue;
    } else {
      body[name] = value;
    }
    const opts: FbApiOptions = { method: 'PATCH', token: this.token(), body: body };
    const res: FbApiResult = await fbApi('/api/v1/tasks/' + this.taskId.toString(), opts);
    this.inlineBusy = false;
    if (!res.ok) {
      this.note = res.error !== '' ? res.error : '没保存成。';
      return false;
    }
    await this.reload();
    this.onChanged();
    return true;
  }

  /** 改截止时间（弹日期选择器） */
  private openDuePicker(): void {
    if (this.inlineBusy) {
      return;
    }
    this.duePickOpen = true;
  }

  /** 改负责人（弹选人） */
  private async openAssigneePicker(): Promise<void> {
    if (this.inlineBusy) {
      return;
    }
    if (this.roster.length === 0) {
      try {
        this.roster = await FbPersonRepo.inst().list();
      } catch (e) {
        this.roster = [];
      }
    }
    this.attPickOpen = true;
  }

  /**
   * 保存任务标题。
   *
   * 🔴 #77n：标题改成**常驻输入框**后不再有 `titleEdit` 这个双态标记，
   *    所以只靠"值变了没有"判断要不要发请求。
   * ⚠️ 空值必须**回填原值**：服务端会把空标题清洗成空串，
   *    那等于把标题删了 —— 用户只是清空重打，不该丢标题。
   */
  /**
   * 底部「保存」：把两个**手动编辑**的输入框（标题 / 备注）落库，然后关窗。
   *
   * 🔴 #77q（用户 2026-11-05）：「和网页版一样，没有保存按钮啊，
   *    这应该怎么保存呢？在哪个地方点保存呢？」
   *
   * 之前的设计是"失焦自动保存"，但**用户看不见这件事** —— 没有按钮就没底，
   * 不知道到底存没存。所以补一颗显式的保存按钮。
   *
   * ⚠️ 其它字段（状态/看板/截止/负责人/分类/协作人/子任务/附件/留言）
   *    **仍然是点一下就生效**，不用按保存 —— 那类操作是"动作"，
   *    做完就该立刻生效；只有"打字"类才需要一次确认。
   * ⚠️ 串行两次请求而不是并发：`saveField()` 内部会 `reload()`，
   *    并发会让两次 reload 互相覆盖 detail，出现"改完标题备注没了"。
   */
  private async saveAll(): Promise<void> {
    if (this.saving) {
      return;
    }
    this.saving = true;
    await this.saveTitle();
    await this.saveNote();
    this.saving = false;
    this.onChanged();
    this.onClose();
  }

  private async saveTitle(): Promise<void> {
    const v: string = this.titleDraft.trim();
    if (v === '') {
      this.titleDraft = this.titleOf();   // 回填，不提交
      return;
    }
    if (v === this.titleOf()) {
      return;                             // 没变，不发请求
    }
    const ok: boolean = await this.saveField('title', v, -1);
    if (!ok) {
      /* 保存失败也要把框里改回数据库的真实值，否则框里显示的和库里的不一致 */
      this.titleDraft = this.titleOf();
    }
  }

  /**
   * 保存备注。
   * 🔴 #77n：备注也改成常驻输入框，不再有 `noteEdit`。
   * ⚠️ 备注**允许清空**（与标题不同）：删掉备注是正常操作，
   *    所以这里不像 saveTitle 那样回填。
   */
  private async saveNote(): Promise<void> {
    const v: string = this.noteDraft.trim();
    if (v === this.noteOf()) {
      return;   // 没变，不发请求
    }
    const ok: boolean = await this.saveField('note', v, -1);
    if (!ok) {
      this.noteDraft = this.noteOf();   // 失败回滚显示
    }
  }

  /**
   * 点附件（#77c）。
   *
   * 🔴 用户 2026-11-05：「附件那个地方如果是Word文档，好像还是不能预览。
   *    按道理说，应该打开本机上默认能够打开这个文件的应用，让它把文件打开才对。」
   *
   * 分两种情况：
   *   · **图片** → 就地全屏预览（不跳出 App，看附件不用切来切去）
   *   · **其它**（Word / PDF / Excel…）→ `fbAttachOpen()`：
   *       先下载一份明文到 cacheDir，再用**隐式 Want + action.viewData**
   *       交给系统「打开方式」—— 系统自己找能打开 .docx 的应用。
   *
   * ⚠️ 不能用「显式 Want + 包名」：我们不知道用户装的是 WPS 还是 Office，
   *    也不知道包名。让系统按 MIME/扩展名匹配才是唯一可靠的做法。
   * ⚠️ `fbAttachOpen()` 已经处理好"下不下来 / 没有可用应用"的提示文案，
   *    这里只把它的返回串显示出来，不自己再编一套。
   */
  private async tapAttach(a: FbTaskAttach): Promise<void> {
    if (a.isImage) {
      /* 图片：全屏预览。用 `fbImageSrc`（本地缓存优先，没有就远端 URL） */
      this.previewSrc = fbImageSrc(a.key, this.token());
      this.previewName = a.name;
      return;
    }
    /* 非图片：交给系统打开 */
    const ctx: common.Context | undefined =
      this.getUIContext().getHostContext() as common.Context | undefined;
    if (ctx === undefined) {
      this.note = '打不开：拿不到上下文，请重启应用再试。';
      return;
    }
    this.note = '正在下载…';
    const err: string = await fbAttachOpen(this.token(), a.key, false, ctx);
    /* `fbAttachOpen` 成功时返回 ''（已交给系统），失败时返回人话 */
    this.note = err !== '' ? err : '';
  }

  private categoryOf(): string {
    const d: FbTaskDetail | null = this.detail;
    return d !== null ? d.category : '';
  }

  private repeatOf(): string {
    const d: FbTaskDetail | null = this.detail;
    if (d === null || d.repeat === '') {
      return '';
    }
    if (d.repeat === 'day') {
      return '每天';
    }
    if (d.repeat === 'week') {
      return '每周';
    }
    if (d.repeat === 'month') {
      return '每月';
    }
    if (d.repeat === 'year') {
      return '每年';
    }
    return d.repeat;
  }

  private parentOf(): string {
    const d: FbTaskDetail | null = this.detail;
    return d !== null ? d.parentTitle : '';
  }

  private isDone(): boolean {
    return this.statusOf() === 'done';
  }

  /** 主题色的半透明版（**八位色 `#AARRGGBB`，alpha 在前** —— 别写成 CSS 那种） */
  private accentAlpha(aa: string): string {
    const c: string = this.accent.replace('#', '');
    const rgb: string = c.length >= 8 ? c.substring(2) : c;
    return '#' + aa + rgb;
  }

  private statusWord(w: string): string {
    if (w === 'done') {
      return '已完成';
    }
    return w === 'doing' ? '进行中' : '待做';
  }

  /**
   * 状态的颜色。
   *
   * ⚠️ 完成用**绿**、进行中用**赭红**、待办用**灰** —— 与任务页/网页同一套语义，
   *    不跟模块主题色走（状态是事实，不是"我在哪个模块"）。
   */
  private statusTint(w: string): string {
    if (w === 'done') {
      return '#3F7D5A';
    }
    return w === 'doing' ? '#A8574F' : '#7C8AA0';
  }

  private statusWash(w: string): string {
    if (w === 'done') {
      return '#EAF3EE';
    }
    return w === 'doing' ? '#FBEFEE' : '#F1F3F5';
  }

  /* ---------------- 动作 ---------------- */

  /** 改状态（三段 / 标题左边那颗圈都走这里） */
  private async setStatus(next: string): Promise<void> {
    if (this.busy || next === this.statusOf()) {
      return;
    }
    this.busy = true;
    this.note = '';
    const res: FbApiResult = await setTaskStatus(this.token(), this.taskId, next);
    this.busy = false;
    if (!res.ok) {
      this.note = res.error !== '' ? res.error : '状态没改过来，请再试一次。';
      return;
    }
    this.note = '已标记为' + this.statusWord(next) + '。';
    await this.reload();
    this.onChanged();
  }

  /** 挪到另一个看板 */
  private async moveTo(boardId: number): Promise<void> {
    if (this.busy || boardId === this.boardIdOf()) {
      return;
    }
    this.busy = true;
    this.note = '';
    const res: FbApiResult = await moveTask(this.token(), this.taskId, boardId);
    this.busy = false;
    if (!res.ok) {
      this.note = res.error !== '' ? res.error : '没挪过去，请再试一次。';
      return;
    }
    this.note = '已挪到「' + this.boardNameOf(boardId) + '」。';
    await this.reload();
    this.onChanged();
  }

  private boardNameOf(boardId: number): string {
    for (const b of this.boards) {
      if (b.id === boardId) {
        return b.name;
      }
    }
    return boardId === 0 ? '默认看板' : '该看板';
  }

  /** 勾/取消勾一条子任务 */
  private async toggleKid(k: FbTaskKid): Promise<void> {
    if (this.busy) {
      return;
    }
    this.busy = true;
    this.note = '';
    const next: string = k.status === 'done' ? 'todo' : 'done';
    const res: FbApiResult = await setTaskStatus(this.token(), k.id, next);
    this.busy = false;
    if (!res.ok) {
      this.note = res.error !== '' ? res.error : '这条子任务没改成。';
      return;
    }
    await this.reload();
    this.onChanged();
  }

  /** 加一条子任务（挂在当前任务下） */
  private async addKid(): Promise<void> {
    const title: string = this.kidDraft.trim();
    if (this.busy || title === '') {
      return;
    }
    this.busy = true;
    this.note = '';
    const d: FbTaskDraft = {
      title: title,
      note: '',
      dueAt: '',
      /* 子任务默认跟父任务在同一个看板：用户此刻想的是"这件事拆成几步"，
         不是"另开一摊"。 */
      boardId: this.boardIdOf(),
      status: 'todo',
      parentId: this.taskId,
      assigneeId: 0,
      categoryId: 0,
      repeat: '',
    };
    const res: FbApiResult = await createTask(this.token(), d);
    this.busy = false;
    if (!res.ok) {
      this.note = res.error !== '' ? res.error : '子任务没加上。';
      return;
    }
    this.kidDraft = '';
    this.note = '子任务已加上。';
    await this.reload();
    this.onChanged();
  }

  /** 选一个附件挂到待发留言上（#77g）——**不立刻上传**，随留言一起发 */
  private async pickCmtAttach(): Promise<void> {
    if (this.cmtBusy) {
      return;
    }
    try {
      const opts: picker.DocumentSelectOptions = new picker.DocumentSelectOptions();
      opts.maxSelectNumber = 1;
      const p: picker.DocumentViewPicker = new picker.DocumentViewPicker();
      const uris: string[] = await p.select(opts);
      if (uris.length === 0) {
        return;
      }
      const u: string = uris[0];
      const slash: number = u.lastIndexOf('/');
      const nm: string = slash >= 0 && slash < u.length - 1 ? u.substring(slash + 1) : '附件';
      this.cmtAttachUri = u;
      /* ⚠️ 用**新数组**赋值：`@Local` 只代理第一层，
         push 到原数组不会触发刷新（本项目踩过多次）。 */
      this.cmtAttachNames = [nm];
      this.note = '';
    } catch (e) {
      const be: BusinessError = e as BusinessError;
      hilog.warn(0x0000, 'FamilyBook', '选留言附件失败：%{public}s', JSON.stringify(be));
      this.note = '选文件失败，请再试一次。';
    }
  }

  /** 去掉待发附件 */
  private dropCmtAttach(idx: number): void {
    this.cmtAttachUri = '';
    this.cmtAttachNames = [];
  }

  /** 发一条留言 */
  /**
   * 发一条留言（#77g：支持带附件）。
   *
   * 🔴 用户 2026-11-05：「留言是可以需要添加附件的。」
   *
   * 两条路径：
   *   · 没附件 → 原来的 `addTaskComment()`（JSON，轻）
   *   · 有附件 → `addTaskCommentWithFile()`（multipart：content + file）
   *
   * ⚠️ **允许只发附件不写字**：拍张照片直接发是常见用法
   *    （服务端也认，会自动补占位文案「（附件）」）。
   *    所以判空从"文字为空就 return"改成"文字和附件都为空才 return"。
   * ⚠️ 发成功后要清掉待发附件，否则下一条留言会重复带上这张图。
   */
  private async sendComment(): Promise<void> {
    const txt: string = this.cmtDraft.trim();
    const hasFile: boolean = this.cmtAttachUri !== '';
    if (this.busy || this.cmtBusy) {
      return;
    }
    if (txt === '' && !hasFile) {
      return;
    }
    this.busy = true;
    this.cmtBusy = true;
    this.note = '';

    if (hasFile) {
      const err: string = await addTaskCommentWithFile(
        this.token(), this.taskId, txt, this.cmtAttachUri);
      this.busy = false;
      this.cmtBusy = false;
      if (err !== '') {
        this.note = err;
        return;   // 附件留着，让用户能重试
      }
    } else {
      const res: FbApiResult = await addTaskComment(this.token(), this.taskId, txt);
      this.busy = false;
      this.cmtBusy = false;
      if (!res.ok) {
        this.note = res.error !== '' ? res.error : '留言没发出去。';
        return;
      }
    }

    this.cmtDraft = '';
    this.cmtAttachUri = '';
    this.cmtAttachNames = [];
    await this.reload();
    this.onChanged();
  }

  /** 选一张图当附件（选完**立刻上传** —— 任务已经存在，不用再点保存） */
  /**
   * 选一个附件上传（#77）。
   *
   * 🔴 用户 2026-11-05：「加图片这个地方改成"添加附件"。」
   *
   * ⚠️ **只改文案是不够的**：原来用的是 `PhotoViewPicker` + `IMAGE_TYPE`，
   *    只能选相册里的图片。按钮一旦叫「添加附件」，用户会去选 PDF / Word，
   *    而那些文件根本不出现在选择器里 —— 他会以为"功能坏了"。
   *
   * ⇒ 改成 `DocumentViewPicker`（系统文件选择器），能选任意文件。
   *    图片仍然可以选（文件选择器里也能进相册目录），
   *    而且 `uploadTaskAttach()` 是通用的（按扩展名判 kind），
   *    上传后 `FbTaskAttach.isImage` 会自动区分图片与非图片。
   *
   * ⚠️ 选不出文件时（用户取消）`documentSelectResult` 是空数组，直接 return。
   * ⚠️ `DocumentSelectOptions.maxSelectNumber = 1`：与原来一致（一次一个）。
   *    支持多选要改上传循环，用户没要求，不做。
   */
  private async pickAttach(): Promise<void> {
    if (this.uploading) {
      return;
    }
    try {
      const opts: picker.DocumentSelectOptions = new picker.DocumentSelectOptions();
      opts.maxSelectNumber = 1;
      const p: picker.DocumentViewPicker = new picker.DocumentViewPicker();
      const uris: string[] = await p.select(opts);
      if (uris.length === 0) {
        return;
      }
      this.uploading = true;
      this.note = '';
      const err: string = await uploadTaskAttach(this.token(), this.taskId, uris[0]);
      this.uploading = false;
      if (err !== '') {
        this.note = err;
        return;
      }
      this.note = '附件已上传。';
      await this.reload();
      this.onChanged();
    } catch (e) {
      const be: BusinessError = e as BusinessError;
      hilog.warn(0x0000, 'FamilyBook', '选附件失败：%{public}s', JSON.stringify(be));
      this.uploading = false;
      this.note = '选图失败，请再试一次。';
    }
  }

  /** 删一个附件 */
  private async dropAttach(a: FbTaskAttach): Promise<void> {
    if (this.busy) {
      return;
    }
    this.busy = true;
    this.note = '';
    const res: FbApiResult = await delTaskAttach(this.token(), this.taskId, a.id);
    this.busy = false;
    if (!res.ok) {
      this.note = res.error !== '' ? res.error : '附件没删掉。';
      return;
    }
    this.note = '附件已删除。';
    await this.reload();
    this.onChanged();
  }

  /** 删任务（点两次才删） */
  private async dropTask(): Promise<void> {
    if (this.busy) {
      return;
    }
    if (!this.confirmDel) {
      this.confirmDel = true;
      this.note = '再点一次「确定删掉」就删除了，删了不能恢复。';
      return;
    }
    this.busy = true;
    const res: FbApiResult = await deleteTask(this.token(), this.taskId);
    this.busy = false;
    if (!res.ok) {
      this.note = res.error !== '' ? res.error : '没删掉，请再试一次。';
      return;
    }
    this.onDeleted();
  }

  /* ---------------- UI ---------------- */

  build() {
    /* 🔴 根必须 Stack：全屏遮罩与卡片要**叠**（见文件头第 ③ 条） */
    Stack({ alignContent: Alignment.Center }) {
      Column()
        .width('100%')
        .height('100%')
        .backgroundColor(FB_MASK)
        .onClick((): void => {
          this.onClose();
        })

      /* 包裹层只为了挂宽度：环组件自身不能接属性方法（见 FbTaskDetailSheet 注释） */
      Column() {
        FbSheetRing({ radius: FbMetric.radius, ringColor: this.accent }) {
          Column({ space: 0 }) {
            this.headBar()

            Divider()
              .color(FbColors.line)
              .margin({ top: 10, bottom: 2 })

            Scroll() {
              Column({ space: 0 }) {
                /* #77m：任务标题放在所有内容之前（用户：「也就是状态之前」） */
                this.titleRow()
                this.statusSeg()
                this.boardChips()
                this.infoRows()
                this.shareSection()
                this.kidSection()
                this.attachSection()
                this.commentSection()
                if (this.note !== '') {
                  Text(this.note)
                    .fontSize(FbMetric.fontTiny)
                    .fontColor(this.note.indexOf('没') >= 0 || this.note.indexOf('不能') >= 0
                      ? '#C0533F' : FbColors.muted)
                    .width('100%')
                    .padding({ top: 10 })
                }
                /* 🔴 #77g（用户 2026-11-05）：「留言输入框下面还有东西，
                   现在被挡住了，根本看不见，也滚不动了。」
                   —— 被挡住的是 `commentSection()` 末尾那行「回车发送」小字。

                   根因：`commentSection` 是 `Scroll` 里的**最后一个**子元素，
                   而这里原来只留了 `height(6)`。
                   `Scroll` 又是 `flexShrink(1)`（内容不够高时按内容收缩），
                   最后一行的下边距一旦小于"卡片 padding + footBar 高度"，
                   就会被判定为"已到底"，滚不过去也看不见。
                   ⇒ 底部留一块**足够高**的空白（不是 6vp 意思一下），
                     保证最后一行能滚到可视区中间。 */
                /* #77s：删除放在**所有内容之后** —— 要滚到底才看得到，
                   误触概率基本为零（理由见 dangerZone 的注释）。 */
                this.dangerZone()

                Row().height(28)
              }
              .width('100%')
              .alignItems(HorizontalAlign.Start)
            }
            /* 🔴🔴 #77r（用户 2026-11-05）：「怎么没有看到任何按钮啊？」

               **真根因**：这里是 `flexShrink(1)`，不是 `layoutWeight(1)`。
               `flexShrink` 只是"空间不够时允许收缩"，但 Scroll 的**内容高度**
               仍然会把自身撑开（ArkUI 里 Scroll 竖向内容默认按内容高）。
               于是：
                 头部 + Scroll(按内容撑满) 就把 `maxHeight: 86%` 吃光了
                 → 下面的 `footBar()`（保存/删除）被推到 86% 之外
                 → `FbSheetRing` 的 `clip(true)` 把它裁掉 ⇒ 一个按钮都看不见。

               `layoutWeight(1)` 是"**占据剩余空间**"：Scroll 的高度被限定成
               "86% − 头部 − 分割线 − footBar"，footBar 因此必然留在可视区内，
               内容再长也只是在 Scroll 内部滚动。

               ⚠️ 旧注释说 `layoutWeight(1)` 会让"短内容也把卡片顶满"（v60b）。
                  那个副作用是真的，但它是**观感问题**；
                  而按钮看不见是**功能问题** —— 两害相权，先保证按钮可用。
                  要消掉空白的话，正确做法是给外层 Column 用
                  `.constraintSize({ maxHeight: '86%' })` 配合 **`minHeight: 0`**，
                  而不是回到 flexShrink。 */
            .layoutWeight(1)
            .width('100%')
            .scrollBar(BarState.Off)
            .align(Alignment.TopStart)
            .nestedScroll({
              scrollForward: NestedScrollMode.PARENT_FIRST,
              scrollBackward: NestedScrollMode.SELF_FIRST
            })

            this.footBar()
          }
          .width('100%')
          .constraintSize({ maxHeight: '86%' })
          .padding({ left: 16, right: 16, top: 16, bottom: 16 + FB_PANEL_BOTTOM_GAP })
          .alignItems(HorizontalAlign.Start)
        }
      }
      .width('94%')

      /* 选人浮层：协作人（工单 #26；#77 标题由「共享给谁」改「协作人」） */
      if (this.pickingShare) {
        FbPersonPickSheet({
          people: this.roster,
          selected: [],
          title: '协作人',
          accent: this.accent,
          onConfirm: (ids: number[]): void => {
            this.addShares(ids);
          },
          onClose: (): void => {
            this.pickingShare = false;
          }
        })
      }

      /* 🔴 #77（用户 2026-11-05）：「截止日期需要可以修改」「负责人可以修改」
         ⇒ 复用 `FbTaskEditSheet` 已经在用的两个浮层，交互与那边一致
            （同一个"改日期"不该在详情面板和编辑表单里长得不一样）。
         ⚠️ 放在**面板之后**：两个浮层都靠"后声明的在上层"叠放，
            放前面会被面板的遮罩盖住。 */

      /* 截止时间浮层 */
      if (this.duePickOpen) {
        FbDateTimePicker({
          title: '这个任务什么时候到期',
          date: this.dueOf() !== '' ? this.dueOf() : fbIsoOf(new Date()),
          time: this.dueTimeOf(),
          accent: this.accent,
          onConfirm: (d: string, t: string): void => {
            this.duePickOpen = false;
            /* 传 `YYYY-MM-DD HH:mm`：服务端 `Api::dt()` 认这个格式
               （与编辑表单 `fbJoinDateTime` 的输出同一口径）。 */
            const v: string = d !== '' ? fbJoinDateTime(d, t) : '';
            this.saveField('due_at', v, -1);
          },
          onCancel: (): void => {
            this.duePickOpen = false;
          }
        })
      }

      /* 🔴 #77f（用户 2026-11-05）：「附件那个地方…按道理说，应该打开本机上
         默认能够打开这个文件的应用」——图片走就地全屏预览（不跳出 App），
         非图片走 `fbAttachOpen()` 交给系统（见 `tapAttach`）。

         ⚠️ 预览层放在**所有浮层最后**：它要盖住面板本身。
         ⚠️ 整块用 `Stack` 铺满 + 半透明黑底，点击任意处关闭。
         ⚠️ `objectFit(ImageFit.Contain)` —— 预览要看全图，
            用 Cover 会裁掉边缘（缩略图用 Cover 是对的，预览不是）。 */
      if (this.previewSrc !== '') {
        Stack({ alignContent: Alignment.Center }) {
          Column()
            .width('100%')
            .height('100%')
            .backgroundColor('#E6000000')
            .onClick((): void => {
              this.previewSrc = '';
              this.previewName = '';
            })

          Image(this.previewSrc)
            .width('100%')
            .constraintSize({ maxHeight: '78%' })
            .objectFit(ImageFit.Contain)

          /* 底部：文件名 + 关闭提示 */
          Column({ space: 4 }) {
            Text(this.previewName !== '' ? this.previewName : '附件')
              .fontSize(FbMetric.fontSmall)
              .fontColor(Color.White)
              .maxLines(2)
              .textOverflow({ overflow: TextOverflow.Ellipsis })
              .textAlign(TextAlign.Center)
            Text('点任意处关闭')
              .fontSize(10)
              .fontColor('#B3FFFFFF')
          }
          .width('100%')
          .padding({ left: 24, right: 24, bottom: 40 })
          .alignItems(HorizontalAlign.Center)
          .position({ x: 0, y: '85%' })
        }
        .width('100%')
        .height('100%')
        .hitTestBehavior(HitTestMode.Block)
        .onClick((): void => {
          this.previewSrc = '';
          this.previewName = '';
        })
      }

      /* 负责人浮层（单选） */
      if (this.attPickOpen) {
        FbPersonPickSheet({
          people: this.roster,
          selected: this.assigneeIdOf() > 0 ? [this.assigneeIdOf()] : [],
          title: '谁负责这件事',
          accent: this.accent,
          onConfirm: (ids: number[]): void => {
            this.attPickOpen = false;
            /* 空数组 = 取消负责人（服务端 `assignee_id: 0`） */
            const who: number = ids.length > 0 ? ids[0] : 0;
            this.saveField('assignee_id', '', who);
          },
          onClose: (): void => {
            this.attPickOpen = false;
          }
        })
      }
    }
    .width('100%')
    .height('100%')
    .hitTestBehavior(HitTestMode.Transparent)
  }

  /**
   * 顶栏：状态徽标 + 关闭。
   *
   * 🔴🔴 #77l（用户 2026-11-05）：
   *   「这个弹出框的标题是编辑任务，台式机采购这样的东西，它是一个标题，
   *     也应该可以被修改才对。所以它应该往下放，就是任务标题；
   *     然后台式机采购计划也往下放，也是可以修改的。
   *     左上角那个标志，好像一个圆圈什么的，那个也不要了，去掉。」
   *
   * 三处变化：
   *   · **删掉左上角的 FbCheckCircle**（就是用户说的"圆圈"）。它是"点一下勾完成"
   *     的快捷入口，但下面「状态」区已经有三个明确的 chip，入口重复；
   *     而且它紧贴标题，看起来像"标题前面的项目符号"，容易误解。
   *   · **删掉这里的大标题**。原来标题画在这里，导致它是只读的 ——
   *     标题本来就该能改，所以下移到「更多信息」区当第一个字段。
   *   · 只留状态徽标 + 关闭按钮，这一条变窄（原来 30+标题+徽标+关闭很挤）。
   *
   * ⚠️ 「属于「父任务」」那行**保留在这里**：它是上下文不是内容，
   *    跟着标题下移反而会离"父任务"这个概念更远。
   */
  @Builder
  headBar() {
    Row({ space: 10 }) {
      Column({ space: 2 }) {
        /* 🔴 #77m（用户 2026-11-05）：「这个框的标题在左上角，是"编辑任务"
           几个字，颜色用主题颜色。你参考一下"编辑行程"的做法。」

           与 `FbTripNodeSheet` 的「编辑行程」完全同一套：
             fontSize(fontBody=15) + Bold + 主题色。
           ⚠️ 这里只写固定的「编辑任务」，**不写任务标题** ——
              标题是内容（可改），已经下移到 titleRow()。 */
        Text('编辑任务')
          .fontSize(FbMetric.fontBody)
          .fontWeight(FontWeight.Bold)
          .fontColor(this.accent)
        if (this.parentOf() !== '') {
          Text('属于「' + this.parentOf() + '」')
            .fontSize(FbMetric.fontTiny)
            .fontColor(FbColors.faint)
            .maxLines(1)
        }
      }
      .alignItems(HorizontalAlign.Start)
      .layoutWeight(1)
      .flexShrink(1)

      /* 🔴 #77o（用户 2026-11-05）：「编辑任务那一行，右上角还有个"进行中"，
         那个也去掉吧，因为在状态那里已经看到"进行中"了。」
         ⇒ 删掉状态徽标。下面「状态」区三个 chip 已经把当前态高亮出来了，
            这里再挂一个只读徽标纯属重复信息。

         ⚠️ 上一版注释说"只留状态徽标 + 关闭"，现在是"只留关闭"。
         ⚠️ `statusWord() / statusTint() / statusWash()` 三个方法**保留** ——
            状态区（statusChip）还在用它们。 */

      FbSheetClose({
        onClose: (): void => {
          this.onClose();
        },
        color: ''
      })
    }
    .width('100%')
    .alignItems(VerticalAlign.Center)
  }

  /** 状态三段（点一下即改，没有"保存"按钮） */
  @Builder
  statusSeg() {
    Column({ space: 6 }) {
      /* #77i：状态也有标题了（原来只有三个 chip，没有区段标题，
         而下面每个区段都有 —— 视觉上它是"飘着的"）。 */
      FbSectionTitle({ title: '状态', accent: this.accent })
      Row({ space: 8 }) {
        this.statusChip('todo')
        this.statusChip('doing')
        this.statusChip('done')
      }
      .width('100%')
    }
    .width('100%')
    .padding({ bottom: 4 })
    .alignItems(HorizontalAlign.Start)
  }

  @Builder
  statusChip(w: string) {
    Text(this.statusWord(w))
      .fontSize(FbMetric.fontSmall)
      .fontColor(this.statusOf() === w ? '#FFFFFF' : this.statusTint(w))
      .textAlign(TextAlign.Center)
      .layoutWeight(1)
      .height(36)
      .backgroundColor(this.statusOf() === w ? this.statusTint(w) : FbColors.inputBg)
      .borderRadius(FbMetric.radiusS)
      .onClick((): void => {
        this.setStatus(w);
      })
  }

  /** 看板 chips（挪分组）
   *
   *  🔴 #77（用户 2026-11-05）：「那个分组看板让它平铺下来。不要左右滑动了。」
   *  🔴 参考旅程模块：`FbTripNodeSheet.dart` 那里 5 项以内用
   *     `Flex({ wrap: FlexWrap.Wrap })` 换行平铺、11 项才横滑，
   *     判据是**项数**（≤6 换行，>6 横滑）。
   *
   *  ⇒ 这里也按项数分档：看板通常 3~6 个（当前家庭 4 个），全部平铺看得见，
   *     不用滑 —— 滑动的坏处是"有第 5 个看板但我不知道"。
   *     只有真的很多（>6）才退回横滑，那时平铺会占掉半屏。
   *
   *  ⚠️ 横滑分支保留、不删：家庭可能自建十几个看板（用户按项目分）。
   *  ⚠️ 平铺用 `Flex(wrap)`，**不能用 `Row`** —— ArkUI 的 `Row` 不换行，
   *     塞不下会横向溢出父容器（v76 真机踩过：最后一个 chip 被裁掉且点不到）。
   *  ⚠️ `Row` 的 `space` 在 `Flex` 里不生效 ⇒ 平铺分支的间距靠 `boardChip`
   *     自己的 `margin`，所以下面 chip 补了 `.margin({ right: 8, bottom: 8 })`。
   */
  @Builder
  boardChips() {
    Column({ space: 6 }) {
      /* 🔴 #77i（用户 2026-11-05）：「分组看板那个地方没改…还是不对，标题的颜色不对。」

         上一轮我只把「子任务/附件/留言」三个标题换成了 `FbSectionTitle`，
         **看板、状态、协作人、以及「更多信息」里那几个字段标签全都漏了** ——
         它们还是手写的 `fontTiny + faint`（浅灰小字）。

         规范（`Widgets.ets` / `FbSectionTitle`）：区块标题 = **Bold + 主题色 + 字距 0.6**。
         ⇒ 这一处改成组件。 */
      FbSectionTitle({ title: '分组（看板）', accent: this.accent })
      if (this.boardCountAll() <= 6) {
        /* 平铺：全部一屏可见 */
        Flex({ wrap: FlexWrap.Wrap }) {
          this.boardChip(0, '默认看板', '')
          ForEach(this.boards, (b: FbBoardOpt) => {
            this.boardChip(b.id, b.name, b.color)
          }, (b: FbBoardOpt): string => 'pb_' + b.id.toString())
        }
        .width('100%')
      } else {
        /* 太多才横滑 */
        Scroll() {
          Row({ space: 8 }) {
            this.boardChip(0, '默认看板', '')
            ForEach(this.boards, (b: FbBoardOpt) => {
              this.boardChip(b.id, b.name, b.color)
            }, (b: FbBoardOpt): string => 'pb_' + b.id.toString())
          }
          .padding({ right: 4 })
        }
        .scrollable(ScrollDirection.Horizontal)
        .scrollBar(BarState.Off)
        .width('100%')
      }
    }
    .width('100%')
    .padding({ top: 10 })
    .alignItems(HorizontalAlign.Start)
  }

  /** 看板总数（含「默认看板」这一档）—— 决定平铺还是横滑 */
  private boardCountAll(): number {
    return this.boards.length + 1;
  }

  @Builder
  boardChip(id: number, name: string, color: string) {
    Row({ space: 5 }) {
      Column()
        .width(7)
        .height(7)
        .borderRadius(4)
        .backgroundColor(this.boardIdOf() === id ? '#FFFFFF' : (color !== '' ? color : '#9AA0A6'))
      Text(name)
        .fontSize(FbMetric.fontTiny)
        .fontColor(this.boardIdOf() === id ? '#FFFFFF' : FbColors.muted)
        .maxLines(1)
    }
    .padding({ left: 10, right: 10, top: 7, bottom: 7 })
    .backgroundColor(this.boardIdOf() === id
      ? (color !== '' ? color : this.accent) : FbColors.inputBg)
    .borderRadius(FbMetric.radiusPill)
    /* #77：平铺走 Flex(wrap)，`Row` 的 `space` 在 Flex 里不生效
       ⇒ 间距靠 chip 自己的 margin。横滑分支里这 8px 与 Row 的 space 叠加，
       视觉上仍是 8px（Row space 是 gap，margin 是外边距，两者相加 = 16px
       —— 所以横滑分支要把它抵消掉，见下面的负 margin 说明）。
       ⚠️ 实测取舍：宁可横滑分支稍宽一点，也不要平铺时挤成一坨。
          横滑分支的出现条件是 >6 个看板，那种场景下宽一点不影响识别。 */
    .margin({ right: 8, bottom: 8 })
    .onClick((): void => {
      this.moveTo(id);
    })
  }

  /**
   * 信息区：截止 / 负责人 / 分类 / 循环 / 备注。
   *
   * 🔴 #77（用户 2026-11-05）：
   *    「截止日期需要可以修改」
   *    「截止日期下面还有一个看板，这个没必要，直接删除」
   *    「负责人可以修改，备注也要修改」
   *    「负责人那个地方需要有图标，就是人的头像」
   *
   * ⇒ 截止 / 负责人 / 备注 三项从只读 `Text` 改成可点/可编辑；
   *    看板那一行删掉（上面 chips 已经高亮表达了）；
   *    负责人前面加头像。
   * ⚠️ 其余（分类 / 循环）**保持不变** —— 用户没提，不动。
   */
  /**
   * 任务标题 —— **一直就是输入框**，不是"点了才变输入框"。
   *
   * 🔴🔴 #77n（用户 2026-11-05）：
   *   「这个输入框本来就应该是输入框，怎么现在点了一下才变成输入框呢？
   *     它应该直接就是输入框，只是把文字放到输入框里面就行了。
   *     这样的话，点一下键盘就弹出来了，包括下面的备注也是一样。」
   *   「任务标题里面，"台式机采购计划"这样的字样还是改成黑色吧。
   *     任务标题这四个字用主题色，但是输入框里面的文字用黑色。」
   *
   * 所以：
   *   · 不设 `titleEdit` 双态，直接把输入框常驻；文字从 `titleOf()` 灌进去。
   *   · #77p：用**单行 `TextInput`**（不是 TextArea）—— 标题就是一句话，
   *     多行框把面板下半部分全推下去了。
   *   · **标签**（「任务标题」四个字）= 主题色粗体（走 fieldLb）；
   *     **框里的内容** = `FbColors.ink`（墨黑）。上一版我把内容也染成 accent，
   *     变成"整段标题都是红的"，读起来像报错，也不符合"内容用墨色"。
   *   · 点输入框 → 系统自己聚焦 + 弹输入法，不需要我 requestFocus。
   *
   * ⚠️ 不能直接 `TextArea({ text: this.titleOf() })` —— 那样是**非受控**：
   *    每次 `reload()` 后组件重建会丢掉用户正在打的字。
   *    用 `titleDraft` 做受控值，`aboutToAppear` 里灌初值、保存后同步。
   * ⚠️ 失焦时清空则**恢复原值**（不能把标题存成空串：服务端会把标题清零）。
   */
  @Builder
  titleRow() {
    Column({ space: 6 }) {
      this.fieldLb('任务标题')
      /* 🔴🔴 #77p（用户 2026-11-05）：「现在这个任务标题是好几行的那种输入框，
         不要用这种输入框，用一行的输入框就行了。标题没有那么长，现在太高了。」

         ⇒ `TextArea`（多行，84 高）换成 **`TextInput`（单行，40 高）**，
           高度与「截止」「负责人」那些控件行对齐（它们是 height 40）。
         标题是一句话，本来就不需要多行；多行框还占掉两倍高度，
         把下面所有内容都往下推。

         ⚠️ `TextInput` 不支持 `.height(84)` 那种"给多少显示多少" ——
            它只有一行，高度超了也只是上下留白。所以这里直接给 40。
         ⚠️ 单行框**不会换行**，超长文字横向滚动。标题超过一行宽时
            用户能看到正在打的部分，打完失焦后由 maxLines 之外的
            省略处理在别处（列表卡片）表现，这里不需要额外处理。 */
      TextInput({ text: this.titleDraft, placeholder: '要做的事…' })
        .placeholderColor(FbColors.faint)
        .placeholderFont({ size: FbMetric.fontSmall })
        .fontSize(FbMetric.fontSmall)
        /* 内容用墨黑（用户明确要求）—— 只有标签那四个字是主题色 */
        .fontColor(FbColors.ink)
        .backgroundColor(FbColors.inputBg)
        .borderRadius(FbMetric.radiusS)
        .width('100%')
        .height(40)
        .padding({ left: 12, right: 12 })
        .onChange((v: string): void => {
          this.titleDraft = v;
        })
        .onFocus((): void => {
          this.titleFocus = true;
        })
        /* 失焦保存 —— 改完直接点别处是最自然的动作，
           让他再去找"保存"就会以为没存上。 */
        .onBlur((): void => {
          this.titleFocus = false;
          this.saveTitle();
        })
        /* 单行框支持"回车提交"：用户打完直接按回车就走 saveTitle，
           不用先点别处。多行框里回车是换行，所以以前没这一条。 */
        .onSubmit((): void => {
          this.saveTitle();
        })
    }
    .width('100%')
    .alignItems(HorizontalAlign.Start)
    .padding({ top: 10, bottom: 4 })
  }

  @Builder
  infoRows() {
    /* 🔴🔴 #77k（用户 2026-11-05）：「上面的标题和下面的输入框，其实要分成两行。
       比如说，"截止"不是直接后面排一个日期，而是把日期输入框放在"截止"下面；
       "负责人"也是，"备注"也是，全部都是这样的。」

       ⚠️ 每个字段 = 一个 Column：
              ① 标题行（主题色 + Bold，独占一行）
              ② 控件行（浅底圆角框，整行宽）

       ⚠️ 控件行统一给 height(40) + inputBg + radiusS：
          不给高度的话，「设置…」「未指定」这类短文字会把框压扁，
          几行之间的间距就会参差不齐。

       🔴 #77t（用户 2026-11-05）：「截止日期和负责人右侧都有一个编辑用的、
          像小铅笔似的图标。我感觉这个东西不需要了。…就把所有小图标
          全部去掉，也就是右侧那个小铅笔图标全去掉。」

       ⇒ 删掉「截止」「负责人」右侧的 `✎`。
          上一版加它是想提示"这里能点"（本项目踩过"纯文字看着不可点"的坑），
          但代价是：只有这两行有、别的行没有，视觉上不齐；
          而且输入框本身（浅底圆角）已经足够表达"这是个可操作的控件"。
       ⚠️ 如果以后想恢复"可点"提示，**必须所有行一起加**，
          不能只有截止/负责人有 —— 那才是用户不接受的地方。 */
    Column({ space: 14 }) {
      /* ---- 截止 ---- */
      Column({ space: 6 }) {
        this.fieldLb('截止')
        Row({ space: 8 }) {
          Text(this.dueOf() !== '' ? this.dueOf() : '设置截止时间…')
            .fontSize(FbMetric.fontSmall)
            .fontColor(this.dueOf() === '' ? FbColors.faint
              : (this.overdueOf() ? '#C0533F' : FbColors.ink))
            .layoutWeight(1)
          if (this.overdueOf()) {
            Text('已逾期')
              .fontSize(10)
              .fontColor('#C0533F')
              .padding({ left: 6, right: 6, top: 2, bottom: 2 })
              .backgroundColor('#FDECEC')
              .borderRadius(FbMetric.radiusPill)
          }
        }
        .width('100%')
        .height(40)
        .padding({ left: 12, right: 12 })
        .backgroundColor(FbColors.inputBg)
        .borderRadius(FbMetric.radiusS)
        .alignItems(VerticalAlign.Center)
        .onClick((): void => {
          this.openDuePicker();
        })
      }
      .width('100%')
      .alignItems(HorizontalAlign.Start)

      /* ---- 负责人 ---- */
      Column({ space: 6 }) {
        this.fieldLb('负责人')
        Row({ space: 8 }) {
          /* 头像（#77「负责人那个地方也需要有图标，就是人的头像」）
             ⚠️ 端上不一定拿得到头像图（`assigneeAvatar` 可能是空 key）⇒
                有图用图，没图用首字色块兜底（与留言区同一个手法）。 */
          if (this.assigneeAvatarSrc() !== '') {
            Image(this.assigneeAvatarSrc())
              .width(24)
              .height(24)
              .borderRadius(12)
              .objectFit(ImageFit.Cover)
              .backgroundColor(FbColors.line2)
          } else {
            Row() {
              Text(this.assigneeOf() !== '' ? this.assigneeOf().substring(0, 1) : '?')
                .fontSize(11)
                .fontColor(this.accent)
            }
            .width(24)
            .height(24)
            .borderRadius(12)
            .backgroundColor(FbColors.line2)
            .justifyContent(FlexAlign.Center)
          }
          Text(this.assigneeOf() !== '' ? this.assigneeOf() : '未指定')
            .fontSize(FbMetric.fontSmall)
            .fontColor(this.assigneeOf() === '' ? FbColors.faint : FbColors.ink)
            .layoutWeight(1)
        }
        .width('100%')
        .height(40)
        .padding({ left: 12, right: 12 })
        .backgroundColor(FbColors.inputBg)
        .borderRadius(FbMetric.radiusS)
        .alignItems(VerticalAlign.Center)
        .onClick((): void => {
          this.openAssigneePicker();
        })
      }
      .width('100%')
      .alignItems(HorizontalAlign.Start)

      /* ---- 分类 ---- */
      /* 🔴 #83（用户 2026-11-05）：「分类和重复，也就是循环，都需要加上。」
         原来这两个只在**有值**时才画一行只读文字 ——
         用户不仅改不了，连"这里本来有这一项"都看不出来。
         ⇒ 改成与截止/负责人同形态（标签一行 + 控件一行），且始终显示。 */
      Column({ space: 6 }) {
        this.fieldLb('分类')
        if (this.inlineBusy) {
          Text(this.categoryOf() !== '' ? this.categoryOf() : '未分类')
            .fontSize(FbMetric.fontSmall)
            .fontColor(FbColors.faint)
            .width('100%')
            .height(40)
            .padding({ left: 12, right: 12 })
            .backgroundColor(FbColors.inputBg)
            .borderRadius(FbMetric.radiusS)
        } else {
          /* 🔴🔴 #86（用户 2026-11-05）：「鸿蒙端也用类似的方式调，
             效果让它保持一致。」

             网页端照 FeedLite 做成"自绘按钮 + 浮层列表"（原生 <select> 的
             展开列表 CSS 改不动）。端上**没有那个限制** ——
             ArkUI 的 `Select` 本身就是自绘的，选项列表也归框架管，
             所以不用再自己写浮层，把对应的属性都设上就等价了：

               网页端                          ArkUI Select
               ─────────────────────────────────────────────────
               按钮 40 高 / 圆角 / 细边框      height(40) + borderRadius + border
               箭头打开转 180°                 框架内置（有动画）
               悬停 tint-1                     不支持 → 用打开态代替
               选中项底 tint-2                 selectedOptionBgColor
               选中项文字 主题色                selectedOptionFontColor
               选中项右侧对勾                   showDefaultSelectedIcon(true)
               浮层白底 + 细边框 + 圆角         menuBackgroundColor + menuOutline
               浮层与按钮同宽                   optionWidth(FIT_TRIGGER)

             ⚠️ 底色用 `fbMixWhite(accent, 0.91)` 而**不是** `fbAlpha`：
                那个是"原色+透明度"（会透出父容器底色，浮层背景不确定
                就会时深时浅）；这个是与网页端同算法的实色混合。
             ⚠️ 未选值（「未分类」/「不循环」）文字用 muted 次要色，
                与网页端 `.sel-btn.is-placeholder` 一致。 */
          Select(this.catOptions())
            .selected(this.catIndex())
            .value(this.categoryOf() !== '' ? this.categoryOf() : '未分类')
            .font({ size: FbMetric.fontSmall, weight: FontWeight.Medium })
            /* #86：有值用主题色、未选用次要灰（占位不该和真值一样显眼） */
            .fontColor(this.categoryOf() !== '' ? this.accent : FbColors.faint)
            .selectedOptionFont({ size: FbMetric.fontSmall, weight: FontWeight.Medium })
            .selectedOptionFontColor(this.accent)
            .selectedOptionBgColor(fbMixWhite(this.accent, 0.80))
            .optionFont({ size: FbMetric.fontSmall })
            .optionFontColor(FbColors.ink)
            .optionBgColor(Color.White)
            .showDefaultSelectedIcon(true)
            .optionWidth(OptionWidthMode.FIT_TRIGGER)
            .menuBackgroundColor(Color.White)
            .width('100%')
            .height(40)
            .padding({ left: 12, right: 12 })
            .backgroundColor(fbMixWhite(this.accent, 0.91))
            .borderRadius(FbMetric.radiusS)
            .border({ width: 1, color: fbMixWhite(this.accent, 0.62) })
            .onSelect((idx: number): void => {
              /* index 0 = 「未分类」→ category_id 传 0 */
              const cid: number = idx === 0 ? 0
                : (idx - 1 < this.cats.length ? this.cats[idx - 1].id : 0);
              this.saveField('category_id', '', cid);
            })
        }
      }
      .width('100%')
      .alignItems(HorizontalAlign.Start)

      /* ---- 循环 ---- */
      Column({ space: 6 }) {
        this.fieldLb('循环')
        if (this.inlineBusy) {
          Text(this.repeatOf() !== '' ? this.repeatOf() : '不循环')
            .fontSize(FbMetric.fontSmall)
            .fontColor(FbColors.faint)
            .width('100%')
            .height(40)
            .padding({ left: 12, right: 12 })
            .backgroundColor(FbColors.inputBg)
            .borderRadius(FbMetric.radiusS)
        } else {
          /* #86：与分类完全同一套（见上面那段的对照表） */
          Select(this.repeatOptions())
            .selected(this.repeatIndex())
            .value(this.repeatOf() !== '' ? this.repeatWordOf(this.repeatOf()) : '不循环')
            .font({ size: FbMetric.fontSmall, weight: FontWeight.Medium })
            .fontColor(this.repeatOf() !== '' ? this.accent : FbColors.faint)
            .selectedOptionFont({ size: FbMetric.fontSmall, weight: FontWeight.Medium })
            .selectedOptionFontColor(this.accent)
            .selectedOptionBgColor(fbMixWhite(this.accent, 0.80))
            .optionFont({ size: FbMetric.fontSmall })
            .optionFontColor(FbColors.ink)
            .optionBgColor(Color.White)
            .showDefaultSelectedIcon(true)
            .optionWidth(OptionWidthMode.FIT_TRIGGER)
            .menuBackgroundColor(Color.White)
            .width('100%')
            .height(40)
            .padding({ left: 12, right: 12 })
            .backgroundColor(fbMixWhite(this.accent, 0.91))
            .borderRadius(FbMetric.radiusS)
            .border({ width: 1, color: fbMixWhite(this.accent, 0.62) })
            .onSelect((idx: number): void => {
              const rk: string = idx === 0 ? '' : FbTaskPanel.REPEAT_KEYS[idx - 1];
              this.saveField('repeat_rule', rk, -1);
            })
        }
      }
      .width('100%')
      .alignItems(HorizontalAlign.Start)

      /* ---- 备注 ---- */
      /* 🔴 #77n（用户 2026-11-05）：「包括下面的备注也是一样」
         ⇒ 与任务标题同处理：**常驻输入框**，不做"点一下才变输入框"。
         标签（「备注」两字）= 主题色；框里内容 = 墨黑。 */
      Column({ space: 6 }) {
        this.fieldLb('备注')
        TextArea({ text: this.noteDraft, placeholder: '补充说明…' })
          .placeholderColor(FbColors.faint)
          .placeholderFont({ size: FbMetric.fontSmall })
          .fontSize(FbMetric.fontSmall)
          .fontColor(FbColors.ink)
          .backgroundColor(FbColors.inputBg)
          .borderRadius(FbMetric.radiusS)
          .width('100%')
          .height(84)
          .padding({ left: 12, right: 12, top: 10, bottom: 10 })
          .onChange((v: string): void => {
            this.noteDraft = v;
          })
          .onFocus((): void => {
            this.noteFocus = true;
          })
          .onBlur((): void => {
            this.noteFocus = false;
            this.saveNote();
          })
      }
      .width('100%')
      .alignItems(HorizontalAlign.Start)
    }
    .width('100%')
    .alignItems(HorizontalAlign.Start)
    .padding({ top: 4 })
  }

  /* ---------------- 分类 / 循环 的下拉选项 ---------------- */

  /**
   * 循环的可选键（与编辑表单 `FbTaskEditSheet.repeatChip` 同一套）。
   * ⚠️ 顺序必须与 `REPEAT_WORDS` 严格对齐 —— 两边错一位就会"选每天存成每周"。
   */
  private static readonly REPEAT_KEYS: string[] = ['day', 'week', 'month', 'year'];
  private static readonly REPEAT_WORDS: string[] = ['每天', '每周', '每月', '每年'];

  /** 分类下拉的选项文本：第 0 项固定是「未分类」（对应 category_id = 0） */
  private catOptions(): SelectOption[] {
    const out: SelectOption[] = [{ value: '未分类' }];
    for (let i = 0; i < this.cats.length; i++) {
      out.push({ value: this.cats[i].name });
    }
    return out;
  }

  /** 当前选中的下标（0 = 未分类） */
  private catIndex(): number {
    const d: FbTaskDetail | null = this.detail;
    const cid: number = d !== null ? d.categoryId : 0;
    if (cid <= 0) {
      return 0;
    }
    for (let i = 0; i < this.cats.length; i++) {
      if (this.cats[i].id === cid) {
        return i + 1;
      }
    }
    return 0;   // 分类被删了/不在这份清单里 → 显示未分类
  }

  private repeatOptions(): SelectOption[] {
    const out: SelectOption[] = [{ value: '不循环' }];
    for (let i = 0; i < FbTaskPanel.REPEAT_WORDS.length; i++) {
      out.push({ value: FbTaskPanel.REPEAT_WORDS[i] });
    }
    return out;
  }

  private repeatIndex(): number {
    const r: string = this.repeatOf();
    for (let i = 0; i < FbTaskPanel.REPEAT_KEYS.length; i++) {
      if (FbTaskPanel.REPEAT_KEYS[i] === r) {
        return i + 1;
      }
    }
    return 0;
  }

  private repeatWordOf(key: string): string {
    for (let i = 0; i < FbTaskPanel.REPEAT_KEYS.length; i++) {
      if (FbTaskPanel.REPEAT_KEYS[i] === key) {
        return FbTaskPanel.REPEAT_WORDS[i];
      }
    }
    return '不循环';
  }

  /** 截止时间的时分（`HH:mm`），给日期浮层做初值；没有期限就给当前时刻 */
  private dueTimeOf(): string {
    const t: FbTaskItem | null = this.cur();
    if (t !== null && t.dueAt !== '') {
      /* `2026-10-25 18:00` → `18:00` */
      const sp: number = t.dueAt.indexOf(' ');
      if (sp > 0 && t.dueAt.length >= sp + 6) {
        return t.dueAt.substring(sp + 1, sp + 6);
      }
    }
    const d: Date = new Date();
    const hh: string = (d.getHours() < 10 ? '0' : '') + d.getHours().toString();
    const mm: string = (d.getMinutes() < 10 ? '0' : '') + d.getMinutes().toString();
    return hh + ':' + mm;
  }

  /** 负责人 id（0 = 未指派）；给选人浮层做初值 */
  private assigneeIdOf(): number {
    const d: FbTaskDetail | null = this.detail;
    return d !== null ? d.assigneeId : 0;
  }

  /** 负责人头像地址（拿不到就空串，UI 用首字色块兜底） */
  private assigneeAvatarSrc(): string {
    const d: FbTaskDetail | null = this.detail;
    if (d === null) {
      return '';
    }
    /* ⚠️ 头像字段在 `base`（FbTaskItem）上，不在 FbTaskDetail 本身 ——
       类型定义里 Detail 只有 assigneeId / category 这些"详情专有"的字段。 */
    const k: string = d.base.assigneeAvatar;
    return k !== '' ? fbImageSrc(k, this.token()) : '';
  }

  /**
   * 「更多信息」里的一行字段标题（截止 / 负责人 / 备注 / 分类 / 循环）。
   *
   * 🔴 #77j（用户 2026-11-05）：「截止、负责人、备注没改 ——
   *    这几个字的颜色要变主题色粗体。」
   *
   * ⚠️ 这与「编辑表单」的字段标签口径**不同**，是用户明确要求的：
   *    整页编辑表单里 `期限` 那种是 `fontTiny + faint`（浅灰小字），
   *    但这个详情面板里用户希望它们**和区块标题一个观感**
   *    （主题色 + Bold）—— 因为它和「子任务/附件/留言」那些标题同属一个视觉层级，
   *    只有它浅灰会显得"这两块不是一回事"。
   *
   * ⚠️ 不走 `FbSectionTitle` 组件：那个带 `width('100%')` +
   *    `padding({top:12,bottom:8})`，而这里要的是"44vp 宽的行内标签"，
   *    塞进去会把右侧控件顶到下一行。只**取它的三个核心属性**
   *    （Bold / accent / letterSpacing 0.6），宽度与内边距按行内标签给。
   */
  @Builder
  fieldLb(t: string) {
    /* 🔴 #77m（用户 2026-11-05）：「状态、分组、看板、任务标题、截止、负责人、
       备注、协作人、子任务、附件、留言这些字的大小要保持统一。」

       ⇒ 标签字号统一走 `fontSmall`(13)，**与 `FbSectionTitle` 完全一致**
         （那个组件内部就是 `fontSize(FbMetric.fontSmall)`）。
         上一版这里是 fontTiny(11)，于是"截止"比"状态"小一号，看着不成套。

       ⚠️ 宽度不再写 48：标签独占一行（控件在它下面），
          固定宽度会让它只占左边一小段，与下面的整行控件左缘对不齐。 */
    Text(t)
      .fontSize(FbMetric.fontSmall)
      .fontWeight(FontWeight.Bold)
      .fontColor(this.accent)
      .letterSpacing(0.6)
      .width('100%')
      .textAlign(TextAlign.Start)
  }

  @Builder
  kvRow(label: string, value: string) {
    /* #77k：与截止/负责人/备注同形态（标签一行、值一行），
       否则「分类」「循环」还是左右排，夹在中间会显得错位。 */
    Column({ space: 6 }) {
      this.fieldLb(label)
      Text(value)
        .fontSize(FbMetric.fontSmall)
        .fontColor(FbColors.ink)
        .width('100%')
        .padding({ left: 12, right: 12, top: 11, bottom: 11 })
        .backgroundColor(FbColors.inputBg)
        .borderRadius(FbMetric.radiusS)
    }
    .width('100%')
    .alignItems(HorizontalAlign.Start)
  }

  /** 共享给谁（工单 #26）：列表 + 共享入口 + 逐条取消 */
  @Builder
  shareSection() {
    Column({ space: 6 }) {
      /* #77（用户 2026-11-05）：「共享给谁这个地方都和网页端一样，都改成协作人吧。」
         #77i：标题按规范走 `FbSectionTitle`（Bold + 主题色 + 字距）。 */
      FbSectionTitle({
        title: '协作人',
        accent: this.accent,
        extra: this.shares().length > 0 ? this.shares().length.toString() : ''
      })
      Row({ space: 6 }) {
        Blank()
        Text(this.shareBusy ? '处理中…' : '＋ 共享')
          .fontSize(FbMetric.fontTiny)
          .fontColor(this.shareBusy ? FbColors.faint : this.accent)
          .padding({ left: 10, right: 10, top: 6, bottom: 6 })
          .backgroundColor(fbAlpha(this.accent, 0.1))
          .borderRadius(FbMetric.radiusPill)
          .onClick((): void => {
            this.openSharePicker();
          })
      }
      .width('100%')
      .padding({ top: 12 })
      .alignItems(VerticalAlign.Center)

      if (this.shares().length === 0) {
        Text('还没共享给谁；共享后对方能在任务里看到它，权限分「可改 / 只看」')
          .fontSize(FbMetric.fontTiny)
          .fontColor(FbColors.faint)
          .width('100%')
      } else {
        ForEach(this.shares(), (s: FbTaskShare) => {
          Row({ space: 8 }) {
            Text(s.name)
              .fontSize(FbMetric.fontSmall)
              .fontColor(FbColors.ink)
              .layoutWeight(1)
              .maxLines(1)
              .textOverflow({ overflow: TextOverflow.Ellipsis })
            Text(s.perm === 'read' ? '只看' : '可改')
              .fontSize(FbMetric.fontTiny)
              .fontColor(FbColors.faint)
            Text('取消')
              .fontSize(FbMetric.fontTiny)
              .fontColor(FbColors.red)
              .padding({ left: 6, right: 2, top: 2, bottom: 2 })
              .onClick((): void => {
                this.dropShare(s.personId);
              })
          }
          .width('100%')
          .padding({ top: 6, bottom: 6 })
          .alignItems(VerticalAlign.Center)
        }, (s: FbTaskShare): string => 'tsh_' + s.personId.toString())
      }
    }
    .width('100%')
    .alignItems(HorizontalAlign.Start)
  }

  /** 子任务：列表 + 加一条 */
  @Builder
  kidSection() {
    Column({ space: 6 }) {
      /* #77h：`FbSectionTitle` 是 `width('100%')` 的独立组件，
         必须**独占一行**（塞进 Row 会和后面的计数/按钮抢宽度，被压成 0 宽）。
         「已完成 2/5」这种附加信息走它自带的 `extra`。 */
      FbSectionTitle({
        title: '子任务',
        accent: this.accent,
        extra: this.kids().length > 0
          ? this.kidDoneCount().toString() + '/' + this.kids().length.toString()
          : ''
      })

      ForEach(this.kids(), (k: FbTaskKid) => {
        Row({ space: 8 }) {
          Stack({ alignContent: Alignment.Center }) {
            FbCheckCircle({
              dia: 14,
              done: k.status === 'done',
              doing: k.status === 'doing',
              color: this.accent
            })
          }
          .width(28)
          .height(28)
          .onClick((): void => {
            this.toggleKid(k);
          })

          Text(k.title)
            .fontSize(FbMetric.fontSmall)
            .fontColor(k.status === 'done' ? FbColors.faint : FbColors.ink)
            .decoration({
              type: k.status === 'done' ? TextDecorationType.LineThrough : TextDecorationType.None
            })
            .layoutWeight(1)
            .maxLines(2)
        }
        .width('100%')
        .alignItems(VerticalAlign.Center)
      }, (k: FbTaskKid): string => 'pk_' + k.id.toString() + '_' + k.status)

      /* 加一条：输入框 + 「加」 */
      Row({ space: 8 }) {
        TextInput({ text: this.kidDraft, placeholder: '再加一步（回车即可）' })
          .placeholderColor(FbColors.faint)
          .placeholderFont({ size: FbMetric.fontTiny })
          .fontSize(FbMetric.fontSmall)
          .fontColor(FbColors.ink)
          .backgroundColor(FbColors.inputBg)
          .borderRadius(FbMetric.radiusS)
          .height(38)
          .layoutWeight(1)
          .padding({ left: 10, right: 10 })
          .enterKeyType(EnterKeyType.Done)
          .onChange((v: string): void => {
            this.kidDraft = v;
          })
          .onSubmit((): void => {
            this.addKid();
          })

        Text('加')
          .fontSize(FbMetric.fontSmall)
          .fontColor(this.kidDraft.trim() === '' ? FbColors.faint : this.accent)
          .textAlign(TextAlign.Center)
          .width(52)
          .height(38)
          .backgroundColor(fbAlpha(this.accent, 0.1))
          .borderRadius(FbMetric.radiusS)
          .onClick((): void => {
            this.addKid();
          })
      }
      .width('100%')
      .alignItems(VerticalAlign.Center)
    }
    .width('100%')
    .alignItems(HorizontalAlign.Start)
  }

  /** 附件：缩略图/文件行 + 加图片 */
  @Builder
  attachSection() {
    Column({ space: 8 }) {
      /* 🔴 #77h（用户 2026-11-05：「样式还没变，还记得咱们之前规定的样式是怎么做的吗？」）

         规定就在 `Widgets.ets` 的 `FbSectionTitle` 上（它的注释里还留着用户原话）：
           「"今天的日程"，既然是日程，标题颜色就应该用日程的主题色。
             …下面的"近期任务"改法跟上面一样，还有"最近纪念日"也不说了，全都是一样的。」

         ⇒ 区块标题**必须走 `FbSectionTitle`**，不能手写 `Text`：
             它给了 **Bold + letterSpacing(0.6) + accent 色** 三样，
             而手写 Text 我只改了 fontColor，字重和字距都还是老样子
             —— 这就是"样式还没变"的原因。

         ⚠️ `FbSectionTitle` 自带 `padding({top:12,bottom:8})` 且 `width('100%')`，
            所以它必须**独立成行**，不能塞进原来那个 Row 里和按钮并排（会被挤掉宽度）。
            ⇒ 把「标题 + 计数」交给组件，按钮单独另起一行右对齐（见下）。 */
      FbSectionTitle({
        title: '附件',
        accent: this.accent,
        extra: this.attachs().length > 0 ? this.attachs().length.toString() : ''
      })
      Row() {
        Blank()
        /* #77（用户 2026-11-05）：「加图片这个地方改成"添加附件"。」
           ⚠️ 文案改了，**行为也要跟着改** —— 原来 `pickAttach()` 只允许选图片
              （`PhotoViewMIMETypes.IMAGE_TYPE`），改叫"添加附件"却只能选图，
              用户选 PDF 时会发现根本没有那个文件。见 `pickAttach()` 的改动。 */
        Text(this.uploading ? '上传中…' : '＋ 添加附件')
          .fontSize(FbMetric.fontTiny)
          .fontColor(this.uploading ? FbColors.faint : this.accent)
          .padding({ left: 10, right: 10, top: 6, bottom: 6 })
          .backgroundColor(fbAlpha(this.accent, 0.1))
          .borderRadius(FbMetric.radiusPill)
          .onClick((): void => {
            this.pickAttach();
          })
      }
      .width('100%')
      .padding({ top: 12 })
      .alignItems(VerticalAlign.Center)

      if (this.attachs().length > 0) {
        /* `Flex wrap` 而不是 `Row`：数量不定且要换行。
           🔴 `Row` 在 ArkUI 里**不换行**，塞不下就横向溢出父容器（v76 真机事故）。 */
        Flex({ wrap: FlexWrap.Wrap }) {
          ForEach(this.attachs(), (a: FbTaskAttach) => {
            this.attachCell(a)
          }, (a: FbTaskAttach): string => 'pa_' + a.id.toString())
        }
        .width('100%')
      }
    }
    .width('100%')
    .alignItems(HorizontalAlign.Start)
  }

  @Builder
  attachCell(a: FbTaskAttach) {
    Stack({ alignContent: Alignment.TopEnd }) {
      if (a.isImage) {
        Image(fbImageSrc(a.key, this.token()))
          .width(64)
          .height(64)
          .borderRadius(FbMetric.radiusS)
          .objectFit(ImageFit.Cover)
          .backgroundColor(FbColors.inputBg)
      } else {
        Column({ space: 2 }) {
          Text(a.kind.toUpperCase())
            .fontSize(FbMetric.fontTiny)
            .fontColor(this.accent)
          Text(a.name)
            .fontSize(9)
            .fontColor(FbColors.faint)
            .maxLines(1)
            .textOverflow({ overflow: TextOverflow.Ellipsis })
            .width('100%')
            .textAlign(TextAlign.Center)
        }
        .width(64)
        .height(64)
        .justifyContent(FlexAlign.Center)
        .padding(4)
        .backgroundColor(FbColors.inputBg)
        .borderRadius(FbMetric.radiusS)
      }

      /* 删除角标：热区做大一点（手指点得中），视觉上仍是小圆 */
      Stack({ alignContent: Alignment.Center }) {
        Column()
          .width(16)
          .height(16)
          .borderRadius(8)
          .backgroundColor('#B3000000')
        Text('✕')
          .fontSize(9)
          .fontColor(Color.White)
      }
      .width(28)
      .height(28)
      .onClick((): void => {
        this.dropAttach(a);
      })
    }
    .width(64)
    .height(64)
    .margin({ right: 8, bottom: 8 })
    /* #77c：点缩略图 → 图片全屏预览 / 文件交给系统应用打开 */
    .onClick((): void => {
      this.tapAttach(a);
    })
  }

  /** 留言 */
  @Builder
  commentSection() {
    Column({ space: 8 }) {
      /* #77h：留言标题同样独立成行。
         图标（#77「留言那个地方需要是图标」）放在标题组件**外面**、
         用 Row 包一层 —— 组件本身不接受前插图。 */
      Row({ space: 4 }) {
        Text('💬')
          .fontSize(FbMetric.fontSmall)
        Column() {
          FbSectionTitle({
            title: '留言',
            accent: this.accent,
            extra: this.comments().length > 0 ? this.comments().length.toString() : ''
          })
        }
        .layoutWeight(1)
        .alignItems(HorizontalAlign.Start)
      }
      .width('100%')
      .alignItems(VerticalAlign.Center)

      ForEach(this.comments(), (c: FbTaskComment) => {
        Row({ space: 8 }) {
          /* 🔴 #77e（用户 2026-11-05）：「留言里面的人，前面还是没有头像，需要补充。」
             ⇒ 原来这里画的是"名字首字色块"（当时端上确实没拉头像）。
                现在 `FbTaskComment.avatar` 有了（服务端 SQL 一直返回 p.avatar，
                端上原来没解析），换成 `FbAvatar`：
                有头像图用图、没设头像才退回首字色块。
             ⚠️ 用公共 `FbAvatar` 而不是自己拼 `Image`：全站头像的口径
                （尺寸/圆角/兜底色）都收在那一个组件里，自己拼迟早不一致。 */
          /* #77h：头像已由 `FbPersonChip` 内置（它会画 `FbAvatar`），
             这里不再自己画一个 —— 否则同一条留言前面出现两个头像。 */
          Column({ space: 2 }) {
            Row({ space: 6 }) {
              /* 🔴 #77h：留言人走规范组件 `FbPersonChip`。
                 网页端留言人用的就是 `person_chip()`（头像 + 名字的胶囊），
                 鸿蒙端对应的是 `FbPersonChip` —— 上一轮我手写的
                 「头像 + 纯文字名字」只是长得像，不是同一套。

                 ⚠️ `FbPersonChip` 自带 `FbAvatar`（dia 18）+ inputBg 胶囊底，
                    所以外面那个 24vp 的 FbAvatar 要去掉，否则头像画两遍。 */
              /* #77i：把头像 URL 传进去 —— `FbPersonChip` 之前不透传 `imageUrl`，
                 所以换成它之后头像就只剩首字色块了（那个参数我刚在 Widgets.ets 补上）。 */
              FbPersonChip({
                name: c.name,
                color: c.color !== '' ? c.color : '#A84A28',
                imageUrl: c.avatar !== '' ? fbImageSrc(c.avatar, this.token()) : ''
              })
              Text(c.createdAt)
                .fontSize(9)
                .fontColor(FbColors.faint)
            }
            .width('100%')
            .alignItems(VerticalAlign.Center)

            /* 正文也按主题色加粗？——**不**。
               用户说的是"标题和里面的文字"，但正文若整段主题色，
               简明度会掉（色彩是需要留白的）。
               ⇒ 名字（=发言标题）主题色加粗；正文保持 ink 正文色。
               这条取舍写在 commit 里，若用户要求正文也改色，一行就能调。 */
            Text(c.content)
              .fontSize(FbMetric.fontSmall)
              .fontColor(FbColors.ink)
              .width('100%')
          }
          .layoutWeight(1)
          .alignItems(HorizontalAlign.Start)
        }
        .width('100%')
        .padding({ top: 4, bottom: 4 })
        .alignItems(VerticalAlign.Top)
      }, (c: FbTaskComment): string => 'pc_' + c.id.toString())

      Row({ space: 8 }) {
        /* #77（用户 2026-11-05）：「下面说一句：回车发送」
           ⇒ 从 placeholder 里挪出来，单独一行说明。
              原来塞在 placeholder 里有两个问题：
                ① 一开始打字就看不见了；
                ② placeholder 该放"这里填什么"，不该放操作提示。 */
        TextInput({ text: this.cmtDraft, placeholder: '说一句…' })
          .placeholderColor(FbColors.faint)
          .placeholderFont({ size: FbMetric.fontTiny })
          .fontSize(FbMetric.fontSmall)
          .fontColor(FbColors.ink)
          .backgroundColor(FbColors.inputBg)
          .borderRadius(FbMetric.radiusS)
          .height(38)
          .layoutWeight(1)
          .padding({ left: 10, right: 10 })
          .enterKeyType(EnterKeyType.Send)
          .onChange((v: string): void => {
            this.cmtDraft = v;
          })
          .onSubmit((): void => {
            this.sendComment();
          })

        /* #77（用户 2026-11-05）：「发送按钮显示不全。」
           根因：原来写死 `width(56)` + `height(38)` + `textAlign(Center)`，
                而 `Text` 的默认内边距会吃掉两侧空间 —— 56vp 减去左右内边距
                「发送」两个汉字（约 26vp）+ 内边距正好压线，字体缩放或
                不同机型上就被截掉半个字。
           ⇒ 不写死宽度：用 `constraintSize({ minWidth: 60 })` + 水平内边距，
              让按钮按文字实际宽度自适应；`height(38)` 保留（与输入框齐平）。 */
        Text('发送')
          .fontSize(FbMetric.fontSmall)
          .fontColor(this.cmtDraft.trim() === '' ? FbColors.faint : this.accent)
          .textAlign(TextAlign.Center)
          .constraintSize({ minWidth: 60 })
          .padding({ left: 14, right: 14 })
          .height(38)
          .backgroundColor(fbAlpha(this.accent, 0.1))
          .borderRadius(FbMetric.radiusS)
          .onClick((): void => {
            this.sendComment();
          })
      }
      .width('100%')
      .alignItems(VerticalAlign.Center)

      /* 🔴 #77g（用户 2026-11-05）：「留言是可以需要添加附件的。」

         服务端**早就支持** —— `tasks/comment_add` 里一直有
         `attach_save_files($familyId, 'task_comment', $cid, 'attach', $me)`
         （网页端那个表单也已经有 file input），只是**鸿蒙端从来没传过附件**。
         ⇒ `addTaskComment()` 目前只发 JSON（content 一个字段），
            要带附件必须改成 multipart 上传 —— 见 FbTaskRepo 的改动。

         ⚠️ 交互设计：附件是"随这条留言一起发出"，不是立刻上传
            （与「任务附件」那块不同 —— 那个传完就生效）。
            所以选中的文件先挂在本地，点「发送」时和文字一起提交。
         ⚠️ 选中的文件名要显示出来，否则用户不知道有没有选上。 */
      if (this.cmtAttachNames.length > 0) {
        Flex({ wrap: FlexWrap.Wrap }) {
          ForEach(this.cmtAttachNames, (n: string, i: number) => {
            Row({ space: 4 }) {
              Text('📎')
                .fontSize(9)
              Text(n)
                .fontSize(9)
                .fontColor(FbColors.muted)
                .maxLines(1)
                .textOverflow({ overflow: TextOverflow.Ellipsis })
                .constraintSize({ maxWidth: 120 })
              Text('✕')
                .fontSize(9)
                .fontColor(FbColors.faint)
                .onClick((): void => {
                  this.dropCmtAttach(i);
                })
            }
            .padding({ left: 7, right: 7, top: 3, bottom: 3 })
            .margin({ right: 6, bottom: 4 })
            .backgroundColor(FbColors.inputBg)
            .borderRadius(FbMetric.radiusPill)
            .alignItems(VerticalAlign.Center)
          }, (n: string, i: number): string => 'ca_' + i.toString() + '_' + n)
        }
        .width('100%')
        .padding({ top: 6 })
      }

      /* 「回车发送」+「添加附件」同一行：一个说明、一个动作 */
      Row({ space: 8 }) {
        Text('回车发送')
          .fontSize(10)
          .fontColor(FbColors.faint)
          .layoutWeight(1)
        Text(this.cmtBusy ? '发送中…' : '＋ 添加附件')
          .fontSize(FbMetric.fontTiny)
          .fontColor(this.cmtBusy ? FbColors.faint : this.accent)
          .padding({ left: 8, right: 8, top: 4, bottom: 4 })
          .backgroundColor(fbAlpha(this.accent, 0.10))
          .borderRadius(FbMetric.radiusPill)
          .onClick((): void => {
            this.pickCmtAttach();
          })
      }
      .width('100%')
      .padding({ top: 6 })
      .alignItems(VerticalAlign.Center)
    }
    .width('100%')
    .alignItems(HorizontalAlign.Start)
  }

  /**
   * 危险操作区：删除任务 —— 放在**滚动内容的最底部**。
   *
   * 🔴🔴 #77s（用户 2026-11-05）：「删除按钮不能出现在那里，
   *    因为这样太容易误触了。删除按钮应该放在哪里？你考虑考虑。」
   *
   * 原来它和「保存」并排钉在底栏，两个问题：
   *   ① **误触**：底栏是"保存"这种高频操作的位置，手一滑就点到删除，
   *      而删除**不可恢复**，一次误触 = 数据没了。
   *   ② **语义错位**：底栏是"我改完了、要留下这个结果"的确认区，
   *      不该混进"我要毁掉它"。
   *
   * 所以放到**滚动内容最末尾**：
   *   · 用户得主动滚到最底才看得见 —— 低频操作不必首屏可见；
   *   · 纯文字、无填充底色，不像按钮，不招手指；
   *   · 与正文隔一条分割线，视觉上属于"其它"，不属于"操作"；
   *   · 仍然保留**二次确认**（第一下变成「确定删掉」+「取消」）。
   *
   * ⚠️ 这是通行做法（Notion / 备忘录 / 各种设置页的删除都在最底部），
   *    不是在发明新交互。
   * ⚠️ 不放顶栏：顶栏是"知道我在哪 / 怎么退出"的位置，
   *    在那里放删除，误触代价同样不可恢复。
   * ⚠️ 不用红底大白按钮：那种视觉权重会把人引过去，与"低频 + 危险"正相反。
   */
  @Builder
  dangerZone() {
    Column({ space: 0 }) {
      Divider()
        .color(FbColors.line)
        .margin({ top: 18, bottom: 14 })

      if (this.confirmDel) {
        /* 第一次已点：写清后果 + 两个出口 */
        Text('删了就找不回来了，确定吗？')
          .fontSize(FbMetric.fontTiny)
          .fontColor('#C0533F')
          .width('100%')
          .margin({ bottom: 8 })

        Row({ space: 10 }) {
          Text('确定删掉')
            .fontSize(FbMetric.fontSmall)
            .fontColor(Color.White)
            .textAlign(TextAlign.Center)
            .layoutWeight(1)
            .height(40)
            .backgroundColor('#C0533F')
            .borderRadius(FbMetric.radiusS)
            .onClick((): void => {
              this.dropTask();
            })

          /* 「取消」必须有：误点进来要能退回去，
             否则只剩"删"和"点别处"两个选择，后者不明显。 */
          Text('取消')
            .fontSize(FbMetric.fontSmall)
            .fontColor(FbColors.muted)
            .textAlign(TextAlign.Center)
            .layoutWeight(1)
            .height(40)
            .backgroundColor(FbColors.inputBg)
            .borderRadius(FbMetric.radiusS)
            .onClick((): void => {
              this.confirmDel = false;
              this.note = '';
            })
        }
        .width('100%')
      } else {
        /* 常态：一行小字，居中，不像按钮 */
        Text('删除这个任务')
          .fontSize(FbMetric.fontTiny)
          .fontColor('#C0533F')
          .textAlign(TextAlign.Center)
          .width('100%')
          .padding({ top: 10, bottom: 10 })
          .onClick((): void => {
            /* 第一下只进确认态，不删 */
            this.confirmDel = true;
          })
      }
    }
    .width('100%')
  }

  /** 底部：编辑 / 删除 */
  @Builder
  footBar() {
    Row({ space: 10 }) {
      /* 🔴🔴 #77q（用户 2026-11-05）：「和网页版一样，没有保存按钮啊，
         这应该怎么保存呢？在哪个地方点保存呢？」

         原来这里是「编辑」—— 但面板本身已经能改所有字段（标题/备注/截止/
         负责人/分类/协作人/子任务/附件/留言），再给一颗"编辑"是自相矛盾的
         （点它反而跳到另一张表单）。
         ⇒ 换成**「保存」**：把"打字"类的两项（标题、备注）落库然后关窗。
            与网页端保存后关浮层的行为一致。
         ⚠️ 状态/看板/截止/负责人这些**不用点保存**，选中即生效 ——
            它们是"动作"不是"草稿"，多一步确认反而烦。 */
      Text(this.saving ? '保存中…' : '保存')
        .fontSize(FbMetric.fontSmall)
        .fontColor(Color.White)
        .textAlign(TextAlign.Center)
        .layoutWeight(1)
        .height(42)
        .backgroundColor(this.saving ? '#C9CDD2' : this.accent)
        .borderRadius(FbMetric.radiusS)
        .onClick((): void => {
          if (this.saving) {
            return;
          }
          this.saveAll();
        })

      /* 🔴🔴 #77s（用户 2026-11-05）：「删除按钮不能出现在那里，
         因为这样太容易误触了。」
         ⇒ 从底栏摘掉，移到滚动内容最末尾的 dangerZone()。
           底栏只留全宽的「保存」—— 它是"确认改动"的位置，
           不该混进"毁掉数据"的入口。 */
    }
    .width('100%')
    .margin({ top: 12 })
    /* #77r：底栏**不许被压缩** —— Scroll 已经 layoutWeight(1) 拿剩余空间，
       这里再显式 flexShrink(0) 兜一层，防止某些机型上把 42 高的按钮压扁。
       （按钮整个看不见那次，就是没有这层保护、整条栏被挤到 86% 之外。） */
    .flexShrink(0)
  }
}