<div class="container">
  <header class="page-header">
    <h1>绩效考核</h1>
    <p class="subtitle">基于7-2-1原则，评估并展示团队成员的周期绩效</p>
  </header>

  <main class="main-content">
    <div class="toolbar">
      <div class="filters">
        <div class="filter-group">
          <i class="icon-calendar"></i>
          <select (change)="onFilterChange('quarter', $event)">
            <option value="2024-Q2">2024年第二季度</option>
            <option value="2024-Q1">2024年第一季度</option>
            <option value="2023-Q4">2023年第四季度</option>
          </select>
        </div>
      </div>
      <button class="btn-icon" (click)="exportReport()">
        <i class="icon-export"></i>
        <span>导出报告</span>
      </button>
    </div>

    <!-- 7-2-1 分布概览 -->
    <section class="distribution-overview">
      <div class="dist-card top-20">
        <div class="card-header">
          <h2>头部 20%</h2>
          <span class="count">{{ distribution.top.length }}人</span>
        </div>
        <div class="card-body">
          @for (designer of distribution.top; track designer.id) {
            <div class="designer-item">
              <span class="name">{{ designer.name }}</span>
              <span class="score">{{ designer.performanceScore }}分</span>
            </div>
          }
        </div>
        <div class="card-footer">
          <p>激励与晋升机会</p>
        </div>
      </div>

      <div class="dist-card middle-70">
        <div class="card-header">
          <h2>中部 70%</h2>
          <span class="count">{{ distribution.middle.length }}人</span>
        </div>
        <div class="card-body">
          @for (designer of distribution.middle; track designer.id) {
            <div class="designer-item">
              <span class="name">{{ designer.name }}</span>
              <span class="score">{{ designer.performanceScore }}分</span>
            </div>
          }
        </div>
        <div class="card-footer">
          <p>稳步发展与赋能</p>
        </div>
      </div>

      <div class="dist-card bottom-10">
        <div class="card-header">
          <h2>尾部 10%</h2>
          <span class="count">{{ distribution.bottom.length }}人</span>
        </div>
        <div class="card-body">
          @for (designer of distribution.bottom; track designer.id) {
            <div class="designer-item">
              <span class="name">{{ designer.name }}</span>
              <span class="score">{{ designer.performanceScore }}分</span>
            </div>
          }
        </div>
        <div class="card-footer">
          <p>辅导与改进计划</p>
        </div>
      </div>
    </section>

    <!-- 绩效详情列表 -->
    <section class="performance-details">
      <h2 class="section-title">绩效详情</h2>
      <div class="details-table">
        <div class="table-header">
          <div class="col-rank">排名</div>
          <div class="col-name">姓名</div>
          <div class="col-score">总分</div>
          <div class="col-delivery">交付准时率</div>
          <div class="col-quality">作品优秀率</div>
          <div class="col-satisfaction">客户满意度</div>
          <div class="col-actions">操作</div>
        </div>
        @if (sortedDesigners.length > 0) {
          <div class="table-body">
            @for (designer of sortedDesigners; track designer.id; let i = $index) {
              <div class="table-row">
                <div class="col-rank">{{ i + 1 }}</div>
                <div class="col-name">{{ designer.name }}</div>
                <div class="col-score">{{ designer.performanceScore }}</div>
                <div class="col-delivery">{{ designer.metrics.deliveryRate }}%</div>
                <div class="col-quality">{{ designer.metrics.qualityRate }}%</div>
                <div class="col-satisfaction">{{ designer.metrics.satisfactionRate }}%</div>
                <div class="col-actions">
                  <button class="btn-link" (click)="viewDetailReport(designer.id)">查看报告</button>
                </div>
              </div>
            }
          </div>
        } @else {
          <div class="empty-state">
            <p>当前季度暂无绩效数据</p>
          </div>
        }
      </div>
    </section>
  </main>
</div>