import { Component, TemplateRef, ViewChild, OnInit } from '@angular/core';
import { Router, RouteConfigLoadStart, NavigationError, NavigationEnd, ActivatedRoute, NavigationStart, NavigationCancel, RoutesRecognized } from '@angular/router';
import { NaTranslateService, ProgressBarService } from '@ng-arthur-mobile/core';
import { NzMessageService } from 'ng-zorro-antd';
import { Http } from '@angular/http';
import { Title } from '@angular/platform-browser';
import { HttpClient } from '@angular/common/http';
import { NaSidebar } from './sidebar/na-sidebar';
import { tap } from 'rxjs/operators';

@Component({
  selector: 'na-layout-default',
  templateUrl: './default.component.html',
  styleUrls: ['./default.component.scss']
})
export class DefaultComponent implements OnInit {
  isFetching = false;

  // constructor(
  //   router: Router,
  //   scroll: NaScrollService,
  //   _message: NzMessageService,
  // ) {
  //   // scroll to top in change page
  //   router.events.subscribe(evt => {
  //     if (!this.isFetching && evt instanceof RouteConfigLoadStart) {
  //       this.isFetching = true;
  //     }
  //     if (evt instanceof NavigationError) {
  //       this.isFetching = false;
  //       _message.error(`无法加载${evt.url}路由`, { nzDuration: 1000 * 3 });
  //       return;
  //     }
  //     if (!(evt instanceof NavigationEnd)) {
  //       return;
  //     }
  //     setTimeout(() => {
  //       scroll.scrollToTop();
  //       this.isFetching = false;
  //     }, 100);
  //   });
  // }


  index = 0;
  isCollapsed = false;
  selectedData: any;
  triggerTemplate = null;
  @ViewChild('trigger') customTrigger: TemplateRef<void>;
  // // 路由列表
  // menuList: Array<{ title: string, module: string, power: string, isSelect: boolean }> = [];

  menus: NaSidebar.Menu[] = [];

  tabs: {
    title: string,
    closeable: boolean
  }[] = [];

  /** custom trigger can be TemplateRef **/
  changeTrigger(): void {
    this.triggerTemplate = this.customTrigger;
  }

  constructor(private http: HttpClient,
    private router: Router,
    private activatedRoute: ActivatedRoute,
    private i18n: NaTranslateService,
    private progressBarService: ProgressBarService,
    private titleService: Title) {
      this.http.get('./assets/mock/menu.json').subscribe((data: NaSidebar.Menu[]) => this.menus.push(...data));
    // // 路由事件
    // this.router.events.pipe(
    //   filter(event => event instanceof NavigationEnd),
    //   map(() => this.activatedRoute),
    //   map(route => {
    //     while (route.firstChild) {
    //       route = route.firstChild;
    //     }
    //     return route;
    //   }),
    //   filter(route => route.outlet === 'primary'),
    //   mergeMap(route => route.data)
    // ).subscribe((event) => {
    //   console.log(event);
    //     // 路由data的标题
    //     const title = event['title'];
    //     this.menuList.forEach(p => p.isSelect = false);
    //     const menu = { title: title, module: event['module'], power: event['power'], isSelect: true};
    //     this.titleService.setTitle(title);
    //     const exitMenu = this.menuList.find(info => info.title === title);
    //     if (exitMenu) {// 如果存在不添加，当前表示选中
    //       this.menuList.forEach(p => p.isSelect = p.title === title);
    //       return ;
    //     }
    //     this.menuList.push(menu);

    //     this.onClickMenu(event);
    //   });
    // setTimeout(() => {
    //   console.log('开始');
    //   this.isFetching = true;
    // }, 3000);
    // setTimeout(() => {
    //   console.log('结束');
    //   this.isFetching = false;
    // }, 6000);
  }

  ngOnInit(): void {
    this.router.events.subscribe(event => {
      if (event instanceof NavigationStart) {
        this.isFetching = true;
      } else if (event instanceof NavigationEnd) {
        this.isFetching = false;
      } else if (event instanceof NavigationCancel) {
        this.isFetching = false;
      } else if (event instanceof NavigationError) {
        this.isFetching = false;
      } else if (event instanceof RoutesRecognized) {
        // 路由已认证
        this.isFetching = false;
      }
    });
  }

  onActivate(component: any) {
    // console.log('onActivate', component);
  }

  onDeactivate(component: any) {
    // console.log('onDeactivate', component);
  }

  closeTab(tab: any): void {
    const i = this.tabs.findIndex(value => value.title === tab.title);
    this.tabs.splice(i, 1);

    // 当前关闭的是第几个路由
    // let ind = this.menuList.findIndex(p => p.module == module);
    // //如果只有一个不可以关闭
    // if(this.menuList.length==1) return ;

    // this.menuList=this.menuList.filter(p=>p.module!=module);
    // //删除复用
    // delete SimpleReuseStrategy.handlers[module];
    // if(!isSelect) return;
    // //显示上一个选中
    // let menu=this.menuList[index-1];
    // if(!menu) {//如果上一个没有下一个选中
    //    menu=this.menuList[index+1];
    // }
    // // console.log(menu);
    // // console.log(this.menuList);
    // this.menuList.forEach(p => p.isSelect=p.module==menu.module );
    // // 显示当前路由信息
    // this.router.navigate(['/'+ menu.module]);
  }

  newTab(): void {
    // this.tabs.push('New Tab');
  }

  onClickMenu(menu: any) {
    const i = this.tabs.findIndex(value => value.title === menu.title);
    if (i < 0) {
      this.tabs.push(menu);
      this.index = this.tabs.length;
    } else {
      this.index = i;
    }
  }

  onSelectTab(tab: NaSidebar.Menu) {
    console.log(tab);
  }

  onDblclickTab(tab: NaSidebar.Menu) {
    console.log('onDblclickTab', tab);
    window.open(tab.url);
  }
}