import { Component, Input, signal, computed } from '@angular/core';
import { CommonModule } from '@angular/common';

// 定义流程阶段状态接口
export interface ProcessStatusStage {
  id: string;
  name: string;
  status: 'pending' | 'in-progress' | 'completed';
}

@Component({
  selector: 'app-process-status-bar',
  standalone: true,
  imports: [CommonModule],
  template: `
    <div class="process-status-bar">
      @for (stage of stages(); track stage.id; let i = $index) {
        <div class="status-item" 
             [class.status-completed]="stage.status === 'completed'"
             [class.status-in-progress]="stage.status === 'in-progress'"
             [class.status-pending]="stage.status === 'pending'">
          <span class="status-text">{{ stage.name }}</span>
        </div>
        @if (i < stages().length - 1) {
          <div class="status-separator"></div>
        }
      }
    </div>
  `,
  styleUrls: ['./process-status-bar.component.scss']
})
export class ProcessStatusBarComponent {
  @Input() set stageData(value: ProcessStatusStage[]) {
    console.log('ProcessStatusBarComponent 接收到数据:', value);
    this.stages.set(value || []);
  }

  // 内部状态管理
  stages = signal<ProcessStatusStage[]>([]);

  constructor() {
    console.log('ProcessStatusBarComponent 构造函数被调用');
  }
}