import { Component } from '@angular/core';
import {RouterLink, RouterOutlet} from "@angular/router";
import {NzContentComponent, NzFooterComponent, NzHeaderComponent, NzLayoutComponent} from "ng-zorro-antd/layout";
import {NzBreadCrumbComponent, NzBreadCrumbItemComponent} from "ng-zorro-antd/breadcrumb";
import {NzColDirective, NzRowDirective} from "ng-zorro-antd/grid";
import {NzMenuDirective, NzMenuItemComponent, NzSubMenuComponent} from "ng-zorro-antd/menu";
import {menuData} from "../../../data/menu/menu.namespace";
import {NgClass, NgForOf} from "@angular/common";
import {animate, state, style, transition, trigger} from "@angular/animations";
import {NzIconDirective} from "ng-zorro-antd/icon";
import {NzTabComponent, NzTabSetComponent} from "ng-zorro-antd/tabs";
import {TabComponent} from "../tab/tab.component";
import {BrowserStorageService} from "../../../utils/localStorage.service";
import {DATA} from "../../../data/login/localStorage.namespace";


@Component({
  selector: 'app-index',
  standalone: true,
  imports: [
    RouterOutlet,
    NzLayoutComponent,
    NzHeaderComponent,
    NzBreadCrumbComponent,
    NzBreadCrumbItemComponent,
    NzContentComponent,
    NzFooterComponent,
    NzRowDirective,
    NzColDirective,
    NzMenuItemComponent,
    NzMenuDirective,
    RouterLink,
    NzSubMenuComponent,
    NgForOf,
    NgClass,
    NzIconDirective,
    NzTabComponent,
    NzTabSetComponent,
    TabComponent
  ],
  templateUrl: './index.component.html',
  styleUrl: './index.component.less',
  animations: [
    // animation triggers go here
    trigger('openClose', [
      state('open', style({
        width: '280px',
        backgroundColor: 'white'
      })),
      state('closed', style({
        overflow: 'hidden',
        width: '0',
      })),
      transition('open => closed', [
        animate('0.1s')
      ]),
      transition('closed => open', [
        animate('0.1s')
      ]),
    ]),
  ]
})
export class IndexComponent {
  // 菜单数据
  menuData: any = [{
    'menuName' : '首页',
    'selected' : true,
  }];

  // 左侧菜单栏数据
  leftMenuData: any = [];


  // 侧边菜单展示开关
  isCollapse = false;
  constructor(private storage: BrowserStorageService) {
    this.menuData = this.menuData.concat(this.storage.get(DATA)['menuTree']);
    console.log(this.menuData);
  }

  // 选择操作
  isSelected(item: any) {
    this.menuData.map((data: any) => {
      data.selected = data.menuName === item.menuName;
      this.leftMenuData = data['childMenuList'];
      console.log(this.leftMenuData);
    });
    if (item['menuName'] === '首页') {
      this.isCollapse = false;
    } else {
      this.isCollapse = true;
    }
  }
}
