yss-project/src/app/pages/customer-service/dashboard/dashboard.ts

// 修复 OnDestroy 导入和使用
import { Component, OnInit, OnDestroy, signal, computed } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { ProjectService } from '../../../services/project.service';
import { Project, Task, CustomerFeedback } from '../../../models/project.model';

@Component({
  selector: 'app-dashboard',
  standalone: true,
  imports: [CommonModule, FormsModule, RouterModule],
  templateUrl: './dashboard.html',
  styleUrls: ['./dashboard.scss', '../customer-service-styles.scss']
}) 
export class Dashboard implements OnInit, OnDestroy {
  // 数据看板统计
  stats = {
    newConsultations: signal(12),
    pendingAssignments: signal(5),
    exceptionProjects: signal(2),
    todayRevenue: signal(28500)
  };

  // 紧急待办列表
  urgentTasks = signal<Task[]>([]);

  // 任务处理状态
  taskProcessingState = signal<{[key: string]: {inProgress: boolean, progress: number}}>({});
  
  // 项目动态流
  projectUpdates = signal<(Project | CustomerFeedback)[]>([]);
  
  // 搜索关键词
  searchTerm = signal('');
  
  // 筛选后的项目更新
  filteredUpdates = computed(() => {
    if (!this.searchTerm()) return this.projectUpdates();
    
    return this.projectUpdates().filter(item => {
      if ('name' in item) {
        // 项目
        return item.name.toLowerCase().includes(this.searchTerm().toLowerCase()) ||
               item.customerName.toLowerCase().includes(this.searchTerm().toLowerCase()) ||
               item.status.toLowerCase().includes(this.searchTerm().toLowerCase());
      } else {
        // 反馈
        return 'content' in item && item.content.toLowerCase().includes(this.searchTerm().toLowerCase()) ||
               'status' in item && item.status.toLowerCase().includes(this.searchTerm().toLowerCase());
      }
    });
  });

  currentDate = new Date();
  
  // 回到顶部按钮可见性信号
  showBackToTopSignal = signal(false);

  constructor(private projectService: ProjectService) {}

  ngOnInit(): void {
    this.loadUrgentTasks();
    this.loadProjectUpdates();
    
    // 添加滚动事件监听
    window.addEventListener('scroll', this.onScroll.bind(this));
  }

  // 添加滚动事件处理方法
  private onScroll(): void {
    this.showBackToTopSignal.set(window.scrollY > 300);
  }
  
  // 添加显示回到顶部按钮的计算属性
  showBackToTop = computed(() => this.showBackToTopSignal());

  // 清理事件监听器
  ngOnDestroy(): void {
    window.removeEventListener('scroll', this.onScroll.bind(this));
  }

