yss-project/src/modules/project/components/project-progress-modal/project-progress-modal.component.ts

import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { ProjectSpaceDeliverableSummary, PhaseProgressInfo } from '../../services/project-space-deliverable.service';
import { PHASE_INFO, PhaseName } from '../../../../app/models/project-phase.model';

/**
 * 项目进度详情弹窗组件（独立组件）
 * 
 * 功能：
 * - 显示项目的整体进度统计
 * - 按阶段展示完成情况（建模、软装、渲染、后期）
 * - 显示未完成的空间列表和负责人
 * - 提供问题提交入口
 * 
 * 使用场景：
 * - 项目时间轴页面
 * - 项目详情页面
 * - 其他需要查看项目进度的地方
 */
@Component({
  selector: 'app-project-progress-modal',
  standalone: true,
  imports: [CommonModule, FormsModule, RouterModule],
  templateUrl: './project-progress-modal.component.html',
  styleUrl: './project-progress-modal.component.scss'
})
export class ProjectProgressModalComponent implements OnInit {
  @Input() summary: ProjectSpaceDeliverableSummary | null = null;
  @Input() visible: boolean = false;
  @Input() companyId: string = ''; // 🆕 公司ID，用于项目详情页导航
  @Output() close = new EventEmitter<void>();
  @Output() reportIssue = new EventEmitter<string>(); // 提交问题，传递项目ID

  // 当前选中的阶段（用于展开/收起详情）
  selectedPhase: PhaseName | null = null;

  // 阶段常量
  readonly PHASE_INFO = PHASE_INFO;

  ngOnInit(): void {
    console.log('📊 项目进度弹窗初始化', this.summary);
  }

  /**
   * 关闭弹窗
   */
  onClose(): void {
    this.close.emit();
  }

  /**
   * 阻止点击弹窗内容时关闭
   */
  onContentClick(event: MouseEvent): void {
    event.stopPropagation();
  }

  /**
   * 切换阶段展开/收起
   */
  togglePhase(phaseName: PhaseName): void {
    this.selectedPhase = this.selectedPhase === phaseName ? null : phaseName;
  }

  /**
   * 判断阶段是否展开
   */
  isPhaseExpanded(phaseName: PhaseName): boolean {
    return this.selectedPhase === phaseName;
  }

  /**
   * 获取阶段列表
   */
  getPhases(): Array<{ name: PhaseName; info: PhaseProgressInfo }> {
    if (!this.summary?.phaseProgress) return [];

    return [
      { name: 'modeling', info: this.summary.phaseProgress.modeling },
      { name: 'softDecor', info: this.summary.phaseProgress.softDecor },
      { name: 'rendering', info: this.summary.phaseProgress.rendering },
      { name: 'postProcessing', info: this.summary.phaseProgress.postProcessing }
    ];
  }

  /**
   * 获取阶段进度颜色
   */
  getPhaseProgressColor(completionRate: number): string {
    if (completionRate === 100) return '#4CAF50'; // 绿色
    if (completionRate >= 75) return '#8BC34A'; // 浅绿
    if (completionRate >= 50) return '#FFC107'; // 黄色
    if (completionRate >= 25) return '#FF9800'; // 橙色
    if (completionRate > 0) return '#FF5722'; // 深橙
    return '#9E9E9E'; // 灰色（未开始）
  }

  /**
   * 获取阶段状态标签
   */
  getPhaseStatusLabel(completionRate: number): string {
    if (completionRate === 100) return '已完成';
    if (completionRate >= 75) return '接近完成';
    if (completionRate >= 50) return '进行中';
    if (completionRate >= 25) return '刚开始';
    if (completionRate > 0) return '已启动';
    return '未开始';
  }

  /**
   * 提交问题
   */
  onReportIssue(): void {
    if (this.summary) {
      this.reportIssue.emit(this.summary.projectId);
    }
  }

  /**
   * 获取整体完成率的颜色
   */
  getOverallProgressColor(): string {
    if (!this.summary) return '#9E9E9E';
    return this.getPhaseProgressColor(this.summary.overallCompletionRate);
  }

  /**
   * 获取整体完成率的状态文字
   */
  getOverallStatusLabel(): string {
    if (!this.summary) return '加载中';
    return this.getPhaseStatusLabel(this.summary.overallCompletionRate);
  }

  /**
   * 🆕 获取项目详情页路由
   */
  getProjectDetailRoute(): string[] {
    if (!this.summary || !this.companyId) {
      return [];
    }
    return ['/wxwork', this.companyId, 'project', this.summary.projectId];
  }

  /**
   * 🆕 检查是否可以导航到项目详情页
   */
  canNavigateToProject(): boolean {
    return !!(this.summary?.projectId && this.companyId);
  }

  /**
   * 🆕 获取阶段显示名称
   */
  getPhaseLabel(phaseKey: string): string {
    const map: Record<string, string> = {
      'modeling': '白模',
      'softDecor': '软装',
      'rendering': '渲染',
      'postProcessing': '后期',
      'whiteModel': '白模' // 兼容性
    };
    return map[phaseKey] || phaseKey;
  }

  /**
   * 获取指定阶段的已完成空间列表
   */
  getCompletedSpaces(phaseName: string): any[] {
    if (!this.summary || !this.summary.spaces) return [];

    const phaseKeyMap: Record<string, string> = {
      'modeling': 'whiteModel',
      'softDecor': 'softDecor',
      'rendering': 'rendering',
      'postProcessing': 'postProcess'
    };

    const key = phaseKeyMap[phaseName];
    if (!key) return [];

    return this.summary.spaces.filter(space => {
      // @ts-ignore - 动态访问属性
      return space.deliverableTypes[key] > 0;
    });
  }
}