<header class="page-header">
  <h1>知识库与能力复制</h1>
</header>

<main class="knowledge-base-main">
  <!-- 全流程SOP管理 -->
  <section class="sop-management-section">
    <div class="section-header">
      <h2>全流程SOP管理</h2>
      <button (click)="addNewSOP()" class="btn-add">添加SOP</button>
    </div>
    
    <div class="sop-tabs">
      <div class="tab-buttons">
        <button (click)="activeSOPTab = 'overview'" [class.active]="activeSOPTab === 'overview'">概览</button>
        <button (click)="activeSOPTab = 'modeling'" [class.active]="activeSOPTab === 'modeling'">建模阶段</button>
        <button (click)="activeSOPTab = 'rendering'" [class.active]="activeSOPTab === 'rendering'">渲染阶段</button>
        <button (click)="activeSOPTab = 'postProduction'" [class.active]="activeSOPTab === 'postProduction'">后期阶段</button>
        <button (click)="activeSOPTab = 'delivery'" [class.active]="activeSOPTab === 'delivery'">交付阶段</button>
      </div>
      
      <div class="tab-content">
        <!-- SOP概览 -->
        <div *ngIf="activeSOPTab === 'overview'" class="sop-overview">
          <div class="sop-summary">
            <h3>标准作业流程总览</h3>
            <p>全流程SOP覆盖从方案到交付的完整环节，明确每个阶段的交付物要求、时间节点标准和质量验收指标。</p>
            <button (click)="exportFullSOP()" class="btn-export">导出完整SOP PDF</button>
          </div>
          
          <div class="sop-stages">
            <div class="stage-item" (click)="activeSOPTab = 'modeling'">
              <div class="stage-icon">1</div>
              <h4>建模阶段</h4>
              <p>3天内完成，误差≤2%</p>
            </div>
            <div class="stage-item" (click)="activeSOPTab = 'rendering'">
              <div class="stage-icon">2</div>
              <h4>渲染阶段</h4>
              <p>2-5天，真实度≥90%</p>
            </div>
            <div class="stage-item" (click)="activeSOPTab = 'postProduction'">
              <div class="stage-icon">3</div>
              <h4>后期阶段</h4>
              <p>1-2天，细节处理</p>
            </div>
            <div class="stage-item" (click)="activeSOPTab = 'delivery'">
              <div class="stage-icon">4</div>
              <h4>交付阶段</h4>
              <p>文档整理，客户确认</p>
            </div>
          </div>
        </div>
        
        <!-- 建模阶段SOP详情 -->
        <div *ngIf="activeSOPTab === 'modeling'" class="sop-detail">
          <div class="sop-header">
            <h3>建模阶段SOP</h3>
            <div class="sop-actions">
              <button (click)="editSOP('modeling')" class="btn-edit">编辑</button>
              <button (click)="exportSOP('modeling')" class="btn-export">导出PDF</button>
            </div>
          </div>
          
          <div class="sop-content">
            <div class="sop-section">
              <h4>交付物要求</h4>
              <ul class="requirement-list">
                <li>提交完整的3D模型文件（.max/.blend/.skp等格式）</li>
                <li>提供户型匹配度检查报告，误差≤2%</li>
                <li>材质贴图完整且正确命名</li>
                <li>灯光方案初步设置</li>
                <li>模型优化报告（面数、材质数量等）</li>
              </ul>
            </div>
            
            <div class="sop-section">
              <h4>时间节点标准</h4>
              <div class="timeline">
                <div class="timeline-item">
                  <span class="time-marker">Day 1</span>
                  <span class="task">完成基础建模和户型匹配</span>
                </div>
                <div class="timeline-item">
                  <span class="time-marker">Day 2</span>
                  <span class="task">完成细节建模和材质贴图</span>
                </div>
                <div class="timeline-item">
                  <span class="time-marker">Day 3</span>
                  <span class="task">完成灯光设置和模型优化</span>
                </div>
              </div>
            </div>
            
            <div class="sop-section">
              <h4>质量验收指标</h4>
              <table class="quality-table">
                <thead>
                  <tr>
                    <th>指标项</th>
                    <th>普通客户</th>
                    <th>优质客户</th>
                    <th>VIP客户</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>模型精度</td>
                    <td>≥95%</td>
                    <td>≥98%</td>
                    <td>≥99%</td>
                  </tr>
                  <tr>
                    <td>户型匹配度</td>
                    <td>≥98%</td>
                    <td>≥99%</td>
                    <td>100%</td>
                  </tr>
                  <tr>
                    <td>材质还原度</td>
                    <td>≥90%</td>
                    <td>≥95%</td>
                    <td>≥98%</td>
                  </tr>
                  <tr>
                    <td>面数控制</td>
                    <td>≤100万</td>
                    <td>≤150万</td>
                    <td>≤200万</td>
                  </tr>
                </tbody>
              </table>
            </div>
            
            <!-- 关联视频教程 -->
            <div class="sop-section">
              <h4>关联视频教程</h4>
              <div class="video-tutorials">
                <div *ngFor="let tutorial of getTutorialsByStage('modeling')" class="tutorial-item">
                  <div class="tutorial-thumbnail">
                    <img [src]="tutorial.thumbnail" alt="教程缩略图">
                    <span class="duration">{{ tutorial.duration }}</span>
                  </div>
                  <div class="tutorial-info">
                    <h5>{{ tutorial.title }}</h5>
                    <p>{{ tutorial.description }}</p>
                    <button (click)="playTutorial(tutorial.id)" class="btn-play">播放</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 渲染阶段SOP详情 -->
        <div *ngIf="activeSOPTab === 'rendering'" class="sop-detail">
          <div class="sop-header">
            <h3>渲染阶段SOP</h3>
            <div class="sop-actions">
              <button (click)="editSOP('rendering')" class="btn-edit">编辑</button>
              <button (click)="exportSOP('rendering')" class="btn-export">导出PDF</button>
            </div>
          </div>
          
          <div class="sop-content">
            <div class="sop-section">
              <h4>交付物要求</h4>
              <ul class="requirement-list">
                <li>提交高清渲染图（PSD+JPG格式）</li>
                <li>提供多角度渲染预览（至少3个角度）</li>
                <li>保留渲染参数文件</li>
                <li>渲染设置说明文档</li>
              </ul>
            </div>
            
            <div class="sop-section">
              <h4>时间节点标准</h4>
              <div class="timeline">
                <div class="timeline-item">
                  <span class="time-marker">Day 1-2</span>
                  <span class="task">完成测试渲染和参数调整</span>
                </div>
                <div class="timeline-item">
                  <span class="time-marker">Day 3-4</span>
                  <span class="task">完成大图渲染</span>
                </div>
                <div class="timeline-item">
                  <span class="time-marker">Day 5</span>
                  <span class="task">完成渲染图检查和整理</span>
                </div>
              </div>
            </div>
            
            <div class="sop-section">
              <h4>质量验收指标</h4>
              <table class="quality-table">
                <thead>
                  <tr>
                    <th>指标项</th>
                    <th>普通客户</th>
                    <th>优质客户</th>
                    <th>VIP客户</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>像素要求</td>
                    <td>≥800px</td>
                    <td>≥1200px</td>
                    <td>≥1600px</td>
                  </tr>
                  <tr>
                    <td>渲染真实度</td>
                    <td>≥90%</td>
                    <td>≥95%</td>
                    <td>≥98%</td>
                  </tr>
                  <tr>
                    <td>光影效果</td>
                    <td>自然</td>
                    <td>层次丰富</td>
                    <td>专业级</td>
                  </tr>
                </tbody>
              </table>
            </div>
            
            <!-- 关联视频教程 -->
            <div class="sop-section">
              <h4>关联视频教程</h4>
              <div class="video-tutorials">
                <div *ngFor="let tutorial of getTutorialsByStage('rendering')" class="tutorial-item">
                  <div class="tutorial-thumbnail">
                    <img [src]="tutorial.thumbnail" alt="教程缩略图">
                    <span class="duration">{{ tutorial.duration }}</span>
                  </div>
                  <div class="tutorial-info">
                    <h5>{{ tutorial.title }}</h5>
                    <p>{{ tutorial.description }}</p>
                    <button (click)="playTutorial(tutorial.id)" class="btn-play">播放</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 后期阶段SOP详情 -->
        <div *ngIf="activeSOPTab === 'postProduction'" class="sop-detail">
          <div class="sop-header">
            <h3>后期阶段SOP</h3>
            <div class="sop-actions">
              <button (click)="editSOP('postProduction')" class="btn-edit">编辑</button>
              <button (click)="exportSOP('postProduction')" class="btn-export">导出PDF</button>
            </div>
          </div>
          
          <div class="sop-content">
            <!-- 此处省略后期阶段SOP详情内容 -->
            <div class="sop-section">
              <h4>交付物要求</h4>
              <ul class="requirement-list">
                <li>提交最终效果图（JPG+PSD格式）</li>
                <li>提供不同尺寸版本（用于不同场景）</li>
                <li>保留分层文件</li>
              </ul>
            </div>
            
            <!-- 关联视频教程 -->
            <div class="sop-section">
              <h4>关联视频教程</h4>
              <div class="video-tutorials">
                <div *ngFor="let tutorial of getTutorialsByStage('postProduction')" class="tutorial-item">
                  <div class="tutorial-thumbnail">
                    <img [src]="tutorial.thumbnail" alt="教程缩略图">
                    <span class="duration">{{ tutorial.duration }}</span>
                  </div>
                  <div class="tutorial-info">
                    <h5>{{ tutorial.title }}</h5>
                    <p>{{ tutorial.description }}</p>
                    <button (click)="playTutorial(tutorial.id)" class="btn-play">播放</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 交付阶段SOP详情 -->
        <div *ngIf="activeSOPTab === 'delivery'" class="sop-detail">
          <div class="sop-header">
            <h3>交付阶段SOP</h3>
            <div class="sop-actions">
              <button (click)="editSOP('delivery')" class="btn-edit">编辑</button>
              <button (click)="exportSOP('delivery')" class="btn-export">导出PDF</button>
            </div>
          </div>
          
          <div class="sop-content">
            <!-- 此处省略交付阶段SOP详情内容 -->
            <div class="sop-section">
              <h4>交付物要求</h4>
              <ul class="requirement-list">
                <li>提交完整的效果图文件包</li>
                <li>提供项目总结报告</li>
                <li>客户确认单</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  
  <!-- 视频教程库 -->
  <section class="video-tutorial-section">
    <div class="section-header">
      <h2>视频教程库</h2>
      <div class="search-filter">
        <input type="text" placeholder="搜索教程名称..." [(ngModel)]="searchQuery">
        <select [(ngModel)]="filterStage">
          <option value="all">全部阶段</option>
          <option value="modeling">建模阶段</option>
          <option value="rendering">渲染阶段</option>
          <option value="postProduction">后期阶段</option>
        </select>
      </div>
    </div>
    
    <div class="tutorial-grid">
      <div *ngFor="let tutorial of filteredTutorials" class="tutorial-card">
        <div class="tutorial-thumbnail">
          <img [src]="tutorial.thumbnail" alt="教程缩略图">
          <span class="duration">{{ tutorial.duration }}</span>
        </div>
        <div class="tutorial-info">
          <h4>{{ tutorial.title }}</h4>
          <p class="tutorial-description">{{ tutorial.description }}</p>
          <div class="tutorial-meta">
            <span class="stage-tag">{{ getStageLabel(tutorial.stage) }}</span>
            <span class="view-count">{{ tutorial.views }}次观看</span>
            <span class="upload-date">{{ tutorial.uploadDate | date:'yyyy-MM-dd' }}</span>
          </div>
          <button (click)="playTutorial(tutorial.id)" class="btn-play">播放</button>
        </div>
      </div>
    </div>
    
    <!-- 分页 -->
    <div class="pagination">
      <button (click)="previousPage()" [disabled]="currentPage === 1" class="btn-prev">上一页</button>
      <span class="page-info">第 {{ currentPage }} 页，共 {{ totalPages }} 页</span>
      <button (click)="nextPage()" [disabled]="currentPage === totalPages" class="btn-next">下一页</button>
    </div>
  </section>
  
  <!-- 实践考核 -->
  <section class="assessment-section">
    <div class="section-header">
      <h2>实践考核</h2>
      <button (click)="createAssessment()" class="btn-create">创建考核任务</button>
    </div>
    
    <div class="assessment-tabs">
      <div class="tab-buttons">
        <button (click)="activeAssessmentTab = 'pending'" [class.active]="activeAssessmentTab === 'pending'">待分配考核</button>
        <button (click)="activeAssessmentTab = 'ongoing'" [class.active]="activeAssessmentTab === 'ongoing'">进行中考核</button>
        <button (click)="activeAssessmentTab = 'completed'" [class.active]="activeAssessmentTab === 'completed'">已完成考核</button>
      </div>
      
      <div class="tab-content">
        <!-- 待分配考核 -->
        <div *ngIf="activeAssessmentTab === 'pending'" class="assessment-list">
          <div *ngFor="let assessment of pendingAssessments" class="assessment-item">
            <div class="assessment-header">
              <h3>{{ assessment.title }}</h3>
              <span class="assessment-stage">{{ getStageLabel(assessment.stage) }}</span>
            </div>
            <div class="assessment-info">
              <p>{{ assessment.description }}</p>
              <div class="assessment-meta">
                <span class="difficulty">{{ getDifficultyLabel(assessment.difficulty) }}</span>
                <span class="duration">预计耗时: {{ assessment.expectedDuration }}小时</span>
              </div>
            </div>
            <div class="assessment-actions">
              <button (click)="assignAssessment(assessment.id)" class="btn-assign">分配考核</button>
              <button (click)="previewAssessment(assessment.id)" class="btn-preview">预览</button>
            </div>
          </div>
        </div>
        
        <!-- 进行中考核 -->
        <div *ngIf="activeAssessmentTab === 'ongoing'" class="assessment-list">
          <div *ngFor="let assessment of ongoingAssessments" class="assessment-item">
            <div class="assessment-header">
              <h3>{{ assessment.title }}</h3>
              <span class="assessment-stage">{{ getStageLabel(assessment.stage) }}</span>
            </div>
            <div class="assessment-info">
              <p>{{ assessment.description }}</p>
              <div class="assessment-meta">
                <span class="assignee">被考核人: {{ assessment.assigneeName }}</span>
                <span class="deadline">截止日期: {{ assessment.deadline | date:'yyyy-MM-dd' }}</span>
                <span class="status">状态: {{ getStatusLabel(assessment.status) }}</span>
              </div>
            </div>
            <div class="assessment-actions">
              <button (click)="viewSubmission(assessment.id)" class="btn-view">查看提交</button>
              <button (click)="extendDeadline(assessment.id)" class="btn-extend">延长截止日期</button>
            </div>
          </div>
        </div>
        
        <!-- 已完成考核 -->
        <div *ngIf="activeAssessmentTab === 'completed'" class="assessment-list">
          <div *ngFor="let assessment of completedAssessments" class="assessment-item">
            <div class="assessment-header">
              <h3>{{ assessment.title }}</h3>
              <span class="assessment-stage">{{ getStageLabel(assessment.stage) }}</span>
            </div>
            <div class="assessment-info">
              <p>{{ assessment.description }}</p>
              <div class="assessment-meta">
                <span class="assignee">被考核人: {{ assessment.assigneeName }}</span>
                <span class="completion-date">完成日期: {{ assessment.completionDate | date:'yyyy-MM-dd' }}</span>
                <span class="score">得分: {{ assessment.score }}分</span>
              </div>
              <div class="assessment-result" [class.pass]="assessment.result === 'pass'" [class.fail]="assessment.result === 'fail'">
                {{ assessment.result === 'pass' ? '通过' : '未通过' }}
              </div>
            </div>
            <div class="assessment-actions">
              <button (click)="viewAssessmentReport(assessment.id)" class="btn-view">查看报告</button>
              <button (click)="syncToCapability(assessment.id)" class="btn-sync">同步至能力看板</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  
  <!-- 培训效果跟踪 -->
  <section class="training-effect-section">
    <div class="section-header">
      <h2>培训效果跟踪</h2>
      <button (click)="generateEffectReport()" class="btn-generate">生成效果报告</button>
    </div>
    
    <div class="effect-metrics">
      <div class="metric-card">
        <h3>平均学习时长</h3>
        <p class="metric-value">{{ averageLearningHours }}小时</p>
        <p class="metric-change" [class.positive]="learningHoursChange > 0" [class.negative]="learningHoursChange < 0">
          {{ learningHoursChange > 0 ? '+' : '' }}{{ learningHoursChange }}% 较上期
        </p>
      </div>
      
      <div class="metric-card">
        <h3>考核通过率</h3>
        <p class="metric-value">{{ passRate }}%</p>
        <p class="metric-change" [class.positive]="passRateChange > 0" [class.negative]="passRateChange < 0">
          {{ passRateChange > 0 ? '+' : '' }}{{ passRateChange }}% 较上期
        </p>
      </div>
      
      <div class="metric-card">
        <h3>修改率下降</h3>
        <p class="metric-value">{{ revisionRateReduction }}%</p>
        <p class="metric-description">培训后项目修改率下降</p>
      </div>
      
      <div class="metric-card">
        <h3>客户满意度提升</h3>
        <p class="metric-value">{{ satisfactionImprovement }}%</p>
        <p class="metric-description">培训后客户满意度提升</p>
      </div>
    </div>
    
    <div class="effect-charts">
      <div class="chart-container">
        <h3>培训参与度趋势</h3>
        <div class="chart-placeholder">
          <!-- 这里应该是培训参与度趋势图 -->
          <svg width="500" height="300" viewBox="0 0 500 300">
            <rect x="50" y="50" width="400" height="200" fill="#f5f5f5" stroke="#ddd"/>
            <text x="250" y="150" text-anchor="middle" fill="#999">培训参与度趋势图</text>
          </svg>
        </div>
      </div>
      
      <div class="chart-container">
        <h3>考核成绩分布</h3>
        <div class="chart-placeholder">
          <!-- 这里应该是考核成绩分布图 -->
          <svg width="500" height="300" viewBox="0 0 500 300">
            <rect x="50" y="50" width="400" height="200" fill="#f5f5f5" stroke="#ddd"/>
            <text x="250" y="150" text-anchor="middle" fill="#999">考核成绩分布图</text>
          </svg>
        </div>
      </div>
    </div>
  </section>
</main>