<div class="personal-board-container">
  <header class="personal-board-header">
    <h1>个人看板</h1>
  </header>

  <main class="personal-board-main">
    <!-- 能力看板区域 -->
    <section class="skill-board-section">
      <div class="section-header">
        <h2>能力看板</h2>
        <p>根据项目经验自动更新的技能标签</p>
      </div>
      
      <div class="skill-tags-container">
        <div *ngFor="let tag of skillTags" class="skill-tag" [class.level-high]="tag.level >= 4" [class.level-medium]="tag.level >= 2 && tag.level < 4">
          <span class="tag-name">{{ tag?.name }}</span>
          <div class="tag-level">
            <div class="level-bar">
              <div class="level-fill" [style.width.%]="tag?.level ? (tag.level / 5) * 100 : 0"></div>
            </div>
            <span class="level-text">{{ tag?.level }}/5</span>
          </div>
          <span class="tag-count">{{ tag?.count }}个项目</span>
        </div>
      </div>
     

      <!-- 匹配订单推荐 -->
      <div class="matching-orders-section">
        <h3>推荐匹配订单</h3>
        <div class="order-list">
          <div *ngIf="matchingOrders.length === 0" class="empty-state">
            暂无匹配订单
          </div>
          
          <div *ngFor="let order of matchingOrders" class="order-item">
            <div class="order-header">
              <h4>{{ order.projectName }}</h4>
              <span class="match-rate" [class.high-match]="order.matchRate >= 80" [class.medium-match]="order.matchRate >= 60 && order.matchRate < 80">
                匹配度 {{ order.matchRate }}%
              </span>
            </div>
            <div class="order-info">
              <div class="required-skills">
                <span *ngFor="let skill of order.requiredSkills" class="skill-badge">{{ skill }}</span>
              </div>
              <span class="customer-level" [class.premium]="order.customerLevel === '优质'">
                {{ order.customerLevel }}客户
              </span>
            </div>
            <button (click)="acceptOrder(order.id)" class="btn-accept-order">
              是否接单？
            </button>
          </div>
        </div>
      </div>
    </section>

    <!-- 结算统计区域 -->
    <section class="settlement-section">
      <div class="section-header">
        <h2>结算统计</h2>
        <p>按阶段计算的待结算金额</p>
      </div>
      
      <div class="settlement-summary">
        <div class="summary-item">
          <h3>总结算金额</h3>
          <p class="amount total" *ngIf="!isJuniorDesigner">{{ totalSettlementAmount | currency:'CNY':'symbol':'1.0-0' }}</p>
          <p class="amount total" *ngIf="isJuniorDesigner">--</p>
        </div>
        <div class="summary-item">
          <h3>待结算金额</h3>
          <p class="amount pending" *ngIf="!isJuniorDesigner">{{ pendingSettlementAmount | currency:'CNY':'symbol':'1.0-0' }}</p>
          <p class="amount pending" *ngIf="isJuniorDesigner">--</p>
        </div>
        <button (click)="viewSettlementDetails()" class="btn-view-details">
          查看明细
        </button>
      </div>
      
      <div class="settlement-details">
        <h3>结算明细</h3>
        <table class="settlement-table">
          <thead>
            <tr>
              <th>项目名称</th>
              <th>结算阶段</th>
              <th>比例</th>
              <th *ngIf="!isJuniorDesigner">金额</th>
              <th *ngIf="isJuniorDesigner">状态</th>
              <th *ngIf="!isJuniorDesigner">状态</th>
              <th>创建日期</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngIf="settlements.length === 0">
              <td colspan="6" class="empty-row">暂无结算记录</td>
            </tr>
            <tr *ngFor="let settlement of settlements">
              <td>{{ '项目' + settlement?.projectId }}</td>
              <td>{{ settlement.stage }}</td>
              <td>{{ settlement.percentage }}%</td>
              <td *ngIf="!isJuniorDesigner">{{ settlement.amount | currency:'CNY':'symbol':'1.0-0' }}</td>
              <td *ngIf="isJuniorDesigner">{{ settlement.status }}</td>
              <td *ngIf="!isJuniorDesigner">
                <span class="status-badge" [class.settled]="settlement.status === '已结算'">
                  {{ settlement.status }}
                </span>
              </td>
              <td>{{ settlement.createdAt | date:'yyyy-MM-dd' }}</td>
            </tr>
          </tbody>
        </table>
      </div>
      
      <!-- 结算比例说明 -->
      <div class="settlement-rules">
        <h3>结算比例规则</h3>
        <div class="rule-item">
          <span class="stage-name">建模</span>
          <div class="stage-bar">
            <div class="stage-fill" style="width: 30%;">30%</div>
          </div>
        </div>
        <div class="rule-item">
          <span class="stage-name">渲染</span>
          <div class="stage-bar">
            <div class="stage-fill" style="width: 50%;">50%</div>
          </div>
        </div>
        <div class="rule-item">
          <span class="stage-name">后期</span>
          <div class="stage-bar">
            <div class="stage-fill" style="width: 20%;">20%</div>
          </div>
        </div>
      </div>
    </section>

    <!-- 绩效趋势区域 -->
    <section class="performance-section">
      <div class="section-header">
        <h2>绩效趋势</h2>
        <p>项目完成率/客户满意度/交付准时率</p>
      </div>
      
      <div class="performance-chart">
        <div #performanceChart style="width: 100%; height: 300px; position: relative;"></div>
      </div>
    </section>
  </main>
</div>