ng-configure/src/app/app.component.ts

import { Component, OnInit, HostListener, OnDestroy } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Router, RouterOutlet, ActivatedRoute, NavigationEnd } from '@angular/router';
import { TreeNavComponent } from 'base-core';
import { MatIcon } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
import { MatMenuModule } from '@angular/material/menu';
import { MatTooltipModule } from '@angular/material/tooltip';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { AuthService } from './services/auth.service';
import { TreeService } from './services/tree.service';
import { TreeNode } from './models/tree-node.model';
import { Subscription, filter } from 'rxjs';
import { ConfigService } from 'base-core';

@Component({
  selector: 'app-root',
  imports: [CommonModule, RouterOutlet, TreeNavComponent, MatIcon, MatButtonModule, MatMenuModule, DragDropModule, MatTooltipModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent implements OnInit, OnDestroy {
  sidebarWidth = 320; // 默认宽度
  isDragging = false;
  minSidebarWidth = 200;
  maxSidebarWidth = 600;
  breadcrumbPath: string[] = [];
  treeData: TreeNode[] = [];
  private subscriptions: Subscription = new Subscription();

  constructor(
    private router: Router,
    public authService: AuthService,
    private treeService: TreeService,
    private activatedRoute: ActivatedRoute,
    private config: ConfigService
  ) {}
  
  ngOnInit() {
    console.log('AppComponent初始化');
    console.log('当前路由:', this.router.url);
    
    // 启用真实API调用
    this.config.useMockData = false;
    console.log('使用真实API数据，配置:', {
      useMockData: this.config.useMockData,
      apiBaseUrl: this.config.apiBaseUrl
    });
    
    // 从本地存储恢复宽度
    const savedWidth = localStorage.getItem('sidebarWidth');
    if (savedWidth) {
      this.sidebarWidth = parseInt(savedWidth, 10);
    }

    // 加载树数据
    this.treeService.getTree().subscribe({
      next: (data) => {
        this.treeData = data;
        this.updateBreadcrumb();
      },
      error: (error) => {
        console.error('加载树数据失败:', error);
        // 确保设置 treeData 为空数组，避免绑定失效
        this.treeData = [];
        this.updateBreadcrumb();
      }
    });

    // 订阅路由变化
    this.subscriptions.add(
      this.router.events.pipe(
        filter(event => event instanceof NavigationEnd)
      ).subscribe(() => {
        this.updateBreadcrumb();
      })
    );
  }
  
  get isLoginPage(): boolean {
    return this.router.url.includes('/login');
  }

  startDrag(event: MouseEvent) {
    event.preventDefault();
    this.isDragging = true;
    document.body.style.cursor = 'col-resize';
    document.body.style.userSelect = 'none';
  }

  @HostListener('document:mousemove', ['$event'])
  onDrag(event: MouseEvent) {
    if (!this.isDragging) return;
    
    const newWidth = event.clientX;
    if (newWidth >= this.minSidebarWidth && newWidth <= this.maxSidebarWidth) {
      this.sidebarWidth = newWidth;
    }
  }

  @HostListener('document:mouseup')
  stopDrag() {
    if (!this.isDragging) return;
    
    this.isDragging = false;
    document.body.style.cursor = '';
    document.body.style.userSelect = '';
    localStorage.setItem('sidebarWidth', this.sidebarWidth.toString());
  }

  logout() {
    this.authService.logout();
  }

  get username(): string {
    return this.authService.getCurrentUser()?.username || '用户';
  }

  onTreeRefresh(): void {
    console.log('树刷新事件触发');
    this.treeService.getTree().subscribe({
      next: (data) => {
        this.treeData = data;
        this.updateBreadcrumb();
      },
      error: (error) => {
        console.error('刷新树数据失败:', error);
      }
    });
  }

  ngOnDestroy() {
    this.subscriptions.unsubscribe();
  }

  private updateBreadcrumb() {
    const currentRoute = this.router.url;
    console.log('更新面包屑，当前路由:', currentRoute);
    
    if (!currentRoute || currentRoute === '/') {
      this.breadcrumbPath = ['首页'];
      return;
    }

    const path = this.findPathInTree(this.treeData, currentRoute);
    if (path.length > 0) {
      this.breadcrumbPath = path;
    } else {
      // 如果树中没有找到，使用路由路径
      //const segments = currentRoute.split('/').filter(segment => segment.length > 0);
     // this.breadcrumbPath = segments.map(segment => this.formatRouteSegment(segment));
    }
  }

  private findPathInTree(nodes: TreeNode[], targetRoute: string): string[] {
    for (const node of nodes) {
      if (node.route === targetRoute) {
        return [node.name];
      }
      
      if (node.children && node.children.length > 0) {
        const childPath = this.findPathInTree(node.children, targetRoute);
        if (childPath.length > 0) {
          return [node.name, ...childPath];
        }
      }
    }
    return [];
  }

}