  // 添加scrollToTop方法
  scrollToTop(): void {
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    });
  }
  
  // 修改loadUrgentTasks方法，添加status属性
  loadUrgentTasks(): void {
    // 从服务获取任务数据，筛选出紧急任务
    this.projectService.getTasks().subscribe(tasks => {
      const filteredTasks = tasks.map(task => ({...task, status: task.isOverdue ? '已逾期' : task.isCompleted ? '已完成' : '进行中'}))
        .filter(task => task.isOverdue || task.deadline.toDateString() === new Date().toDateString());
      
      this.urgentTasks.set(filteredTasks.sort((a, b) => {
        // 按紧急程度排序
        if (a.isOverdue && !b.isOverdue) return -1;
        if (!a.isOverdue && b.isOverdue) return 1;
        return a.deadline.getTime() - b.deadline.getTime();
      }));
    });
  }

  loadProjectUpdates(): void {
    // 模拟项目更新数据
    this.projectService.getProjects().subscribe(projects => {
      this.projectService.getCustomerFeedbacks().subscribe(feedbacks => {
        // 合并项目和反馈，按时间倒序排序
        const updates: (Project | CustomerFeedback)[] = [
          ...projects,
          ...feedbacks
        ].sort((a, b) => {
          const dateA = 'createdAt' in a ? a.createdAt : new Date(a['updatedAt'] || a['deadline']);
          const dateB = 'createdAt' in b ? b.createdAt : new Date(b['updatedAt'] || b['deadline']);
          return dateB.getTime() - dateA.getTime();
        }).slice(0, 20); // 限制显示20条
        
        this.projectUpdates.set(updates);
      });
    });
  }

  // 处理任务完成
  markTaskAsCompleted(taskId: string): void {
    this.urgentTasks.set(
      this.urgentTasks().map(task => 
        task.id === taskId ? { ...task, isCompleted: true, status: '已完成' } : task
      )
    );
  }

  // 处理派单操作
  handleAssignment(taskId: string): void {
    // 标记任务为处理中
    const task = this.urgentTasks().find(t => t.id === taskId);
    if (task) {
      // 初始化处理状态
      this.taskProcessingState.update(state => ({
        ...state,
        [task.id]: { inProgress: true, progress: 0 }
      }));

      // 模拟处理进度
      let progress = 0;
      const interval = setInterval(() => {
        progress += 10;
        
        this.taskProcessingState.update(state => ({
          ...state,
          [task.id]: { inProgress: progress < 100, progress }
        }));

        if (progress >= 100) {
          clearInterval(interval);
          
          // 处理完成后从列表中移除该任务
          this.urgentTasks.set(
            this.urgentTasks().filter(t => t.id !== task.id)
          );
          
          // 清除处理状态
          this.taskProcessingState.update(state => {
            const newState = { ...state };
            delete newState[task.id];
            return newState;
          });
        }
      }, 300);
    }

    // 更新统计数据
    this.stats.pendingAssignments.set(this.stats.pendingAssignments() - 1);
  }

  // 添加新的紧急事项
  addUrgentTask(): void {
    // 在实际应用中，这里可能会打开一个表单模态框
    // 这里使用模拟数据直接添加
    const newTask: Task = {
      id: `task-${Date.now()}`,
      projectId: `project-${Math.floor(Math.random() * 1000)}`,
      title: '新增紧急任务',
      projectName: '新项目',
      stage: '前期沟通', // 设置一个有效的ProjectStage值
      deadline: new Date(),
      isOverdue: false,
      isCompleted: false,
      // Task接口中没有status属性，移除它
      // 为了符合Task接口要求，添加required的stage字段
      priority: 'high', // 模拟值
      assignee: '当前用户', // 模拟值
      description: '紧急任务描述' // 模拟值
    };

    this.urgentTasks.set([newTask, ...this.urgentTasks()]);
    this.stats.pendingAssignments.set(this.stats.pendingAssignments() + 1);
  }

  // 新咨询数图标点击处理
  handleNewConsultationsClick(): void {
    console.log('点击查看新咨询详情');
    // 在实际应用中，这里会跳转到新咨询列表页面或打开新咨询模态框
  }

  // 待派单数图标点击处理
  handlePendingAssignmentsClick(): void {
    console.log('点击查看待派单详情');
    // 在实际应用中，这里会跳转到待派单列表页面或打开待派单模态框
  }

  // 异常项目图标点击处理
  handleExceptionProjectsClick(): void {
    console.log('点击查看异常项目详情');
    // 在实际应用中，这里会跳转到异常项目列表页面或打开异常项目模态框
  }

  // 今日成交额图标点击处理
  handleTodayRevenueClick(): void {
    console.log('点击查看今日成交额详情');
    // 在实际应用中，这里会跳转到今日成交额详情页面或打开今日成交额模态框
  }

  // 格式化日期
  formatDate(date: Date | string): string {
    if (!date) return '';
    try {
      return new Date(date).toLocaleString('zh-CN', {
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit'
      });
    } catch (error) {
      console.error('日期格式化错误:', error);
      return '';
    }
  }

  // 添加安全获取客户名称的方法
getCustomerName(update: Project | CustomerFeedback): string {
  if ('customerName' in update && update.customerName) {
    return update.customerName;
  } else if ('projectId' in update) {
    // 查找相关项目获取客户名称
    return '客户反馈';
  }
  return '未知客户';
}

  // 优化的日期格式化方法
  getFormattedDate(update: Project | CustomerFeedback): string {
    if (!update) return '';
    
    if ('createdAt' in update && update.createdAt) {
      return this.formatDate(update.createdAt);
    } else if ('updatedAt' in update && update.updatedAt) {
      return this.formatDate(update.updatedAt);
    } else if ('deadline' in update && update.deadline) {
      return this.formatDate(update.deadline);
    }
    return '';
  }

  // 添加获取状态的安全方法
getUpdateStatus(update: Project | CustomerFeedback): string {
  if ('status' in update && update.status) {
    return update.status;
  }
  return '已更新';
}

  // 添加getTaskStatus方法的正确实现
  getTaskStatus(task: Task): string {
    if (!task) return '未知状态';
    if (task.isCompleted) return '已完成';
    if (task.isOverdue) return '已逾期';
    return '进行中';
  }

  // 添加getUpdateStatusClass方法的正确实现
  getUpdateStatusClass(update: Project | CustomerFeedback): string {
    if (!update || !('status' in update) || !update.status) return '';
    
    switch (update.status) {
      case '进行中':
        return 'status-active';
      case '已完成':
        return 'status-completed';
      case '已延期':
      case '已暂停':
        return 'status-warning';
      case '已解决':
        return 'status-success';
      case '待处理':
      case '处理中':
        return 'status-info';
      default:
        return '';
    }
  }
}