<header class="quality-management-header">
  <div class="header-content">
    <div class="header-left">
      <div class="header-icon">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M9 12L11 14L15 10M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </div>
      <div class="header-text">
        <h1>质量管理</h1>
        <p class="header-subtitle">确保项目质量标准，提升团队专业能力</p>
      </div>
    </div>
    <div class="header-actions">
      <button class="btn-secondary header-btn">
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M14 2L8 8L2 2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        导出报告
      </button>
      <button class="btn-primary header-btn">
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M8 2V14M2 8H14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        新建任务
      </button>
    </div>
  </div>
  
  <!-- 统计卡片 -->
  <div class="stats-cards">
    <div class="stat-card">
      <div class="stat-icon pending">
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
          <circle cx="10" cy="10" r="8" stroke="currentColor" stroke-width="2"/>
          <path d="M10 6V10L13 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </div>
      <div class="stat-content">
        <div class="stat-number">12</div>
        <div class="stat-label">待处理任务</div>
      </div>
    </div>
    
    <div class="stat-card">
      <div class="stat-icon processing">
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M10 2V6M10 14V18M18 10H14M6 10H2M15.5 4.5L12.5 7.5M7.5 12.5L4.5 15.5M15.5 15.5L12.5 12.5M7.5 7.5L4.5 4.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </div>
      <div class="stat-content">
        <div class="stat-number">8</div>
        <div class="stat-label">处理中</div>
      </div>
    </div>
    
    <div class="stat-card">
      <div class="stat-icon completed">
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M6 10L8.5 12.5L14 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          <circle cx="10" cy="10" r="8" stroke="currentColor" stroke-width="2"/>
        </svg>
      </div>
      <div class="stat-content">
        <div class="stat-number">24</div>
        <div class="stat-label">已完成</div>
      </div>
    </div>
    
    <div class="stat-card">
      <div class="stat-icon quality">
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M10 2L12.5 7L18 7.5L14 11L15 17L10 14.5L5 17L6 11L2 7.5L7.5 7L10 2Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
        </svg>
      </div>
      <div class="stat-content">
        <div class="stat-number">96%</div>
        <div class="stat-label">质量达标率</div>
      </div>
    </div>
  </div>
</header>

