<div class="proposal-confirm-card">
  <!-- 卡片头部 -->
  <div class="card-header">
    <div class="header-left">
      <h3 class="card-title">方案确认</h3>
      <div class="progress-indicator">
        <div class="progress-bar">
          <div class="progress-fill" [style.width.%]="getProgressPercentage()"></div>
        </div>
        <span class="progress-text">{{ getProgressPercentage() | number:'1.0-0' }}% 完成</span>
      </div>
    </div>
    <div class="header-right">
      <button class="btn btn-secondary" (click)="toggle3DPreview()" [class.active]="show3DPreview">
        <i class="icon-3d"></i> 3D预览
      </button>
      <button class="btn btn-secondary" (click)="toggleCADOverlay()" [class.active]="showCADOverlay">
        <i class="icon-cad"></i> CAD叠加
      </button>
    </div>
  </div>

  <!-- 标签页导航 -->
  <div class="tab-navigation">
    <button class="tab-btn" 
            [class.active]="activeTab === 'overview'" 
            (click)="switchTab('overview')">
      概览
    </button>
    <button class="tab-btn" 
            [class.active]="activeTab === 'versions'" 
            (click)="switchTab('versions')">
      版本对比
    </button>
    <button class="tab-btn" 
            [class.active]="activeTab === 'details'" 
            (click)="switchTab('details')">
      详细方案
    </button>
    <button class="tab-btn" 
            [class.active]="activeTab === 'collaboration'" 
            (click)="switchTab('collaboration')">
      协作批注
    </button>
    <button class="tab-btn" 
            [class.active]="activeTab === 'confirmation'" 
            (click)="switchTab('confirmation')">
      确认流程
    </button>
  </div>

  <!-- 标签页内容 -->
  <div class="tab-content">
    
    <!-- 概览标签页 -->
    @if (activeTab === 'overview') {
      <div class="overview-content">
        <!-- 当前选中版本概览 -->
        @if (selectedVersion) {
          <div class="version-overview">
            <div class="version-header">
              <h4>{{ selectedVersion.name }}</h4>
              <span class="version-badge">当前方案</span>
            </div>
            <p class="version-description">{{ selectedVersion.description }}</p>
            
            <div class="version-metrics">
              <div class="metric-item">
                <span class="metric-label">主色调</span>
                <div class="color-preview" [style.background-color]="'rgb(' + selectedVersion.mainColor.rgb + ')'"></div>
                <span class="metric-value">{{ selectedVersion.mainColor.colorTemp }}</span>
              </div>
              <div class="metric-item">
                <span class="metric-label">预算</span>
                <span class="metric-value">¥{{ selectedVersion.budget | number }}</span>
              </div>
              <div class="metric-item">
                <span class="metric-label">工期</span>
                <span class="metric-value">{{ selectedVersion.workDays }}天</span>
              </div>
            </div>

            <!-- 材质比例图表 -->
            <div class="material-chart">
              <h5>材质比例</h5>
              <div class="chart-container">
                @for (material of selectedVersion.materialRatio; track material.material) {
                  <div class="material-bar">
                    <span class="material-name">{{ material.material }}</span>
                    <div class="bar-container">
                      <div class="bar-fill" [style.width.%]="material.percentage"></div>
                    </div>
                    <span class="material-percentage">{{ material.percentage }}%</span>
                  </div>
                }
              </div>
            </div>
          </div>
        }

        <!-- 3D预览区域 -->
        @if (show3DPreview) {
          <div class="preview-3d">
            <div class="preview-header">
              <h4>3D方案预览</h4>
              <button class="btn btn-close" (click)="toggle3DPreview()">
                <i class="icon-close"></i>
              </button>
            </div>
            <div class="preview-container">
              <div class="preview-placeholder">
                <i class="icon-3d-preview"></i>
                <p>3D预览加载中...</p>
                <small>支持鼠标拖拽查看全景</small>
              </div>
            </div>
          </div>
        }

        <!-- CAD叠加区域 -->
        @if (showCADOverlay) {
          <div class="cad-overlay">
            <div class="overlay-controls">
              <label class="overlay-toggle">
                <input type="checkbox" checked>
                <span>显示CAD结构线</span>
              </label>
              <div class="legend">
                <span class="legend-item load-bearing">承重柱</span>
                <span class="legend-item furniture">家具区域</span>
                <span class="legend-item flow">人流动线</span>
              </div>
            </div>
          </div>
        }
        <div class="quick-actions">
          <button class="btn btn-primary" (click)="switchTab('versions')">
            <i class="icon-compare"></i> 版本对比
          </button>
          <button class="btn btn-primary" (click)="switchTab('details')">
            <i class="icon-detail"></i> 查看详情
          </button>
          <button class="btn btn-success" (click)="switchTab('confirmation')">
            <i class="icon-confirm"></i> 开始确认
          </button>
        </div>
      </div>
    }

    <!-- 版本对比标签页 -->
    @if (activeTab === 'versions') {
      <div class="versions-content">
        <!-- 版本选择器 -->
        <div class="version-selector">
          <h4>选择方案版本</h4>
          <div class="version-grid">
            @for (version of proposalVersions; track version.id) {
              <div class="version-card" 
                   [class.selected]="version.isSelected"
                   (click)="selectVersion(version)">
                <div class="version-preview">
                  @if (version.preview) {
                    <img [src]="version.preview" [alt]="version.name">
                  } @else {
                    <div class="preview-placeholder">
                      <i class="icon-image"></i>
                    </div>
                  }
                </div>
                <div class="version-info">
                  <h5>{{ version.name }}</h5>
                  <p>{{ version.description }}</p>
                  <div class="version-stats">
                    <span class="stat">¥{{ version.budget | number }}</span>
                    <span class="stat">{{ version.workDays }}天</span>
                  </div>
                  <div class="preference-actions">
                    <button class="preference-btn like" 
                            (click)="markPreference('version', version.id, 'like')"
                            title="喜欢这个版本">
                      <i class="icon-heart"></i>
                    </button>
                    <button class="preference-btn dislike" 
                            (click)="markPreference('version', version.id, 'dislike')"
                            title="不喜欢这个版本">
                      <i class="icon-heart-broken"></i>
                    </button>
                  </div>
                </div>
              </div>
            }
          </div>
        </div>

        <!-- 版本对比功能 -->
        <div class="comparison-controls">
          <button class="btn btn-secondary" (click)="toggleVersionComparison()">
            <i class="icon-compare"></i> 
            {{ showVersionComparison ? '隐藏对比' : '显示对比' }}
          </button>
        </div>

        @if (showVersionComparison && comparisonVersions) {
          <div class="version-comparison">
            <div class="comparison-header">
              <h4>版本对比分析</h4>
              <button class="btn btn-secondary" (click)="showVersionComparison = false">
                <i class="icon-close"></i> 关闭对比
              </button>
            </div>
            
            <div class="comparison-table">
              <div class="comparison-row header">
                <div class="field-name">对比项目</div>
                <div class="version-a">{{ comparisonVersions.versionA.name }}</div>
                <div class="version-b">{{ comparisonVersions.versionB.name }}</div>
                <div class="difference">差异</div>
              </div>
              
              @if (versionDifferences) {
                @for (diff of versionDifferences | keyvalue; track diff.key) {
                  <div class="comparison-row" 
                       [attr.data-field]="diff.key"
                       (click)="highlightDifferences(diff.key)">
                    <div class="field-name">{{ diff.value.field }}</div>
                    <div class="version-a">{{ diff.value.valueA }}</div>
                    <div class="version-b">{{ diff.value.valueB }}</div>
                    <div class="difference" 
                         [class.increase]="diff.value.type === 'increase'"
                         [class.decrease]="diff.value.type === 'decrease'"
                         [class.different]="diff.value.type === 'different'"
                         [class.same]="diff.value.type === 'same'">
                      @if (diff.value.type === 'increase') {
                        <i class="icon-arrow-up"></i> +{{ diff.value.difference }}
                      } @else if (diff.value.type === 'decrease') {
                        <i class="icon-arrow-down"></i> {{ diff.value.difference }}
                      } @else if (diff.value.type === 'different') {
                        <i class="icon-different"></i> 不同
                      } @else {
                        <i class="icon-same"></i> 相同
                      }
                    </div>
                  </div>
                }
              }
            </div>
            
            <div class="comparison-summary">
              <h5>对比总结</h5>
              <div class="summary-cards">
                <div class="summary-card budget">
                  <i class="icon-money"></i>
                  <div class="summary-content">
                    <span class="label">预算差异</span>
                    <span class="value">¥{{ (comparisonVersions.versionB.budget - comparisonVersions.versionA.budget) | number }}</span>
                  </div>
                </div>
                <div class="summary-card timeline">
                  <i class="icon-time"></i>
                  <div class="summary-content">
                    <span class="label">工期差异</span>
                    <span class="value">{{ comparisonVersions.versionB.workDays - comparisonVersions.versionA.workDays }}天</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        }
      </div>
    }

    <!-- 详细方案标签页 -->
    @if (activeTab === 'details' && quantifiedProposal) {
      <div class="details-content">
        
        <!-- 空间功能模块 -->
        <div class="detail-section">
          <h4>
            <i class="icon-space"></i> 空间功能模块
            @if (getSpaceModulesVerified()) {
              <span class="status-badge verified">已验证</span>
            }
          </h4>
          @for (module of quantifiedProposal.spaceModules; track module.id) {
            <div class="space-module">
              <div class="module-header">
                <h5>{{ module.name }}</h5>
                <span class="requirements-tag">{{ module.requirements }}</span>
              </div>
              <div class="furniture-list">
                @for (furniture of module.furniture; track furniture.name) {
                  <div class="furniture-item">
                    <div class="furniture-info">
                      <h6>{{ furniture.name }}</h6>
                      <div class="furniture-specs">
                        <span class="spec">尺寸: {{ furniture.size }}</span>
                        <span class="spec">材质: {{ furniture.material }}</span>
                        <span class="spec">颜色: {{ furniture.color }}</span>
                        @if (furniture.price) {
                          <span class="spec price">¥{{ furniture.price | number }}</span>
                        }
                      </div>
                      <div class="furniture-features">
                        @for (feature of furniture.features; track feature) {
                          <span class="feature-tag">{{ feature }}</span>
                        }
                      </div>
                    </div>
                  </div>
                }
              </div>
            </div>
          }
        </div>

        <!-- 色彩与质感模块 -->
        <div class="detail-section">
          <h4>
            <i class="icon-color"></i> 色彩与质感
            @if (quantifiedProposal.colorAndTexture.verified) {
              <span class="status-badge verified">已验证</span>
            }
          </h4>
          <div class="color-texture-content">
            <div class="main-color-info">
              <h5>主色调</h5>
              <div class="color-display">
                <div class="color-preview large" 
                     [style.background-color]="'rgb(' + quantifiedProposal.colorAndTexture.mainColor.rgb + ')'">
                </div>
                <div class="color-details">
                  <span>RGB: {{ quantifiedProposal.colorAndTexture.mainColor.rgb }}</span>
                  <span>色温: {{ quantifiedProposal.colorAndTexture.mainColor.colorTemp }}</span>
                </div>
              </div>
            </div>

            <div class="material-ratios">
              <h5>材质比例</h5>
              @for (material of quantifiedProposal.colorAndTexture.materialRatio; track material.material) {
                <div class="material-item">
                  <span class="material-name">{{ material.material }}</span>
                  <div class="ratio-bar">
                    <div class="ratio-fill" [style.width.%]="material.percentage"></div>
                  </div>
                  <span class="ratio-value">{{ material.percentage }}%</span>
                </div>
              }
            </div>

            <div class="color-samples">
              <h5>色彩样本对比</h5>
              @for (sample of quantifiedProposal.colorAndTexture.colorSamples; track sample.name) {
                <div class="sample-comparison">
                  <span class="sample-name">{{ sample.name }}</span>
                  <div class="sample-colors">
                    <div class="sample-color">
                      <div class="color-preview" [style.background-color]="'rgb(' + sample.rgb + ')'"></div>
                      <span>参考色</span>
                    </div>
                    <div class="sample-color">
                      <div class="color-preview" [style.background-color]="'rgb(' + sample.actual + ')'"></div>
                      <span>实际方案色</span>
                      <button class="btn btn-sm btn-secondary" 
                              (click)="adjustColorSample(sample.name, sample.actual)">
                        <i class="icon-edit"></i> 调整
                      </button>
                    </div>
                    <div class="difference-indicator">
                      <span class="difference-value" 
                            [class.good]="sample.difference <= 5"
                            [class.warning]="sample.difference > 5 && sample.difference <= 10"
                            [class.error]="sample.difference > 10">
                        差异度: {{ sample.difference }}%
                      </span>
                    </div>
                  </div>
                </div>
              }
            </div>
          </div>
        </div>

        <!-- 结构适配模块 -->
        <div class="detail-section">
          <h4>
            <i class="icon-structure"></i> 结构适配
            @if (quantifiedProposal.structuralAdaptation.verified) {
              <span class="status-badge verified">已验证</span>
            }
          </h4>
          <div class="structural-content">
            <div class="constraints-section">
              <h5>结构约束</h5>
              @for (constraint of quantifiedProposal.structuralAdaptation.constraints; track constraint.position) {
                <div class="constraint-item" [class]="constraint.type">
                  <div class="constraint-icon">
                    <i [class]="'icon-' + constraint.type"></i>
                  </div>
                  <div class="constraint-info">
                    <span class="constraint-type">{{ constraint.type === 'load-bearing' ? '承重柱' : constraint.type }}</span>
                    <span class="constraint-position">位置: {{ constraint.position }}</span>
                    <span class="constraint-size">尺寸: {{ constraint.size }}</span>
                    <span class="constraint-status" 
                          [class.changeable]="constraint.changeable"
                          [class.fixed]="!constraint.changeable">
                      {{ constraint.changeable ? '可调整' : '不可改动' }}
                    </span>
                  </div>
                </div>
              }
            </div>

            <div class="adaptations-section">
              <h5>适配方案</h5>
              @for (adaptation of quantifiedProposal.structuralAdaptation.adaptations; track adaptation.area) {
                <div class="adaptation-item">
                  <div class="adaptation-area">{{ adaptation.area }}</div>
                  <div class="adaptation-solution">{{ adaptation.solution }}</div>
                  <div class="adaptation-flow">人流动线宽度: {{ adaptation.flowWidth }}</div>
                  <div class="compliance-status" 
                       [class.compliant]="adaptation.compliance"
                       [class.non-compliant]="!adaptation.compliance">
                    {{ adaptation.compliance ? '符合标准' : '需要调整' }}
                  </div>
                </div>
              }
            </div>
          </div>
        </div>

        <!-- 可行性验证模块 -->
        <div class="detail-section">
          <h4>
            <i class="icon-verify"></i> 可行性验证
            @if (quantifiedProposal.feasibilityVerification.verified) {
              <span class="status-badge verified">已验证</span>
            }
          </h4>
          <div class="feasibility-content">
            <div class="verification-item">
              <h5>结构可行性</h5>
              <div class="status-indicator" [class]="quantifiedProposal.feasibilityVerification.structural.status">
                <i [class]="'icon-' + quantifiedProposal.feasibilityVerification.structural.status"></i>
                <span>{{ quantifiedProposal.feasibilityVerification.structural.message }}</span>
              </div>
            </div>

            <div class="verification-item">
              <h5>成本与工期</h5>
              <div class="cost-timeline">
                <div class="cost-info">
                  <span class="label">预算:</span>
                  <span class="value">¥{{ quantifiedProposal.feasibilityVerification.cost.budget | number }}</span>
                </div>
                <div class="timeline-info">
                  <span class="label">采购周期:</span>
                  <span class="value">{{ quantifiedProposal.feasibilityVerification.cost.timeline }}</span>
                </div>
                @if (quantifiedProposal.feasibilityVerification.cost.risks.length > 0) {
                  <div class="risks-section">
                    <h6>风险提示</h6>
                    @for (risk of quantifiedProposal.feasibilityVerification.cost.risks; track risk) {
                      <div class="risk-item">
                        <i class="icon-warning"></i>
                        <span>{{ risk }}</span>
                      </div>
                    }
                  </div>
                }
              </div>
            </div>

            <div class="verification-item">
              <h5>工期安排</h5>
              <div class="timeline-phases">
                @for (phase of quantifiedProposal.feasibilityVerification.timeline.phases; track phase.name) {
                  <div class="phase-item">
                    <div class="phase-name">{{ phase.name }}</div>
                    <div class="phase-duration">{{ phase.days }}天</div>
                    @if (phase.dependencies.length > 0) {
                      <div class="phase-dependencies">
                        依赖: {{ phase.dependencies.join(', ') }}
                      </div>
                    }
                  </div>
                }
              </div>
              <div class="total-timeline">
                总工期: {{ quantifiedProposal.feasibilityVerification.timeline.totalDays }}天
              </div>
            </div>
          </div>
        </div>
      </div>
    }

    <!-- 协作批注标签页 -->
    @if (activeTab === 'collaboration') {
      <div class="collaboration-content">
        <!-- 批注工具栏 -->
        <div class="annotation-toolbar">
          <form [formGroup]="annotationForm" class="annotation-form">
            <select formControlName="type" class="form-control">
              <option value="question">疑问</option>
              <option value="suggestion">建议</option>
              <option value="confirmation">确认</option>
            </select>
            <div class="input-with-mentions">
              <input type="text" 
                     formControlName="content" 
                     placeholder="输入批注内容，使用@提及用户..." 
                     class="form-control"
                     (input)="onContentInput($event)">
              @if (showMentionSuggestions) {
                <div class="mention-suggestions">
                  @for (user of filteredMentionUsers; track user.id) {
                    <div class="mention-item" (click)="selectMention(user)">
                      <span class="user-name">{{ user.name }}</span>
                      <span class="user-role">{{ user.role }}</span>
                    </div>
                  }
                </div>
              }
            </div>
            <button type="button" 
                    (click)="addAnnotation($event)"
                    [disabled]="!annotationForm.valid"
                    class="btn btn-primary">
              <i class="icon-comment"></i> 添加批注
            </button>
          </form>
        </div>

        <!-- 批注列表 -->
        <div class="annotations-list">
          <h4>协作批注 ({{ annotations.length }})</h4>
          @if (annotations.length === 0) {
            <div class="empty-state">
              <i class="icon-comment"></i>
              <p>暂无批注，点击上方添加批注开始协作</p>
            </div>
          } @else {
            @for (annotation of annotations; track annotation.id) {
              <div class="annotation-item" [class]="annotation.status">
                <div class="annotation-header">
                  <div class="author-info">
                    <span class="author-name" [class]="getRoleClass(annotation.role)">
                      {{ annotation.author }}
                    </span>
                    <span class="annotation-type">{{ annotation.type === 'question' ? '疑问' : annotation.type === 'suggestion' ? '建议' : '确认' }}</span>
                    <span class="annotation-time">{{ annotation.timestamp | date:'MM-dd HH:mm' }}</span>
                  </div>
                  <div class="annotation-actions">
                    @if (annotation.status === 'open') {
                      <button class="btn btn-sm btn-success" (click)="resolveAnnotation(annotation.id)">
                        解决
                      </button>
                    } @else {
                      <span class="status-badge resolved">已解决</span>
                    }
                  </div>
                </div>
                <div class="annotation-content">
                  <span [innerHTML]="formatContentWithMentions(annotation.content)"></span>
                  @if (annotation.position) {
                    <div class="annotation-position">
                      <i class="icon-location"></i>
                      <small>位置: {{ annotation.position.element }} ({{ annotation.position.x }}, {{ annotation.position.y }})</small>
                    </div>
                  }
                </div>
                @if (annotation.replies.length > 0) {
                  <div class="annotation-replies">
                    @for (reply of annotation.replies; track reply.id) {
                      <div class="reply-item">
                        <div class="reply-header">
                          <span class="reply-author" [class]="getRoleClass(reply.role)">{{ reply.author }}</span>
                          <span class="reply-time">{{ reply.timestamp | date:'MM-dd HH:mm' }}</span>
                        </div>
                        <div class="reply-content">
                          <span [innerHTML]="formatContentWithMentions(reply.content)"></span>
                        </div>
                      </div>
                    }
                  </div>
                }
                @if (annotation.status === 'open') {
                  <div class="reply-form">
                    <input type="text" 
                           #replyInput
                           placeholder="回复批注..." 
                           class="form-control">
                    <button class="btn btn-sm btn-secondary" 
                            (click)="replyToAnnotation(annotation.id, replyInput.value, replyInput)">
                      回复
                    </button>
                  </div>
                }
              </div>
            }
          }
        </div>
      </div>
    }

    <!-- 确认流程标签页 -->
    @if (activeTab === 'confirmation') {
      <div class="confirmation-content">
        <div class="confirmation-header">
          <h4>方案确认流程</h4>
          <div class="overall-progress">
            <div class="progress-circle">
              <svg viewBox="0 0 36 36" class="circular-chart">
                <path class="circle-bg"
                      d="M18 2.0845
                         a 15.9155 15.9155 0 0 1 0 31.831
                         a 15.9155 15.9155 0 0 1 0 -31.831"
                />
                <path class="circle"
                      [style.stroke-dasharray]="getProgressPercentage() + ', 100'"
                      d="M18 2.0845
                         a 15.9155 15.9155 0 0 1 0 31.831
                         a 15.9155 15.9155 0 0 1 0 -31.831"
                />
                <text x="18" y="20.35" class="percentage">{{ getProgressPercentage() | number:'1.0-0' }}%</text>
              </svg>
            </div>
            <div class="progress-info">
              <span class="progress-label">整体进度</span>
              <span class="progress-description">
                {{ getConfirmedRequiredCount() }} / 
                {{ getRequiredCount() }} 项已确认
              </span>
            </div>
          </div>
        </div>

        <!-- 确认步骤列表 -->
        <div class="confirmation-steps">
          @for (step of confirmationSteps; track step.id) {
            <div class="confirmation-step" [class]="getStatusClass(step.status)">
              <div class="step-indicator">
                <div class="step-number">{{ $index + 1 }}</div>
                @if (step.status === 'confirmed') {
                  <i class="icon-check"></i>
                } @else if (step.status === 'rejected') {
                  <i class="icon-close"></i>
                } @else {
                  <i class="icon-pending"></i>
                }
              </div>
              <div class="step-content">
                <div class="step-header">
                  <h5>{{ step.name }}</h5>
                  @if (step.required) {
                    <span class="required-badge">必需</span>
                  }
                  @if (step.timestamp) {
                    <span class="step-time">{{ step.timestamp | date:'MM-dd HH:mm' }}</span>
                  }
                </div>
                <p class="step-description">{{ step.description }}</p>
                <div class="step-actions">
                  @if (step.status === 'pending') {
                    <button class="btn btn-success" (click)="confirmStep(step.id)">
                      <i class="icon-check"></i> 确认
                    </button>
                    <button class="btn btn-danger" (click)="showRejectDialog(step.id)">
                      <i class="icon-close"></i> 拒绝
                    </button>
                  } @else if (step.status === 'rejected') {
                    <button class="btn btn-success" (click)="confirmStep(step.id)">
                      <i class="icon-check"></i> 重新确认
                    </button>
                    @if (step.rejectionReason) {
                      <div class="rejection-reason">
                        <small>拒绝原因：{{ step.rejectionReason }}</small>
                      </div>
                    }
                  } @else {
                    <span class="status-text confirmed">已确认</span>
                    @if (step.confirmedAt) {
                      <small class="confirm-time">{{ step.confirmedAt | date:'yyyy-MM-dd HH:mm' }}</small>
                    }
                  }
                </div>
              </div>
            </div>
          }
        </div>

        <!-- 最终确认按钮 -->
        <div class="final-confirmation">
          @if (allStepsConfirmed) {
            <div class="confirmation-ready">
              <div class="ready-message">
                <i class="icon-success"></i>
                <h4>所有必需项目已确认完成</h4>
                <p>您可以进行最终确认，确认后将进入设计执行阶段</p>
              </div>
              @if (!isFinalConfirmed) {
                <button class="btn btn-primary btn-large" (click)="finalConfirm()">
                  <i class="icon-confirm"></i> 最终确认方案
                </button>
              } @else {
                <div class="final-confirmed">
                  <i class="icon-check-circle"></i>
                  <span>方案已最终确认</span>
                  <small>确认时间：{{ finalConfirmedAt | date:'yyyy-MM-dd HH:mm:ss' }}</small>
                </div>
              }
              <button class="btn btn-secondary" (click)="exportConfirmationReport()">
                <i class="icon-download"></i> 导出确认报告
              </button>
            </div>
          } @else {
            <div class="confirmation-pending">
              <div class="pending-message">
                <i class="icon-warning"></i>
                <h4>请完成所有必需确认项目</h4>
                <p>还有 {{ getRequiredUnconfirmedCount() }} 项必需内容需要确认</p>
              </div>
            </div>
          }
        </div>
      </div>
    }
  </div>

  <!-- 方案调整面板 -->
  @if (isAdjusting) {
    <div class="adjustment-panel">
      <div class="panel-header">
        <h4>方案调整</h4>
        <button class="btn btn-close" (click)="isAdjusting = false">
          <i class="icon-close"></i>
        </button>
      </div>
      <form [formGroup]="adjustmentForm" class="adjustment-form">
        <div class="form-group">
          <label>调整元素</label>
          <select formControlName="element" class="form-control">
            <option value="furniture">家具</option>
            <option value="color">色彩</option>
            <option value="material">材质</option>
            <option value="layout">布局</option>
          </select>
        </div>
        <div class="form-group">
          <label>调整参数</label>
          <input type="text" formControlName="parameter" class="form-control" placeholder="如：沙发尺寸">
        </div>
        <div class="form-group">
          <label>新值</label>
          <input type="text" formControlName="value" class="form-control" placeholder="如：2.5m×1.6m">
        </div>
        <div class="form-group">
          <label>调整原因</label>
          <textarea formControlName="reason" class="form-control" placeholder="说明调整原因..."></textarea>
        </div>
        <div class="form-actions">
          <button type="button" 
                  (click)="adjustProposal()" 
                  [disabled]="!adjustmentForm.valid"
                  class="btn btn-primary">
            应用调整
          </button>
          <button type="button" (click)="isAdjusting = false" class="btn btn-secondary">
            取消
          </button>
        </div>
      </form>
    </div>
  }

  <!-- 版本历史面板 -->
  @if (versionHistory.length > 0) {
    <div class="version-history">
      <h4>版本历史</h4>
      <div class="history-list">
        @for (historyItem of versionHistory; track $index) {
          <div class="history-item">
            <div class="history-time">{{ historyItem.timestamp | date:'MM-dd HH:mm' }}</div>
            <div class="history-actions">
              <button class="btn btn-sm btn-secondary" (click)="restoreVersion($index)">
                恢复此版本
              </button>
            </div>
          </div>
        }
      </div>
    </div>
  }

  <!-- 浮动操作按钮 -->
  <div class="floating-actions">
    <button class="fab" (click)="isAdjusting = true" title="调整方案">
      <i class="icon-edit"></i>
    </button>
    <button class="fab" (click)="showVersionHistory = !showVersionHistory" title="版本历史">
      <i class="icon-history"></i>
    </button>
  </div>
