xiaoshu-app/projects/xiaoshu-mobile/src/app/features/appointment/appointment-page.component.html

<section class="appointment-page">
  @if (loading()) {
    <div class="empty-state"><p>正在加载预约...</p></div>
  } @else if (error()) {
    <div class="empty-state error"><div><lucide-icon [img]="icons.CircleHelp" [size]="30" /><p>{{ error() }}</p><button type="button" class="secondary-button" (click)="load()">重新加载</button></div></div>
  } @else {
    <section class="appointment-overview" aria-label="预约信息">
    <header class="appointment-status">
      <div><span>{{ status() > 20 ? '课程陪练报告' : '预约课程' }}</span><strong>{{ statusText() }}</strong></div>
      <button type="button" class="refresh-detail" (click)="load()" [disabled]="submitting()"><lucide-icon [img]="icons.RefreshCw" [size]="16" aria-hidden="true" />刷新详情</button>
    </header>
    @if (detailWarning()) { <p class="detail-warning" role="alert">{{ detailWarning() }}</p> }
    @if(actionError()){<p class="detail-warning" role="alert">{{actionError()}}</p>}
    @if(order()['blockedReason']){<p class="detail-warning">{{order()['blockedReason']}}</p>}
    @if (can('start')) { <p class="schedule-hint"><lucide-icon [img]="icons.Clock3" [size]="16" aria-hidden="true" /><span>预约当天（北京时间）均可上课，可提前开始，也可在计划时间之后开始。</span></p> }

    <dl class="appointment-info">
      <div><dt>学生姓名</dt><dd>{{ field('student') || '-' }}</dd></div>
      <div><dt>预约课程</dt><dd>{{ field('course') || '-' }}</dd></div>
      <div><dt>课程类型</dt><dd>{{ field('type') || '-' }}</dd></div>
      <div><dt>预约时间</dt><dd>{{ field('date') }} {{ field('time') }}@if (field('end')) { ~ {{ field('end') }} }</dd></div>
      <div><dt>交付方式</dt><dd>{{ field('delivery') || '-' }}</dd></div>
      @if (status() > 20) { <div><dt>陪练老师</dt><dd>{{ field('coach') || '-' }}</dd></div><div><dt>学习成果</dt><dd>{{ order()['dsxueshi'] || 0 }} 学时，累计识词 {{ order()['learned'] || 0 }}</dd></div> }
    </dl>
    </section>

    @if (!order()['cancelled'] && !isStudentView && status() <= 10) {
      <section class="course-section">
        <label><span>本次学习课本 / 词库</span>
          <select aria-label="本次学习课本或词库" [(ngModel)]="selectedBindingId" (ngModelChange)="chooseCourse()" [disabled]="coursesLoading() || submitting()">
            <option value="">{{coursesLoading() ? '正在加载学员课程…' : '请选择已开通课程'}}</option>
            @for (course of courses(); track course['bindingId']) { <option [value]="course['bindingId']">{{course['Title']}} · {{course['categoryName'] || '已开通'}}{{course['scheduled'] ? '（排课课程）' : ''}}</option> }
          </select>
          <small>可选择该学员所有已开通的课程，默认使用排课课程。</small>
        </label>
        @if(coursesError()){<p class="detail-warning" role="alert">{{coursesError()}}</p><button type="button" class="secondary-button" (click)="load()">重新加载课程</button>}
        @else if(!coursesLoading() && !courses().length){<p>该学员暂无已开通课程，请联系管理员开通。</p>}
        @if(isWriting){<p class="schedule-hint">当前选择语法写作课程，可开始上课并在结束时填写学习内容。</p>}
        @else {
        <div class="unit-heading"><strong>选择学习单元</strong><span>可多选，右侧按钮可标记已学完</span></div>
        <div class="unit-grid">
          @for (unit of units(); track $index) {
            <article [class.selected]="selectedUnits().has(unitId(unit))" [class.completed]="completedUnits().has(unitId(unit))">
              <button type="button" class="unit-select" [attr.aria-pressed]="selectedUnits().has(unitId(unit))" (click)="toggleUnit(unit)">
                <span class="check">@if (selectedUnits().has(unitId(unit))) { <lucide-icon [img]="icons.Check" [size]="16" /> }</span>
                <span class="unit-copy">
                  <strong>{{ unitTitle(unit) }}</strong>
                  @if (unitProgress(unit); as progress) {
                    <span class="unit-progress-summary"><b>已学 {{ progress.percent }}%</b><span>{{ progress.total > 0 ? progress.learned + '/' + progress.total + ' 词' : '暂无单词' }}</span></span>
                    <span class="unit-progress-track" aria-hidden="true"><span [style.width.%]="progress.percent"></span></span>
                  } @else {
                    <span class="unit-progress-unavailable">暂无进度数据</span>
                  }
                  @if (completedUnits().has(unitId(unit))) { <span class="unit-completion-note">已标记学完</span> }
                </span>
              </button>
              <button type="button" class="mark-complete" [disabled]="!can('start') && !can('continue')" title="标记已学完" aria-label="标记已学完" (click)="markUnitComplete(unit)"><lucide-icon [img]="icons.BookCheck" [size]="17" /></button>
            </article>
          } @empty { <div class="empty-state"><p>{{unitsLoading() ? '正在加载学习单元…' : selectedBindingId ? '暂无可用学习单元' : '请选择课程后加载单元'}}</p></div> }
        </div>
        }
      </section>
    }

    @if (!isStudentView && can('complete')) {
      <dialog #completionDialog class="completion-dialog" aria-labelledby="completion-title" aria-describedby="completion-description" (cancel)="closeCompletionFeedback($event)">
        <section class="completion-feedback">
          <header>
            <div><h2 id="completion-title">完课反馈</h2><p id="completion-description">填写反馈并提交后，结束本次课程。</p></div>
            <button type="button" class="feedback-close" aria-label="关闭完课反馈" [disabled]="submitting()" (click)="closeCompletionFeedback()"><lucide-icon [img]="icons.X" [size]="20" /></button>
          </header>
          <p class="feedback-hint">日期、时间、课时扣减、生词和抗遗忘数据由系统自动记录</p>
          <fieldset class="feedback-fields" [disabled]="submitting()">
            <label><span>本次学习的课本或强化内容 <b>*</b></span><textarea autofocus [(ngModel)]="contentSummary" maxlength="500" aria-required="true" placeholder="例：人教版三年级 Unit 3，重点词汇与句型"></textarea></label>
            <div class="feedback-grid">
              <label><span>复习 / 生词本情况</span><input [(ngModel)]="reviewStatus" maxlength="200" placeholder="可填写复习或生词本情况（选填）" /></label>
              <label><span>复习说明</span><input [(ngModel)]="reviewSummary" maxlength="200" placeholder="可补充复习情况" /></label>
            </div>
            <div class="feedback-grid">
              <label><span>训练进程和状态</span><input [(ngModel)]="trainingStatus" maxlength="200" placeholder="可填写训练进程和状态（选填）" /></label>
              <label><span>进度说明 <b>*</b></span><input [(ngModel)]="trainingSummary" maxlength="200" aria-required="true" placeholder="说明当前进度与下次起点" /></label>
            </div>
            <div class="feedback-homework">
              <label><span>作业安排 @if (!noHomework) { <b>*</b> }</span><textarea [(ngModel)]="homework" [disabled]="noHomework" [attr.aria-required]="!noHomework" maxlength="300" placeholder="填写作业内容和要求"></textarea></label>
              <label class="checkbox-row"><input type="checkbox" [(ngModel)]="noHomework" /><span>本次无作业</span></label>
            </div>
            <label><span>陪练点评</span><textarea [(ngModel)]="coachComment" maxlength="1000" placeholder="本次学习表现与建议"></textarea></label>
            <label><span>备注 <small>选填</small></span><textarea [(ngModel)]="notes" maxlength="300" placeholder="记录需要运营或家长关注的情况"></textarea></label>
          </fieldset>
          @if (feedbackError()) { <p class="feedback-error" role="alert">{{ feedbackError() }}</p> }
          <footer class="feedback-actions">
            <button type="button" class="secondary-button" [disabled]="submitting()" (click)="closeCompletionFeedback()">返回课程</button>
            <button type="button" class="primary-button" [disabled]="submitting()" (click)="finishCoachLesson()">{{ submitting() ? '正在提交…' : '提交并结束课程' }}</button>
          </footer>
        </section>
      </dialog>
    }

    @if (isStudentView && can('review')) {
      <section class="comment-panel">
        <label><span>本次评分</span><select [(ngModel)]="studentScore">@for (score of [5,4,3,2,1]; track score) { <option [ngValue]="score">{{ score }} 分</option> }</select></label>
        <label><span>学习评价</span><textarea [(ngModel)]="studentComment" maxlength="200" placeholder="请输入评价内容"></textarea></label>
      </section>
    }

    @if (status() >= 30 || practiceRecord()['pldp'] || practiceRecord()['pjnr']) {
      <section class="report-panel">
        <h2><lucide-icon [img]="icons.Star" [size]="20" />课程评价</h2>
        <div><span>学员评分</span><strong>{{ $any(order()['studentReview'])?.score || practiceRecord()['pf'] || '-' }}@if ($any(order()['studentReview'])?.score || practiceRecord()['pf']) { 分 }</strong></div>
        <p>{{ $any(order()['studentReview'])?.comment || practiceRecord()['pjnr'] || '学员暂无文字评价' }}</p>
        <div><span>陪练点评</span><strong>{{ practiceRecord()['plpjsj'] || '' }}</strong></div>
        <p>{{ practiceRecord()['pldp'] || '陪练暂无文字点评' }}</p>
      </section>
    }

    <div class="appointment-actions">
      @if (can('start')) { <button type="button" class="primary-button" [disabled]="submitting() || coursesLoading() || unitsLoading()" (click)="startOrContinue()">{{submitting()?'正在开始…':'开始课程'}}</button> }
      @if (can('continue')) { <button type="button" [class.primary-button]="!can('complete')" [class.secondary-button]="can('complete')" [disabled]="submitting() || coursesLoading() || unitsLoading()" (click)="startOrContinue()">继续课程</button> }
      @if (can('complete')) { <button type="button" class="primary-button" [disabled]="submitting()" (click)="openCompletionFeedback()">{{status()===10?'结束课程':'补齐反馈并结课'}}</button> }
      @if (can('review')) { <button type="button" class="primary-button" [disabled]="submitting()" (click)="finishStudentLesson()">{{submitting()?'正在提交…':'提交评价'}}</button> }
      @if (status()>=30 && !order()['cancelled']) { <button type="button" class="secondary-button" (click)="openReport()">查看学习报告</button><span>{{order()['reviewStatus']==='submitted'?'学生已评价':'已结课 · 待学生评价'}}</span> }
    </div>
  }
@if(feedback();as f){<section class="lesson-feedback card"><h3>完课反馈</h3><p>学习内容：{{f['contentSummary']}}</p><p>训练进度：{{f['trainingSummary']}}</p><p>作业：{{f['homework']||'无作业'}}</p></section>}</section>