<header class="team-management-header">
  <h1>团队管理</h1>
</header>

<main class="team-management-main">
  <!-- 组员项目进度与排期 -->
  <section class="team-schedule-section">
    <div class="section-header">
      <h2>组员项目进度与排期</h2>
      <div class="search-filter">
        <input type="text" placeholder="搜索组员姓名..." [(ngModel)]="searchTerm">
        <select [(ngModel)]="filterProjectType">
          <option value="all">全部项目类型</option>
          <option value="soft">软装</option>
          <option value="hard">硬装</option>
        </select>
      </div>
    </div>
    
    <div class="team-schedule-tabs">
      <div class="tab-buttons">
        <button (click)="activeScheduleTab = 'all'" [class.active]="activeScheduleTab === 'all'">整体排期</button>
        <button (click)="activeScheduleTab = 'overdue'" [class.active]="activeScheduleTab === 'overdue'">超期任务</button>
      </div>
      
      <div class="tab-content">
        <div *ngIf="activeScheduleTab === 'all'" class="schedule-content">
          <div *ngFor="let designer of filteredDesigners" class="designer-schedule">
            <div class="designer-header">
              <h3>{{ designer.name }}</h3>
              <span [class]="'workload ' + getWorkloadClass(designer.workload)">{{ getWorkloadText(designer.workload) }}</span>
            </div>
            
            <div class="task-list">
              <div *ngFor="let task of getDesignerTasks(designer.id)" class="task-item" [class.overdue]="isTaskOverdue(task)">
                <div class="task-info">
                  <h4>{{ task.projectName }}</h4>
                  <div class="task-meta">
                    <span class="phase">{{ task.phase }}</span>
                    <span class="deadline">截止: {{ task.deadline | date:'yyyy-MM-dd' }}</span>
                  </div>
                </div>
                <div class="task-actions">
                  <button (click)="viewProjectDetails(task.projectId)" class="btn-view">查看详情</button>
                  <button (click)="adjustTaskPriority(task.id)" class="btn-adjust">调整优先级</button>
                </div>
              </div>
              
              <div *ngIf="getDesignerTasks(designer.id).length === 0" class="no-tasks">
                暂无任务
              </div>
            </div>
          </div>
        </div>
        
        <div *ngIf="activeScheduleTab === 'overdue'" class="overdue-content">
          <div class="overdue-list">
            <div *ngFor="let task of getOverdueTasks()" class="overdue-task">
              <div class="task-header">
                <h3>{{ task.projectName }}</h3>
                <span class="overdue-badge">超期 {{ getOverdueDays(task) }} 天</span>
              </div>
              
              <div class="task-details">
                <div class="detail-item">
                  <span class="label">负责组员:</span>
                  <span class="value">{{ getDesignerName(task.designerId) }}</span>
                </div>
                <div class="detail-item">
                  <span class="label">当前阶段:</span>
                  <span class="value">{{ task.phase }}</span>
                </div>
                <div class="detail-item">
                  <span class="label">原截止日期:</span>
                  <span class="value">{{ task.deadline | date:'yyyy-MM-dd' }}</span>
                </div>
              </div>
              
              <div class="task-actions">
                <button (click)="viewProjectDetails(task.projectId)" class="btn-view">查看详情</button>
                <button (click)="adjustTaskDeadline(task.id)" class="btn-adjust">调整截止日期</button>
              </div>
            </div>
            
            <div *ngIf="getOverdueTasks().length === 0" class="no-overdue">
              暂无超期任务
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- 组员能力看板 -->
  <section class="capability-board-section">
    <div class="section-header">
      <h2>组员能力看板</h2>
    </div>
    
    <div class="capability-tabs">
      <div class="tab-buttons">
        <button (click)="activeCapabilityTab = 'ranking'" [class.active]="activeCapabilityTab === 'ranking'">整体排行</button>
        <button (click)="activeCapabilityTab = 'detail'" [class.active]="activeCapabilityTab === 'detail'">单人看板</button>
      </div>
      
      <div class="tab-content">
        <!-- 整体排行 -->
        <div *ngIf="activeCapabilityTab === 'ranking'" class="ranking-content">
          <div class="ranking-section">
            <h3>能力分值排行</h3>
            <div class="ranking-list">
              <div *ngFor="let designer of getDesignersByCapability()" class="ranking-item">
                <div class="ranking-info">
                  <span class="rank">{{ getRank(designer.id) }}</span>
                  <span class="name">{{ designer.name }}</span>
                </div>
                <div class="capability-score">
                  <div class="score-bar">
                    <div class="score-fill" [style.width.px]="designer.capabilityScore * 2"></div>
                  </div>
                  <span class="score-value">{{ designer.capabilityScore }}分</span>
                </div>
              </div>
            </div>
          </div>
          
          <div class="ranking-section">
            <h3>作品满意度排行</h3>
            <div class="ranking-list">
              <div *ngFor="let designer of getDesignersBySatisfaction()" class="ranking-item">
                <div class="ranking-info">
                  <span class="rank">{{ getSatisfactionRank(designer.id) }}</span>
                  <span class="name">{{ designer.name }}</span>
                </div>
                <div class="satisfaction-score">
                  <div class="score-bar">
                    <div class="score-fill satisfaction" [style.width.px]="designer.satisfactionScore * 2"></div>
                  </div>
                  <span class="score-value">{{ designer.satisfactionScore }}分</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 单人看板 -->
        <div *ngIf="activeCapabilityTab === 'detail'" class="detail-content">
          <div class="designer-selector">
            <select [(ngModel)]="selectedDesignerId" (change)="onDesignerChange()">
              <option value="">选择组员</option>
              <option *ngFor="let designer of designers" [value]="designer.id">{{ designer.name }}</option>
            </select>
          </div>
          
          <div *ngIf="selectedDesigner" class="designer-detail">
            <!-- 雷达图 -->
            <div class="radar-chart-section">
              <h3>能力维度</h3>
              <div class="radar-chart">
                <!-- 这里应该是雷达图的实现，为了简化，使用模拟的雷达图 -->
                <svg width="300" height="300" viewBox="0 0 300 300">
                  <!-- 雷达图背景 -->
                  <circle cx="150" cy="150" r="120" fill="none" stroke="#e0e0e0" stroke-width="1"></circle>
                  <circle cx="150" cy="150" r="90" fill="none" stroke="#e0e0e0" stroke-width="1"></circle>
                  <circle cx="150" cy="150" r="60" fill="none" stroke="#e0e0e0" stroke-width="1"></circle>
                  <circle cx="150" cy="150" r="30" fill="none" stroke="#e0e0e0" stroke-width="1"></circle>
                  
                  <!-- 坐标轴 -->
                  <line x1="150" y1="30" x2="150" y2="270" stroke="#e0e0e0" stroke-width="1"></line>
                  <line x1="30" y1="150" x2="270" y2="150" stroke="#e0e0e0" stroke-width="1"></line>
                  <line x1="77" y1="77" x2="223" y2="223" stroke="#e0e0e0" stroke-width="1"></line>
                  <line x1="223" y1="77" x2="77" y2="223" stroke="#e0e0e0" stroke-width="1"></line>
                  
                  <!-- 能力点 -->
                  <polygon 
                    [attr.points]="selectedDesigner ? getRadarPoints(selectedDesigner) : ''" 
                    fill="rgba(0, 71, 171, 0.2)" 
                    stroke="#0047AB" 
                    stroke-width="2"
                  ></polygon>
                  
                  <!-- 能力标签 -->
                  <text x="150" y="20" text-anchor="middle" fill="#666">建模</text>
                  <text x="280" y="150" text-anchor="middle" fill="#666">渲染</text>
                  <text x="150" y="280" text-anchor="middle" fill="#666">软装</text>
                  <text x="20" y="150" text-anchor="middle" fill="#666">沟通</text>
                </svg>
              </div>
            </div>
            
            <!-- 项目经验 -->
            <div class="experience-section">
              <h3>项目经验</h3>
              <div class="experience-details">
                <div class="detail-item">
                    <span class="label">完成项目数量:</span>
                    <span class="value">{{ selectedDesigner.completedProjects }}个</span>
                  </div>
                <div class="detail-item">
                  <span class="label">擅长类型:</span>
                  <span class="value">{{ selectedDesigner ? getDesignerSkills(selectedDesigner) : '' }}</span>
                </div>
                <div class="detail-item">
                  <span class="label">难点项目经验:</span>
                  <span class="value">{{ selectedDesigner.difficultProjects }}个</span>
                </div>
              </div>
            </div>
            
            <!-- 接单少原因分析 -->
            <div *ngIf="selectedDesigner?.lowOrderReason" class="reason-analysis">
              <h3>接单少原因分析</h3>
              <p>{{ selectedDesigner.lowOrderReason }}</p>
            </div>
          </div>
          
          <div *ngIf="!selectedDesignerId" class="select-prompt">
            请选择一个组员查看详细信息
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- 绩效管理与721考核 -->
  <section class="performance-section">
    <div class="section-header">
      <h2>绩效管理与721考核</h2>
      <div class="quarter-selector">
        <select [(ngModel)]="selectedQuarter" (change)="onQuarterChange()">
          <option value="2023-Q4">2023年第四季度</option>
          <option value="2023-Q3">2023年第三季度</option>
          <option value="2023-Q2">2023年第二季度</option>
          <option value="2023-Q1">2023年第一季度</option>
        </select>
        <button (click)="generateReport()" class="btn-generate">生成考核报告</button>
      </div>
    </div>
    
    <div class="performance-content">
      <!-- 721分布 -->
      <div class="distribution-section">
        <h3>721考核分布</h3>
        <div class="distribution-chart">
          <div class="distribution-item top">
            <div class="distribution-header">
              <h4>头部 20%</h4>
              <span class="count">{{ getTopPerformers().length }}人</span>
            </div>
            <div class="distribution-list">
              <div *ngFor="let designer of getTopPerformers()" class="performer-item top">
                <span class="name">{{ designer.name }}</span>
                <span class="score">{{ designer.performanceScore }}分</span>
              </div>
            </div>
            <div class="distribution-actions">
              <button (click)="showPromotionCriteria()" class="btn-info">查看晋级条件</button>
            </div>
          </div>
          
          <div class="distribution-item middle">
            <div class="distribution-header">
              <h4>中部 70%</h4>
              <span class="count">{{ getMiddlePerformers().length }}人</span>
            </div>
            <div class="distribution-list">
              <div *ngFor="let designer of getMiddlePerformers()" class="performer-item middle">
                <span class="name">{{ designer.name }}</span>
                <span class="score">{{ designer.performanceScore }}分</span>
              </div>
            </div>
            <div class="distribution-actions">
              <button (click)="showImprovementSuggestions()" class="btn-info">查看提升建议</button>
            </div>
          </div>
          
          <div class="distribution-item bottom">
            <div class="distribution-header">
              <h4>尾部 10%</h4>
              <span class="count">{{ getBottomPerformers().length }}人</span>
            </div>
            <div class="distribution-list">
              <div *ngFor="let designer of getBottomPerformers()" class="performer-item bottom">
                <div class="bottom-item">
                  <span class="name">{{ designer.name }}</span>
                  <span class="score">{{ designer.performanceScore }}分</span>
                </div>
              </div>
            </div>
            <div class="distribution-actions">
              <button (click)="showRectificationPlan()" class="btn-info">查看整改计划</button>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 绩效详情 -->
      <div class="performance-detail-section">
        <h3>绩效详情</h3>
        <div class="performance-detail-list">
          <div *ngFor="let designer of designers" class="performance-detail-item">
            <div class="detail-header">
              <span class="name">{{ designer.name }}</span>
              <span class="total-score">{{ designer.performanceScore }}分</span>
            </div>
            <div class="score-breakdown">
              <div class="score-item">
                <span class="label">交付准时率 (30%):</span>
                <span class="value">{{ designer.onTimeRateScore }}分</span>
              </div>
              <div class="score-item">
                <span class="label">客户满意度 (40%):</span>
                <span class="value">{{ designer.satisfactionScore }}分</span>
              </div>
              <div class="score-item">
                <span class="label">作品优秀率 (40%):</span>
                <span class="value">{{ designer.excellentRateScore }}分</span>
              </div>
              <div class="score-item deduction">
                <span class="label">扣分项:</span>
                <span class="value">{{ designer.deductions }}分</span>
              </div>
            </div>
            <div class="performance-actions">
              <button (click)="viewPerformanceReport(designer.id)" class="btn-view">查看报告</button>
              <button (click)="syncToHR(designer.id)" class="btn-sync">同步至人事</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</main>