</div>

<!-- 拒绝原因对话框 -->
@if (showRejectReasonDialog) {
  <div class="modal-overlay" (click)="closeRejectDialog()">
    <div class="modal-dialog" (click)="$event.stopPropagation()">
      <div class="modal-header">
        <h4>拒绝原因</h4>
        <button class="btn btn-close" (click)="closeRejectDialog()">
          <i class="icon-close"></i>
        </button>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label>请说明拒绝原因：</label>
          <textarea 
            [(ngModel)]="rejectionReason" 
            class="form-control" 
            rows="4"
            placeholder="请详细说明拒绝的原因...">
          </textarea>
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-danger" (click)="confirmReject()">
          <i class="icon-close"></i> 确认拒绝
        </button>
        <button class="btn btn-secondary" (click)="closeRejectDialog()">
          取消
        </button>
      </div>
    </div>
  </div>
}

<!-- 确认历史对话框 -->
@if (showConfirmationHistory) {
  <div class="modal-overlay" (click)="showConfirmationHistory = false">
    <div class="modal-dialog large" (click)="$event.stopPropagation()">
      <div class="modal-header">
        <h4>确认历史记录</h4>
        <button class="btn btn-close" (click)="showConfirmationHistory = false">
          <i class="icon-close"></i>
        </button>
      </div>
      <div class="modal-body">
        <div class="history-timeline">
          @for (record of confirmationHistory; track record.id) {
            <div class="timeline-item" [class]="record.action">
              <div class="timeline-marker">
                @if (record.action === 'confirmed') {
                  <i class="icon-check"></i>
                } @else if (record.action === 'rejected') {
                  <i class="icon-close"></i>
                } @else {
                  <i class="icon-info"></i>
                }
              </div>
              <div class="timeline-content">
                <div class="timeline-header">
                  <span class="action-text">{{ getActionText(record.action) }}</span>
                  <span class="timestamp">{{ record.timestamp | date:'yyyy-MM-dd HH:mm:ss' }}</span>
                </div>
                <div class="timeline-details">
                  <strong>{{ record.stepName }}</strong>
                  @if (record.reason) {
                    <p>{{ record.reason }}</p>
                  }
                  @if (record.operator) {
                    <small>操作人：{{ record.operator }}</small>
                  }
                </div>
              </div>
            </div>
          }
        </div>
      </div>
    </div>
  </div>
}