<div class="after-sales-container hr-page">
  <!-- 概览视图 -->
  @if (currentView() === 'overview') {
    <header class="page-header">
      <h1>售后服务</h1>
      <p class="page-description">管理已完结项目的售后服务，包括尾款管理、客户评价处理和建议收集</p>
    </header>

    <!-- 统计数据看板 -->
    <div class="stats-dashboard">
      <div class="stat-card">
        <div class="stat-icon total">
          <mat-icon>assignment</mat-icon>
        </div>
        <div class="stat-content">
          <div class="stat-value">{{ formatCurrency(stats().totalAmount) }}</div>
          <div class="stat-label">总金额 ({{ stats().totalCount }}项)</div>
        </div>
      </div>

      <div class="stat-card">
        <div class="stat-icon pending">
          <mat-icon>payment</mat-icon>
        </div>
        <div class="stat-content">
          <div class="stat-value">{{ formatCurrency(stats().pendingAmount) }}</div>
          <div class="stat-label">待收款 ({{ stats().pendingCount }}项)</div>
        </div>
      </div>

      <div class="stat-card">
        <div class="stat-icon overdue">
          <mat-icon>schedule</mat-icon>
        </div>
        <div class="stat-content">
          <div class="stat-value">{{ formatCurrency(stats().overdueAmount) }}</div>
          <div class="stat-label">逾期尾款 ({{ stats().overdueCount }}项)</div>
        </div>
      </div>

      <div class="stat-card">
        <div class="stat-icon completed">
          <mat-icon>check_circle</mat-icon>
        </div>
        <div class="stat-content">
          <div class="stat-value">{{ formatCurrency(stats().completedAmount) }}</div>
          <div class="stat-label">已收款 ({{ stats().completedCount }}项)</div>
        </div>
      </div>

      <div class="stat-card">
        <div class="stat-icon priority">
          <mat-icon>priority_high</mat-icon>
        </div>
        <div class="stat-content">
          <div class="stat-value">{{ stats().highPriority }}</div>
          <div class="stat-label">高优先级</div>
        </div>
      </div>
    </div>

    <!-- 搜索和筛选栏 -->
    <div class="filter-bar">
      <div class="search-section">
        <mat-form-field appearance="outline" class="search-field ios-select">
          <mat-label>搜索项目</mat-label>
          <input matInput 
                 placeholder="项目编号、项目名称或客户名称" 
                 [(ngModel)]="searchTerm"
                 (ngModelChange)="searchTerm.set($event)">
          <mat-icon matSuffix>search</mat-icon>
        </mat-form-field>
      </div>

      <div class="filter-section">
        <mat-form-field appearance="outline" class="filter-field ios-select">
          <mat-label>尾款状态</mat-label>
          <mat-select [(ngModel)]="selectedPaymentStatus" 
                      (ngModelChange)="selectedPaymentStatus.set($event)">
            <mat-option value="all">
              <div class="option-content">
                <mat-icon>payment</mat-icon>
                <span>全部</span>
              </div>
            </mat-option>
            <mat-option value="pending">
              <div class="option-content">
                <mat-icon>schedule</mat-icon>
                <span>待收款</span>
              </div>
            </mat-option>
            <mat-option value="partial">
              <div class="option-content">
                <mat-icon>partial_fulfillment</mat-icon>
                <span>部分收款</span>
              </div>
            </mat-option>
            <mat-option value="completed">
              <div class="option-content">
                <mat-icon>check_circle</mat-icon>
                <span>已完成</span>
              </div>
            </mat-option>
            <mat-option value="overdue">
              <div class="option-content">
                <mat-icon>warning</mat-icon>
                <span>逾期</span>
              </div>
            </mat-option>
          </mat-select>
        </mat-form-field>

        <mat-form-field appearance="outline" class="filter-field ios-select">
          <mat-label>评价状态</mat-label>
          <mat-select [(ngModel)]="selectedReviewStatus" 
                      (ngModelChange)="selectedReviewStatus.set($event)">
            <mat-option value="all">
              <div class="option-content">
                <mat-icon>star</mat-icon>
                <span>全部</span>
              </div>
            </mat-option>
            <mat-option value="pending">
              <div class="option-content">
                <mat-icon>star_border</mat-icon>
                <span>待评价</span>
              </div>
            </mat-option>
            <mat-option value="positive">
              <div class="option-content">
                <mat-icon>thumb_up</mat-icon>
                <span>好评</span>
              </div>
            </mat-option>
            <mat-option value="negative">
              <div class="option-content">
                <mat-icon>thumb_down</mat-icon>
                <span>差评</span>
              </div>
            </mat-option>
            <mat-option value="no-review">
              <div class="option-content">
                <mat-icon>help_outline</mat-icon>
                <span>无评价</span>
              </div>
            </mat-option>
          </mat-select>
        </mat-form-field>

        <mat-form-field appearance="outline" class="filter-field ios-select">
          <mat-label>优先级</mat-label>
          <mat-select [(ngModel)]="selectedPriority" 
                      (ngModelChange)="selectedPriority.set($event)">
            <mat-option value="all">
              <div class="option-content">
                <mat-icon>priority_high</mat-icon>
                <span>全部</span>
              </div>
            </mat-option>
            <mat-option value="high">
              <div class="option-content">
                <mat-icon>keyboard_double_arrow_up</mat-icon>
                <span>高</span>
              </div>
            </mat-option>
            <mat-option value="medium">
              <div class="option-content">
                <mat-icon>keyboard_arrow_up</mat-icon>
                <span>中</span>
              </div>
            </mat-option>
            <mat-option value="low">
              <div class="option-content">
                <mat-icon>keyboard_arrow_down</mat-icon>
                <span>低</span>
              </div>
            </mat-option>
          </mat-select>
        </mat-form-field>
      </div>
    </div>

    <!-- 项目列表 -->
    <div class="projects-list">
      @for (project of filteredProjects(); track project.id) {
        <div class="project-card" (click)="selectProject(project)">
          <div class="project-header">
            <div class="project-info">
              <h3 class="project-name">{{ project.projectName }}</h3>
              <div class="project-meta">
                <span class="project-code">{{ project.projectCode }}</span>
                <span class="customer-name">{{ project.customerName }}</span>
                <span class="completion-date">完成于 {{ formatDate(project.completedDate) }}</span>
              </div>
            </div>
            <div class="priority-badge" [class]="getPriorityClass(project.priority)">
              {{ getPriorityText(project.priority) }}优先级
            </div>
          </div>

          <div class="project-content">
            <!-- 尾款状态 -->
            <div class="status-section">
              <div class="status-item">
                <div class="status-label">尾款状态</div>
                <div class="status-value">
                  <span class="status-badge" [class]="getPaymentStatusClass(project.finalPaymentStatus)">
                    {{ getPaymentStatusText(project.finalPaymentStatus) }}
                  </span>
                </div>
              </div>

              <div class="payment-progress">
                <div class="progress-info">
                  <span>{{ formatAmount(project.paidAmount) }} / {{ formatAmount(project.finalPaymentAmount) }}</span>
                  <span class="progress-percent">{{ getPaymentProgress(project) }}%</span>
                </div>
                <div class="progress-bar">
                  <div class="progress-fill" [style.width.%]="getPaymentProgress(project)"></div>
                </div>
              </div>
            </div>

            <!-- 评价状态 -->
            <div class="status-section">
              <div class="status-item">
                <div class="status-label">客户评价</div>
                <div class="status-value">
                  <span class="status-badge" [class]="getReviewStatusClass(project.reviewStatus)">
                    {{ getReviewStatusText(project.reviewStatus) }}
                  </span>
                  @if (project.reviewScore) {
                    <div class="review-score">
                      @for (star of [1,2,3,4,5]; track star) {
                        <mat-icon [class.filled]="star <= project.reviewScore!">star</mat-icon>
                      }
                    </div>
                  }
                </div>
              </div>
            </div>

            <!-- 建议数量 -->
            <div class="status-section">
              <div class="status-item">
                <div class="status-label">客户建议</div>
                <div class="status-value">
                  <span class="suggestion-count">{{ project.suggestionCount }} 条</span>
                </div>
              </div>
            </div>
          </div>

          <div class="project-footer">
            <div class="last-contact">
              最后联系：{{ formatDate(project.lastContactDate) }}
            </div>
            <div class="action-hint">
              <mat-icon>arrow_forward</mat-icon>
              点击查看详情
            </div>
          </div>
        </div>
      } @empty {
        <div class="empty-state">
          <mat-icon>inbox</mat-icon>
          <h3>暂无售后项目</h3>
          <p>当前筛选条件下没有找到相关项目</p>
        </div>
      }
    </div>
  }

  <!-- 详情视图 -->
  @if (currentView() === 'detail' && selectedProject()) {
    <div class="detail-view">
      <div class="detail-header">
        <button class="back-button" (click)="backToOverview()">
          <mat-icon>arrow_back</mat-icon>
          返回概览
        </button>
        <div class="project-info">
          <h2>{{ selectedProject()?.projectName }}</h2>
          <span class="project-code">{{ selectedProject()?.projectCode }}</span>
          <span class="customer-name">客户：{{ selectedProject()?.customerName }}</span>
        </div>
      </div>
      
      <!-- 功能模块标签 -->
      <!-- <div class="detail-tabs">
        <button 
          class="tab-button"
          [class.active]="activeDetailTab() === 'payment'"
          (click)="switchDetailTab('payment')">
          <mat-icon>payment</mat-icon>
          尾款管理
        </button>
        <button 
          class="tab-button"
          [class.active]="activeDetailTab() === 'review'"
          (click)="switchDetailTab('review')">
          <mat-icon>star</mat-icon>
          客户评价处理
        </button>
        <button 
          class="tab-button"
          [class.active]="activeDetailTab() === 'suggestion'"
          (click)="switchDetailTab('suggestion')">
          <mat-icon>feedback</mat-icon>
          客户建议收集与处理
        </button>
      </div> -->
      
      <!-- 尾款管理模块 -->
      <!-- @if (activeDetailTab() === 'payment') { -->
        <div class="payment-management">
          <div class="module-header">
            <h3>尾款管理</h3>
            <button class="upload-button" (click)="fileInput.click()" [disabled]="isUploadingFile()">
              <mat-icon>upload</mat-icon>
              {{ isUploadingFile() ? '上传中...' : '上传支付凭证' }}
            </button>
            <input #fileInput type="file" hidden multiple accept=".jpg,.jpeg,.png,.pdf" 
                   (change)="handleFileUpload($event)">
          </div>
          
          <div class="payment-summary">
            <div class="summary-item">
              <span class="label">应收尾款：</span>
              <span class="amount">{{ formatCurrency(selectedProject()?.finalPaymentAmount || 0) }}</span>
            </div>
            <div class="summary-item">
              <span class="label">已收金额：</span>
              <span class="amount paid">{{ formatCurrency(selectedProject()?.paidAmount || 0) }}</span>
            </div>
            <div class="summary-item">
              <span class="label">待收金额：</span>
              <span class="amount pending">{{ formatCurrency((selectedProject()?.finalPaymentAmount || 0) - (selectedProject()?.paidAmount || 0)) }}</span>
            </div>
          </div>
          
          @if (selectedProject()?.paymentRecords && selectedProject()?.paymentRecords!.length > 0) {
            <div class="payment-records">
              <h4>支付记录</h4>
              @for (record of selectedProject()?.paymentRecords; track record.id) {
                <div class="payment-record">
                  <div class="record-header">
                    <span class="amount">{{ formatCurrency(record.amount) }}</span>
                    <span class="status" [class]="'status-' + record.status">
                      {{ getPaymentRecordStatusText(record.status) }}
                    </span>
                    <span class="date">{{ formatDate(record.paymentDate) }}</span>
                  </div>
                  <div class="record-details">
                    <p><strong>支付方式：</strong>{{ record.paymentMethod }}</p>
                    <p><strong>操作人：</strong>{{ record.operator }}</p>
                    @if (record.remark) {
                      <p><strong>备注：</strong>{{ record.remark }}</p>
                    }
                    @if (record.voucher) {
                      <div class="voucher-preview">
                        <strong>支付凭证：</strong>
                        @if (record.voucher.previewUrl) {
                          <img [src]="record.voucher.previewUrl" [alt]="record.voucher.fileName" class="voucher-image">
                        } @else {
                          <a [href]="record.voucher.fileUrl" target="_blank" class="voucher-link">
                            <mat-icon>description</mat-icon>
                            {{ record.voucher.fileName }}
                          </a>
                        }
                      </div>
                    }
                  </div>
                  
                  @if (record.statusHistory.length > 0) {
                    <div class="status-history">
                      <h5>状态变更记录</h5>
                      @for (history of record.statusHistory; track history.id) {
                        <div class="history-item">
                          <span class="history-date">{{ formatDate(history.changeDate) }}</span>
                          <span class="history-operator">{{ history.operator }}</span>
                          <span class="history-status">{{ history.status }}</span>
                          <span class="history-reason">{{ history.reason }}</span>
                        </div>
                      }
                    </div>
                  }
                </div>
              }
            </div>
          } @else {
            <div class="empty-state">
              <mat-icon>payment</mat-icon>
              <p>暂无支付记录</p>
            </div>
          }
        </div>
      
      <!-- 客户评价处理模块 -->
      <!-- @if (activeDetailTab() === 'review') { -->
        <div class="review-management">
          <div class="module-header">
            <h3>客户评价处理</h3>
            <button class="add-review-button" (click)="showAddReviewForm = !showAddReviewForm">
              <mat-icon>add</mat-icon>
              录入评价
            </button>
          </div>
          
          @if (showAddReviewForm) {
            <div class="add-review-form">
              <div class="form-header">
                <div class="header-content">
                  <mat-icon class="header-icon">rate_review</mat-icon>
                  <h4>录入客户评价</h4>
                </div>
                <button type="button" mat-icon-button class="close-button" (click)="showAddReviewForm = false">
                  <mat-icon>close</mat-icon>
                </button>
              </div>
              
              <form #reviewForm="ngForm" (ngSubmit)="addReviewRecord(reviewForm.value)" class="review-form">
                <div class="form-grid">
                  <div class="form-row">
                    <mat-form-field class="ios-select" appearance="outline">
                      <mat-label>反馈渠道</mat-label>
                      <mat-select name="reviewChannel" ngModel required>
                        <mat-option value="phone">
                          <div class="option-content">
                            <mat-icon>phone</mat-icon>
                            <span>电话回访</span>
                          </div>
                        </mat-option>
                        <mat-option value="wechat">
                          <div class="option-content">
                            <mat-icon>chat</mat-icon>
                            <span>微信沟通</span>
                          </div>
                        </mat-option>
                        <mat-option value="email">
                          <div class="option-content">
                            <mat-icon>email</mat-icon>
                            <span>邮件反馈</span>
                          </div>
                        </mat-option>
                        <mat-option value="face-to-face">
                          <div class="option-content">
                            <mat-icon>person</mat-icon>
                            <span>面对面交流</span>
                          </div>
                        </mat-option>
                        <mat-option value="other">
                          <div class="option-content">
                            <mat-icon>more_horiz</mat-icon>
                            <span>其他渠道</span>
                          </div>
                        </mat-option>
                      </mat-select>
                    </mat-form-field>
                    
                    <mat-form-field class="ios-select" appearance="outline">
                      <mat-label>评价等级</mat-label>
                      <mat-select name="rating" ngModel required>
                        <mat-option value="5">
                          <div class="option-content rating-option">
                            <div class="stars">
                              @for (star of [1,2,3,4,5]; track star) {
                                <span class="star-icon filled">★</span>
                              }
                            </div>
                            <span>非常满意</span>
                          </div>
                        </mat-option>
                        <mat-option value="4">
                          <div class="option-content rating-option">
                            <div class="stars">
                              @for (star of [1,2,3,4]; track star) {
                                <span class="star-icon filled">★</span>
                              }
                              <span class="star-icon">☆</span>
                            </div>
                            <span>满意</span>
                          </div>
                        </mat-option>
                        <mat-option value="3">
                          <div class="option-content rating-option">
                            <div class="stars">
                              @for (star of [1,2,3]; track star) {
                                <span class="star-icon filled">★</span>
                              }
                              @for (star of [4,5]; track star) {
                                <span class="star-icon">☆</span>
                              }
                            </div>
                            <span>一般</span>
                          </div>
                        </mat-option>
                        <mat-option value="2">
                          <div class="option-content rating-option">
                            <div class="stars">
                              @for (star of [1,2]; track star) {
                                <span class="star-icon filled">★</span>
                              }
                              @for (star of [3,4,5]; track star) {
                                <span class="star-icon">☆</span>
                              }
                            </div>
                            <span>不满意</span>
                          </div>
                        </mat-option>
                        <mat-option value="1">
                          <div class="option-content rating-option">
                            <span class="star-icon filled">★</span>
                            @for (star of [2,3,4,5]; track star) {
                              <span class="star-icon">☆</span>
                            }
                            <span>非常不满意</span>
                          </div>
                        </mat-option>
                      </mat-select>
                    </mat-form-field>
                  </div>
                  
                  <mat-form-field class="full-width ios-select" appearance="outline">
                    <mat-label>评价内容</mat-label>
                    <textarea matInput rows="4" name="content" ngModel required 
                              placeholder="请详细描述客户的评价内容，包括满意的方面和需要改进的地方"></textarea>
                    <mat-hint>请尽量详细记录客户的反馈意见</mat-hint>
                  </mat-form-field>
                  
                  <mat-form-field class="full-width ios-select" appearance="outline">
                    <mat-label>处理建议</mat-label>
                    <textarea matInput rows="2" name="remark" ngModel 
                              placeholder="基于客户评价，提出相应的改进建议或后续处理方案"></textarea>
                    <mat-hint>可选：添加针对性的改进建议</mat-hint>
                  </mat-form-field>
                </div>
                
                <div class="form-actions">
                  <button type="button" mat-stroked-button (click)="showAddReviewForm = false">
                    <mat-icon>close</mat-icon>
                    取消
                  </button>
                  <button type="submit" mat-raised-button color="primary" [disabled]="isSubmittingForm()">
                    <mat-icon>{{ isSubmittingForm() ? 'sync' : 'save' }}</mat-icon>
                    {{ isSubmittingForm() ? '提交中...' : '确认录入' }}
                  </button>
                </div>
              </form>
            </div>
          }
          
          @if (selectedProject()?.reviewRecords && selectedProject()?.reviewRecords!.length > 0) {
            <div class="review-records">
              <h4>评价记录</h4>
              @for (review of selectedProject()?.reviewRecords; track review.id) {
                <div class="review-record">
                  <div class="review-header">
                    <span class="review-type">{{ review.reviewType === 'system' ? '系统评价' : '手动录入' }}</span>
                    <span class="review-channel">{{ review.reviewChannel }}</span>
                    <span class="review-date">{{ formatDate(review.reviewDate) }}</span>
                    @if (review.score) {
                      <div class="review-score">
                        @for (star of [1,2,3,4,5]; track star) {
                          <mat-icon [class.filled]="star <= review.score!">star</mat-icon>
                        }
                      </div>
                    }
                  </div>
                  <div class="review-content">
                    <p>{{ review.content }}</p>
                    @if (review.remark) {
                      <p class="review-remark"><strong>备注：</strong>{{ review.remark }}</p>
                    }
                    @if (review.operator) {
                      <p class="review-operator"><strong>录入人：</strong>{{ review.operator }}</p>
                    }
                  </div>
                  @if (review.followUpReminder) {
                    <div class="follow-up-reminder">
                      <mat-icon>schedule</mat-icon>
                      <span>跟进提醒：{{ formatDate(review.followUpReminder) }}</span>
                    </div>
                  }
                </div>
              }
            </div>
          } @else {
            <div class="empty-state">
              <mat-icon>star_border</mat-icon>
              <p>暂无评价记录</p>
            </div>
          }
        </div>
      
      <!-- 客户建议收集与处理模块 -->
      <!-- @if (activeDetailTab() === 'suggestion') { -->
        <div class="suggestion-management">
          <div class="module-header">
            <h3>客户建议收集与处理</h3>
          </div>
          
          @if (selectedProject()?.suggestions && selectedProject()?.suggestions!.length > 0) {
            <div class="suggestion-records">
              @for (suggestion of selectedProject()?.suggestions; track suggestion.id) {
                <div class="suggestion-record">
                  <div class="suggestion-header">
                    <span class="suggestion-category">{{ getSuggestionCategoryLabel(suggestion.category) }}</span>
                    <span class="suggestion-status" [class]="'status-' + suggestion.status">
                      {{ getSuggestionStatusText(suggestion.status) }}
                    </span>
                    <span class="suggestion-priority" [class]="'priority-' + suggestion.priority">
                      {{ suggestion.priority === 'high' ? '高优先级' : suggestion.priority === 'medium' ? '中优先级' : '低优先级' }}
                    </span>
                    <span class="suggestion-date">{{ formatDate(suggestion.submitDate) }}</span>
                  </div>
                  
                  <div class="suggestion-content">
                    <p><strong>建议内容：</strong>{{ suggestion.content }}</p>
                    @if (suggestion.assignee) {
                      <p><strong>处理人：</strong>{{ suggestion.assignee }}</p>
                    }
                    @if (suggestion.response) {
                      <div class="suggestion-response">
                        <p><strong>回复内容：</strong>{{ suggestion.response }}</p>
                        @if (suggestion.responseDate) {
                          <p><strong>回复时间：</strong>{{ formatDate(suggestion.responseDate) }}</p>
                        }
                      </div>
                    }
                  </div>
                  
                  <div class="suggestion-actions">
                    @if (suggestion.status !== 'completed' && suggestion.status !== 'rejected') {
                      <button mat-button (click)="showUpdateForm[suggestion.id] = !showUpdateForm[suggestion.id]">
                        <mat-icon>edit</mat-icon>
                        更新状态
                      </button>
                    }
                  </div>
                  
                  @if (showUpdateForm[suggestion.id]) {
                    <div class="update-form">
                      <div class="update-form-header">
                        <div class="header-content">
                          <mat-icon class="header-icon">edit_note</mat-icon>
                          <h5>更新处理状态</h5>
                        </div>
                        <button type="button" mat-icon-button class="close-button" (click)="showUpdateForm[suggestion.id] = false">
                          <mat-icon>close</mat-icon>
                        </button>
                      </div>
                      
                      <form #updateForm="ngForm" (ngSubmit)="updateSuggestionStatus(suggestion.id, updateForm.value.status, updateForm.value.response)" class="status-update-form">
                        <div class="form-grid">
                          <div class="form-row">
                            <mat-form-field class="ios-select status-field" appearance="outline">
                              <mat-label>处理状态</mat-label>
                              <mat-select name="status" [ngModel]="suggestion.status" required>
                                <mat-option value="pending">
                                  <div class="option-content status-option">
                                    <mat-icon class="status-icon pending">schedule</mat-icon>
                                    <div class="status-info">
                                      <span class="status-name">待处理</span>
                                      <small class="status-desc">等待分配处理人员</small>
                                    </div>
                                  </div>
                                </mat-option>
                                <mat-option value="processing">
                                  <div class="option-content status-option">
                                    <mat-icon class="status-icon processing">sync</mat-icon>
                                    <div class="status-info">
                                      <span class="status-name">处理中</span>
                                      <small class="status-desc">正在积极处理中</small>
                                    </div>
                                  </div>
                                </mat-option>
                                <mat-option value="completed">
                                  <div class="option-content status-option">
                                    <mat-icon class="status-icon completed">check_circle</mat-icon>
                                    <div class="status-info">
                                      <span class="status-name">已完成</span>
                                      <small class="status-desc">建议已采纳并实施</small>
                                    </div>
                                  </div>
                                </mat-option>
                                <mat-option value="rejected">
                                  <div class="option-content status-option">
                                    <mat-icon class="status-icon rejected">cancel</mat-icon>
                                    <div class="status-info">
                                      <span class="status-name">已拒绝</span>
                                      <small class="status-desc">建议不予采纳</small>
                                    </div>
                                  </div>
                                </mat-option>
                              </mat-select>
                            </mat-form-field>
                            
                            <mat-form-field class="assignee-field ios-select" appearance="outline">
              <mat-label>处理人员</mat-label>
              <mat-select name="assignee" [ngModel]="suggestion.assignee">
                <mat-option value="张三">
                  <div class="option-content">
                    <mat-icon>person</mat-icon>
                    <span>张三 - 客服主管</span>
                  </div>
                </mat-option>
                <mat-option value="李四">
                  <div class="option-content">
                    <mat-icon>person</mat-icon>
                    <span>李四 - 技术支持</span>
                  </div>
                </mat-option>
                <mat-option value="王五">
                  <div class="option-content">
                    <mat-icon>person</mat-icon>
                    <span>王五 - 产品经理</span>
                  </div>
                </mat-option>
              </mat-select>
            </mat-form-field>
                          </div>
                          
                          <mat-form-field class="full-width" appearance="outline">
                            <mat-label>处理回复</mat-label>
                            <textarea matInput rows="4" name="response" [ngModel]="suggestion.response" 
                                      placeholder="请详细说明处理结果、采取的措施或拒绝原因"></textarea>
                            <mat-hint>请提供详细的处理说明，便于后续跟踪</mat-hint>
                          </mat-form-field>
                        </div>
                        
                        <div class="form-actions">
                          <button type="button" mat-stroked-button (click)="showUpdateForm[suggestion.id] = false">
                            <mat-icon>close</mat-icon>
                            取消
                          </button>
                          <button type="submit" mat-raised-button color="primary" [disabled]="isSubmittingForm()">
                            <mat-icon>{{ isSubmittingForm() ? 'sync' : 'update' }}</mat-icon>
                            {{ isSubmittingForm() ? '更新中...' : '确认更新' }}
                          </button>
                        </div>
                      </form>
                    </div>
                  }
                  
                  @if (suggestion.statusHistory.length > 0) {
                    <div class="status-history">
                      <h5>处理记录</h5>
                      @for (history of suggestion.statusHistory; track history.id) {
                        <div class="history-item">
                          <span class="history-date">{{ formatDate(history.changeDate) }}</span>
                          <span class="history-operator">{{ history.operator }}</span>
                          <span class="history-status">{{ history.status }}</span>
                          <span class="history-remark">{{ history.remark }}</span>
                        </div>
                      }
                    </div>
                  }
                </div>
              }
            </div>
          } @else {
            <div class="empty-state">
              <mat-icon>feedback</mat-icon>
              <p>暂无客户建议</p>
            </div>
          }
        </div>
      </div>
    }