<main class="quality-management-main">
  <!-- 质量验收标准（SOP落地） -->
  <section class="sop-section">
    <div class="section-header">
      <div class="section-title">
        <div class="section-icon">
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M9 12L11 14L15 10M19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10C1 5.02944 5.02944 1 10 1C14.9706 1 19 5.02944 19 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </div>
        <div>
          <h2>质量验收标准 (SOP)</h2>
          <p class="section-description">确保每个阶段的交付质量符合标准要求</p>
        </div>
      </div>
      <button (click)="exportSOP()" class="btn-export">
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M14 10V12.6667C14 13.0203 13.8595 13.3594 13.6095 13.6095C13.3594 13.8595 13.0203 14 12.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V10M11.3333 6.66667L8 3.33333M8 3.33333L4.66667 6.66667M8 3.33333V10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        导出 PDF
      </button>
    </div>
    
    <div class="sop-tabs">
      <div class="tab-buttons">
          <button (click)="activeTab = 'modeling'" [class.active]="activeTab === 'modeling'" class="tab-button">
            <div class="tab-icon">
              <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M2 2L16 2V16L2 16V2Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M6 6L12 6M6 9L12 9M6 12L9 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </div>
            <span>建模阶段</span>
          </button>
          <button (click)="activeTab = 'rendering'" [class.active]="activeTab === 'rendering'" class="tab-button">
            <div class="tab-icon">
              <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M9 1L11.5 6L17 6.5L13 10L14 16L9 13.5L4 16L5 10L1 6.5L6.5 6L9 1Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
              </svg>
            </div>
            <span>渲染阶段</span>
          </button>
          <button (click)="activeTab = 'postProduction'" [class.active]="activeTab === 'postProduction'" class="tab-button">
            <div class="tab-icon">
              <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M9 2V9L13 13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                <circle cx="9" cy="9" r="7" stroke="currentColor" stroke-width="1.5"/>
              </svg>
            </div>
            <span>后期阶段</span>
          </button>
        </div>
      
      <div class="tab-content">
        <!-- 建模阶段标准 -->
        @if (activeTab === 'modeling') {
        <div class="phase-content">
          <div class="sop-section">
            <h3>交付物要求</h3>
            <ul class="requirement-list">
              <li>提交完整的3D模型文件</li>
              <li>提供户型匹配度检查报告，误差≤2%</li>
              <li>材质贴图完整且正确命名</li>
              <li>灯光方案初步设置</li>
            </ul>
          </div>
          
          <div class="sop-section">
            <h3>质量验收指标</h3>
            <table class="quality-table">
              <thead>
                <tr>
                  <th>指标项</th>
                  <th>普通客户</th>
                  <th>优质客户</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>模型精度</td>
                  <td>≥95%</td>
                  <td>≥98%</td>
                </tr>
                <tr>
                  <td>户型匹配度</td>
                  <td>≥98%</td>
                  <td>≥99%</td>
                </tr>
                <tr>
                  <td>材质还原度</td>
                  <td>≥90%</td>
                  <td>≥95%</td>
                </tr>
              </tbody>
            </table>
          </div>
          
          <div class="sop-section">
            <h3>整改规则</h3>
            <ul class="rule-list">
              <li>质量不达标项需24小时内修改</li>
              <li>修改超2次需组长复核</li>
              <li>重大错误（如户型严重不符）需重新建模</li>
            </ul>
          </div>
        </div>
        }
        
        
        <!-- 渲染阶段标准 -->
        @if (activeTab === 'rendering') {
        <div class="phase-content">
          <div class="sop-section">
            <h3>交付物要求</h3>
            <ul class="requirement-list">
              <li>提交高清渲染图（PSD+JPG）</li>
              <li>提供多角度渲染预览（至少3个角度）</li>
              <li>保留渲染参数文件</li>
            </ul>
          </div>
          
          <div class="sop-section">
            <h3>质量验收指标</h3>
            <table class="quality-table">
              <thead>
                <tr>
                  <th>指标项</th>
                  <th>普通客户</th>
                  <th>优质客户</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>像素要求</td>
                  <td>≥800px</td>
                  <td>≥1200px</td>
                </tr>
                <tr>
                  <td>真实度</td>
                  <td>≥90%</td>
                  <td>≥95%</td>
                </tr>
                <tr>
                  <td>光影效果</td>
                  <td>自然流畅</td>
                  <td>专业级光影处理</td>
                </tr>
              </tbody>
            </table>
          </div>
          
          <div class="sop-section">
            <h3>整改规则</h3>
            <ul class="rule-list">
              <li>渲染效果不满意项需18小时内修改</li>
              <li>修改超3次需重新设计灯光方案</li>
              <li>客户特殊要求需单独确认</li>
            </ul>
          </div>
        </div>
        }
        
        <!-- 后期阶段标准 -->
        @if (activeTab === 'postProduction') {
        <div class="phase-content">
          <div class="sop-section">
            <h3>交付物要求</h3>
            <ul class="requirement-list">
              <li>提交最终效果图（JPG+PNG透明底）</li>
              <li>提供颜色校正前后对比图</li>
              <li>保留PSD源文件</li>
            </ul>
          </div>
          
          <div class="sop-section">
            <h3>质量验收指标</h3>
            <table class="quality-table">
              <thead>
                <tr>
                  <th>指标项</th>
                  <th>普通客户</th>
                  <th>优质客户</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>色彩准确度</td>
                  <td>符合设计稿</td>
                  <td>专业级色彩管理</td>
                </tr>
                <tr>
                  <td>细节处理</td>
                  <td>无明显瑕疵</td>
                  <td>精细处理每一处细节</td>
                </tr>
                <tr>
                  <td>文件格式</td>
                  <td>JPG (300dpi)</td>
                  <td>JPG+PNG (350dpi)</td>
                </tr>
              </tbody>
            </table>
          </div>
          
          <div class="sop-section">
            <h3>整改规则</h3>
            <ul class="rule-list">
              <li>后期处理不满意项需12小时内修改</li>
              <li>颜色偏差需重新进行色彩校正</li>
              <li>最终交付需客户确认签字</li>
            </ul>
          </div>
        </div>
        }
      </div>
    </div>
  </section>
  
  <!-- 质量整改跟踪 -->
  <section class="rectification-section">
    <div class="section-header">
      <div class="section-title">
        <div class="title-icon">
          <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </div>
        <div class="title-content">
          <h2>质量整改跟踪</h2>
          <p>实时监控项目质量问题的整改进度和完成情况</p>
        </div>
      </div>
      <div class="section-actions">
        <button class="export-btn">
          <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4m4-5l5-5 5 5m-5-5v12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
          导出报告
        </button>
      </div>
    </div>
    
    <div class="search-filter-modern">
      <div class="search-input-wrapper">
        <svg class="search-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2"/>
          <path d="m21 21-4.35-4.35" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        <input type="text" placeholder="搜索项目名称或负责人..." [(ngModel)]="searchTerm">
      </div>
      <div class="filter-dropdown">
        <select [(ngModel)]="filterStatus">
          <option value="all">全部状态</option>
          <option value="pending">待处理</option>
          <option value="processing">处理中</option>
          <option value="review">待审核</option>
          <option value="completed">已完成</option>
        </select>
        <svg class="dropdown-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="m6 9 6 6 6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </div>
    </div>
    
    <div class="rectification-grid">
      @for (task of filteredTasks; track task.id) {
      <div class="rectification-card" [class.priority-high]="task.priority === 'high'" [class.priority-medium]="task.priority === 'medium'" [class.priority-low]="task.priority === 'low'">
        <div class="card-header">
          <div class="project-info">
            <div class="project-avatar">
              <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M9 1v6m6-6v6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </div>
            <div class="project-details">
              <h4>{{ task.projectName }}</h4>
              <p class="project-designer">{{ task.designerName }}</p>
            </div>
          </div>
          <div class="status-badge" [class]="'status-' + task.status">
            <div class="status-indicator"></div>
            <span>{{ getStatusText(task.status) }}</span>
          </div>
        </div>
        
        <div class="rectification-details">
          <div class="detail-item">
            <span class="detail-label">负责组员:</span>
            <span class="detail-value">{{ task.designerName }}</span>
          </div>
          <div class="detail-item">
            <span class="detail-label">问题描述:</span>
            <span class="detail-value">{{ task.issueDescription }}</span>
          </div>
          <div class="detail-item">
            <span class="detail-label">优先级:</span>
            <span class="detail-value priority-{{ task.priority }}">{{ getPriorityText(task.priority) }}</span>
          </div>
          <div class="detail-item">
            <span class="detail-label">建议完成时间:</span>
            <span class="detail-value">{{ task.suggestedDeadline | date:'yyyy-MM-dd' }}</span>
          </div>
          
          @if (task.sopComplianceScore !== null) {
          <div class="detail-item">
            <span class="detail-label">SOP符合度评分:</span>
            <span class="detail-value score">{{ task.sopComplianceScore }}/100</span>
          </div>
          }
          
          @if (task.managerComment) {
          <div class="detail-item">
            <span class="detail-label">组长评语:</span>
            <span class="detail-value">{{ task.managerComment }}</span>
          </div>
          }
        </div>
        
        <div class="rectification-actions">
          <button (click)="viewTaskDetails(task.id)" class="btn">查看详情</button>
          
          @if (task.status === 'review') {
          <div>
            <button (click)="approveTask(task.id)" class="btn btn-primary">通过</button>
            <button (click)="rejectTask(task.id)" class="btn">驳回</button>
          </div>
          }
          
          @if (task.status === 'completed') {
          <div>
            <button (click)="syncToProjectReview(task.id)" class="btn btn-primary">同步至项目评审</button>
          </div>
          }
        </div>
      </div>
      }
    </div>
  </section>

  <!-- 能力提升工具集成 -->
  <section class="training-section">
    <div class="section-header">
      <div class="section-title">
        <div class="title-icon">
          <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </div>
        <div class="title-content">
          <h2>能力提升工具</h2>
          <p>通过视频教程和实践作业提升团队技能，确保SOP标准执行</p>
        </div>
      </div>
      <div class="section-actions">
        <button class="progress-btn">
          <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M9 19c-5 0-8-3-8-8s3-8 8-8 8 3 8 8-3 8-8 8z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M9 9h.01M9 13h.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
          学习进度
        </button>
      </div>
    </div>
    
    <div class="training-content">
      <!-- 视频教程区域 -->
      <div class="video-tutorials">
        <div class="subsection-header">
          <div class="subsection-title">
            <div class="subsection-icon">
              <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </div>
            <h3>视频教程</h3>
          </div>
          <button class="view-all-btn">
            <span>查看全部</span>
            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="m9 18 6-6-6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </button>
        </div>
        <div class="video-grid">
          @for (video of videoTutorials; track video.id) {
          <div class="video-card" (click)="playVideo(video)" (mouseenter)="video.isHovered = true" (mouseleave)="video.isHovered = false">
            <div class="video-thumbnail-container">
              <div class="video-thumbnail">
                <img [src]="video.thumbnailUrl" [alt]="video.title" class="thumbnail-img">
                <div class="video-duration">{{ video.duration }}</div>
                <div class="play-overlay" [class.visible]="true">
                  <button class="play-button">
                    <svg viewBox="0 0 24 24">
                      <path d="M8 5v14l11-7z"/>
                    </svg>
                  </button>
                </div>
              </div>
            </div>
            <div class="video-info">
              <span class="category-badge">{{ video.category }}</span>
              <h4 class="video-title">{{ video.title }}</h4>
              <p class="video-description">{{ video.description }}</p>
              <div class="video-meta">
                <span class="views">{{ video.views }} 次观看</span>
                <span class="date">{{ video.date }}</span>
              </div>
            </div>
          </div>
          }
        </div>
      </div>
      
      <!-- 实践作业区域 -->
      <div class="practice-assignments">
        <div class="subsection-header">
          <div class="subsection-title">
            <div class="subsection-icon">
              <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M14 2v6h6M16 13H8M16 17H8M10 9H8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </div>
            <h3>实践作业</h3>
          </div>
          <button class="view-all-btn">
            <span>查看全部</span>
            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="m9 18 6-6-6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </button>
        </div>
        <div class="assignment-grid">
          @for (assignment of practiceAssignments; track assignment.id) {
          <div class="assignment-card" (click)="openAssignment(assignment)">
            <div class="assignment-header">
              <div class="assignment-icon">
                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </div>
              <div class="assignment-meta">
                <span class="difficulty-badge" [class]="'difficulty-' + assignment.difficulty">{{ assignment.difficulty }}</span>
                <span class="assignment-type">{{ assignment.type }}</span>
              </div>
            </div>
            <div class="assignment-content">
              <h4 class="assignment-title">{{ assignment.title }}</h4>
              <p class="assignment-description">{{ assignment.description }}</p>
              <div class="assignment-progress">
                <div class="progress-bar">
                  <div class="progress-fill" [style.width.%]="assignment.progress"></div>
                </div>
                <span class="progress-text">{{ assignment.progress }}%</span>
              </div>
            </div>
            <div class="assignment-footer">
              <div class="assignment-stats">
                <span class="deadline">{{ assignment.deadline | date:'yyyy-MM-dd' }}</span>
                <span class="points">{{ assignment.points }} 积分</span>
              </div>
              <button class="start-btn" [class.completed]="assignment.progress === 100">
                <span>{{ assignment.progress === 100 ? '已完成' : '开始练习' }}</span>
                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M8 5v14l11-7z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </button>
            </div>
          </div>
          }
        </div>
      </div>
    </div>
  </section>
</main>