import { Component } from '@angular/core';

import {ActivationEnd, Router, RouterOutlet} from "@angular/router";
import {filter} from "rxjs";
import {NzTabComponent, NzTabSetComponent} from 'ng-zorro-antd/tabs';
import {NzCardComponent} from 'ng-zorro-antd/card';
import {NgForOf} from '@angular/common';


@Component({
  selector: 'app-tab',
  standalone: true,
  imports: [
    NzTabSetComponent,
    NzTabComponent,
    NzCardComponent,
    RouterOutlet,
    NgForOf

  ],
  templateUrl: './tab.component.html',
  styleUrl: './tab.component.scss'
})
export class TabComponent {
  // 当前打开的Tab页
  activatedMenuIndex = -1;
  // 存放已打开的Tab页信息
  tabs: { path: string, title: string }[] = [{ path: '/admin/index', title: '首页' }];
  constructor(private router: Router) {
    // 激活首页路由
    this.router.navigateByUrl('/admin/index').finally();

    // 监听路由事件，只订阅 ActivationEnd 事件
    this.router.events.pipe(filter(e => e instanceof ActivationEnd))
      .subscribe((e) => {
        const thisEvt = <ActivationEnd>e;
        if (thisEvt.snapshot.routeConfig?.loadChildren) {
          // 当前激活的路由
          // const activatedRoutePath = thisEvt.snapshot.routeConfig?.path;
          const activatedRoutePath = this.router.url;
          const routeData = thisEvt.snapshot.queryParams;
          let menuTitle = '新标签页';
          if(routeData) {
            menuTitle = routeData['title'];
          }

          // 该路由是否已激活，激活过则直接打开
          let isExist = false;
          this.tabs.every((t, i) => {
            if(activatedRoutePath === t.path) {
              this.activatedMenuIndex = i;
              isExist = true;
              return false;
            }
            return true;
          });

          // 指定路由不在tabs中存在（未激活或激活后关闭）
          if(!isExist) {
            this.activeMenu(activatedRoutePath, menuTitle);
          }
        }
      });
  }

  // 点击菜单激活指定路由并保存tab页签
  activeMenu(menuPath: string | undefined, menuTitle: string): void {
    if(!menuPath) return;
    let menuIndex = -1;
    this.tabs.every((t, i) => {
      if(menuPath === t.path) {
        menuIndex = i;
        return false;
      }
      return true;
    });

    if(menuIndex === -1) {
      this.tabs.push({path: menuPath, title: menuTitle});
      menuIndex = this.tabs.length - 1;
      this.activatedMenuIndex = menuIndex;
    }
  }
  // 激活路由
  activeRoute(path: string): void {
    this.router.navigateByUrl(path).finally();
  }

  // 切换tab，激活对应路由
  toggleTab(path: string): void {
    this.activeRoute(path);
  }

  // tab页签关闭，从缓存中删除对应信息
  closeTab(tabsObj: any): void {
    if (1 === this.tabs.length) return;
    const path = this.tabs[tabsObj['index']]['path'];

    let selectedIndex = -1;
    this.tabs.every((t, i) => {
      if(t.path === path) {
        selectedIndex = i;
        return false;
      }

      return true;
    });
    this.tabs.splice(selectedIndex, 1);

    if(selectedIndex === this.activatedMenuIndex)  {
      let prevIndex = this.activatedMenuIndex - 1;
      this.activatedMenuIndex = prevIndex > 0 ? prevIndex : 0;
      this.activeRoute(this.tabs[this.activatedMenuIndex].path);
    }else if (this.activatedMenuIndex > selectedIndex) {
      this.activatedMenuIndex -= 1;
    }
  }

}
