yss-project/src/app/shared/components/team-assignment-modal/team-assignment-modal.component.ts

import { Component, EventEmitter, Input, Output } from '@angular/core';
import { CommonModule } from '@angular/common';

export interface Designer {
  id: string;
  name: string;
  role: string;
  avatar: string;
  skills: string[];
  workload: {
    level: 'low' | 'medium' | 'high';
    percentage: number;
    text: string;
  };
  recentTasks: {
    id: string;
    name: string;
    projectName: string;
    stage: 'modeling' | 'rendering' | 'soft-decoration' | 'post-production';
    deadline: string;
  }[];
}

@Component({
  selector: 'app-team-assignment-modal',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './team-assignment-modal.component.html',
  styleUrls: ['./team-assignment-modal.component.scss']
})
export class TeamAssignmentModalComponent {
  @Input() isVisible = false;
  @Output() closeModal = new EventEmitter<void>();
  @Output() confirmAssignment = new EventEmitter<Designer>();

  selectedDesigner: Designer | null = null;

  // 模拟设计师数据
  designers: Designer[] = [
    {
      id: '1',
      name: '张设计师',
      role: '高级室内设计师',
      avatar: '/assets/images/default-avatar.svg',
      skills: ['现代简约', '北欧风格', '工业风'],
      workload: {
        level: 'low',
        percentage: 30,
        text: '轻度'
      },
      recentTasks: [
        {
          id: '1',
          name: '海景别墅设计',
          projectName: '海景别墅设计',
          stage: 'modeling',
          deadline: '2024-01-15'
        },
        {
          id: '2',
          name: '现代公寓改造',
          projectName: '现代公寓改造',
          stage: 'rendering',
          deadline: '2024-01-20'
        }
      ]
    },
    {
      id: '2',
      name: '李设计师',
      role: '资深设计总监',
      avatar: '/assets/images/default-avatar.svg',
      skills: ['欧式古典', '美式乡村', '中式传统'],
      workload: {
        level: 'medium',
        percentage: 65,
        text: '中度'
      },
      recentTasks: [
        {
          id: '3',
          name: '豪华会所设计',
          projectName: '豪华会所设计',
          stage: 'soft-decoration',
          deadline: '2024-01-18'
        },
        {
          id: '4',
          name: '商业空间规划',
          projectName: '商业空间规划',
          stage: 'post-production',
          deadline: '2024-01-25'
        },
        {
          id: '5',
          name: '私人定制住宅',
          projectName: '私人定制住宅',
          stage: 'modeling',
          deadline: '2024-02-01'
        }
      ]
    },
    {
      id: '3',
      name: '王设计师',
      role: '创意设计师',
      avatar: '/assets/images/default-avatar.svg',
      skills: ['极简主义', '日式禅风', '斯堪的纳维亚'],
      workload: {
        level: 'high',
        percentage: 85,
        text: '重度'
      },
      recentTasks: [
        {
          id: '6',
          name: '艺术画廊设计',
          projectName: '艺术画廊设计',
          stage: 'rendering',
          deadline: '2024-01-12'
        },
        {
          id: '7',
          name: '精品酒店套房',
          projectName: '精品酒店套房',
          stage: 'soft-decoration',
          deadline: '2024-01-16'
        },
        {
          id: '8',
          name: '创意办公空间',
          projectName: '创意办公空间',
          stage: 'post-production',
          deadline: '2024-01-22'
        },
        {
          id: '9',
          name: '高端住宅项目',
          projectName: '高端住宅项目',
          stage: 'modeling',
          deadline: '2024-01-28'
        }
      ]
    },
    {
      id: '4',
      name: '陈设计师',
      role: '室内设计师',
      avatar: '/assets/images/default-avatar.svg',
      skills: ['新中式', '轻奢风格', '混搭风格'],
      workload: {
        level: 'low',
        percentage: 20,
        text: '轻度'
      },
      recentTasks: [
        {
          id: '10',
          name: '温馨家庭住宅',
          projectName: '温馨家庭住宅',
          stage: 'modeling',
          deadline: '2024-01-30'
        }
      ]
    }
  ];

  selectDesigner(designer: Designer): void {
    this.selectedDesigner = designer;
  }

  closeModalAction(): void {
    this.selectedDesigner = null;
    this.closeModal.emit();
  }

  confirmAssignmentAction(): void {
    if (this.selectedDesigner) {
      this.confirmAssignment.emit(this.selectedDesigner);
      this.closeModalAction();
    }
  }

  getStageText(stage: string): string {
    const stageMap: { [key: string]: string } = {
      'modeling': '建模',
      'rendering': '渲染',
      'soft-decoration': '软装',
      'post-production': '后期'
    };
    return stageMap[stage] || stage;
  }

  // 图片加载错误处理
  onImageError(event: any, designer: Designer): void {
    event.target.src = '/assets/images/default-avatar.svg';
  }

  getWorkloadClass(workload: { level: 'low' | 'medium' | 'high'; percentage: number; text: string }): string {
    return `workload-${workload.level}`;
  }

  getWorkloadText(workload: { level: 'low' | 'medium' | 'high'; percentage: number; text: string }): string {
    return workload.text;
  }

  getTaskStageClass(stage: 'modeling' | 'rendering' | 'soft-decoration' | 'post-production'): string {
    const stageClassMap: { [key: string]: string } = {
      'modeling': 'stage-modeling',
      'rendering': 'stage-rendering',
      'soft-decoration': 'stage-soft-decoration',
      'post-production': 'stage-post-production'
    };
    return stageClassMap[stage] || '';
  }

  formatDeadline(deadline: string): string {
    const date = new Date(deadline);
    const now = new Date();
    const diffTime = date.getTime() - now.getTime();
    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
    
    if (diffDays < 0) {
      return '已逾期';
    } else if (diffDays === 0) {
      return '今天';
    } else if (diffDays === 1) {
      return '明天';
    } else {
      return `${diffDays}天后`;
    }
  }
}