import { Component, OnInit, Output, EventEmitter, ChangeDetectorRef, ElementRef, Renderer2, TemplateRef } from '@angular/core';
import { ReuseItem } from '../interface';
import { NaReuseService } from '../na-reuse.service';
import { Router, ActivatedRoute } from '@angular/router';
import { NzDropdownService, NzDropdownContextComponent } from 'ng-zorro-antd';

@Component({
  selector: 'na-reuse-tab',
  templateUrl: './na-reuse-tab.component.html',
  styleUrls: ['./na-reuse-tab.component.scss']
})
export class NaReuseTabComponent implements OnInit {
  private dropdown: NzDropdownContextComponent;
  /**
   * 当前选中的tab下标
   */
  indexTab = 0;

  /**
   * 所有复用元素
   */
  list: ReuseItem[] = [];
  item: ReuseItem;

  /** 切换时回调 */
  @Output() change: EventEmitter<ReuseItem> = new EventEmitter<ReuseItem>();
  /** 关闭回调 */
  @Output() close: EventEmitter<ReuseItem> = new EventEmitter<ReuseItem>();

  constructor(private reuseSrv: NaReuseService,
    private cd: ChangeDetectorRef,
    private router: Router,
    private route: ActivatedRoute,
    private el: ElementRef,
    private render: Renderer2,
    private nzDropdownService: NzDropdownService
  ) { }

  ngOnInit() {
    this.list.push({
      url: '.',
      title: '首页',
      closable: false,
      index: 0,
      active: true,
      last: true
    });
    this.list.push({
      url: '/dashboard/qrcode',
      title: '二维码',
      closable: true,
      index: 0,
      active: true,
      last: true
    });
    this.list.push({
      url: '/dashboard/pagination',
      title: '分页',
      closable: true,
      index: 0,
      active: true,
      last: true
    });
  }

  refStatus(dc = true) {
    if (this.list.length) {
      this.list[this.list.length - 1].last = true;
      this.list.forEach((i, idx) => (i.active = this.indexTab === idx));
    }
    if (dc) {
      this.cd.detectChanges();
    }
  }

  to(e: Event, index: number) {
    if (e) {
      e.preventDefault();
      e.stopPropagation();
    }
    index = Math.max(0, Math.min(index, this.list.length - 1));
    const item = this.list[index];
    this.router.navigateByUrl(item.url).then(res => {
      if (!res) {
        return;
      }
      this.indexTab = index;
      this.item = item;
      this.refStatus();
      this.change.emit(item);
    });
  }

  _close(e: Event, idx: number) {
    console.log(e, idx);
    if (e) {
      e.preventDefault();
      e.stopPropagation();
    }
    const item = this.list[idx];
    this.reuseSrv.close(item.url);
    this.close.emit(item);
    this.cd.detectChanges();
    return false;
  }

  contextMenu($event: MouseEvent, template: TemplateRef<void>): void {
    this.dropdown = this.nzDropdownService.create($event, template);
  }

}