import { Component, OnInit, Input, Output, EventEmitter, OnDestroy } from '@angular/core';
import { Observable, Subscription, of } from 'rxjs';

interface navItem {
  id:string,
  text:string,
  num?:number,
  disable?:boolean
}

@Component({
  selector: 'farris-nav',
  templateUrl: './nav.component.html',
  styleUrls: ['./nav.component.scss'],
})
export class NavComponent implements OnInit, OnDestroy {

  /* 是否水平分布 */
  // @Input() horizontal: boolean = true;

  _horizontal:boolean = true;
  @Input()
  set horizontal(val) {
    this._horizontal = val;
  }
  get horizontal() {
    return this._horizontal;
  }

  //导航数据
  _navData:navItem[]
  @Input()
  get navData(): Array<navItem> {
    return this._navData;
  }
  set navData(data: Array<navItem>) {
    this._navData = data;
    this.initNavData();
  }
  _activeNavId:string = ''
  @Input()
  get activeNavId():string {
    return this._activeNavId;
  }
  set activeNavId(data:string) {
    this._activeNavId = data;
    if(this._activeNavId && this.navData && this.navData.length){
      const nav = this.navData.find(nav => {
        return nav['id'] === this._activeNavId;
      });
      if(nav){
        this.navChange.emit(nav);
      }
    }
  }
  /** nav切换前事件 */
  @Input() navPicking: (emptyObj?: {}) => Observable<any>;
  navPickingSubscription: Subscription;

  @Input() maxNum:number = 99;

  @Output() navChange = new EventEmitter();

  constructor() { }

  ngOnInit() {
    this.initEvents();
  }
  ngOnDestroy() {
    if(this.navPickingSubscription){
      this.navPickingSubscription.unsubscribe();
    }
  }

  initNavData(){
    if(this.navData && this.navData.length){
      if(!this._activeNavId){
        const activeNav = this.navData.find(nav=>{
          return !nav.disable;
        });
        if(activeNav){
          this._activeNavId = activeNav['id'];
        }
      }
    }
  }
  navClick(nav){
    if(nav.disable || nav.id === this._activeNavId){
      return
    }
    else{
      this.navPickingSubscription = this.navPicking().subscribe((val) => {
          if(val){
            this.navChange.emit(nav);
            setTimeout(() => this._activeNavId = nav.id);
          }
      });
    }
  }
  initEvents() {
    if (!this.navPicking) {
        this.navPicking = () => of(true);
    }
  }

}