import { Component, OnInit, Input, Output, EventEmitter, ElementRef, ViewChild, Renderer2, AfterViewInit, ViewEncapsulation } from '@angular/core';
import { ViewChangeService } from './view-change.service';

@Component({
  selector: 'farris-view-change',
  templateUrl: './view-change.component.html',
  styleUrls: ['./view-change.component.scss'],
  encapsulation: ViewEncapsulation.None
  // providers:[ ViewChangeService ]
})
export class ViewChangeComponent implements OnInit ,AfterViewInit{

  @Input() toolbarData;
  // 视图类型的呈现方式，tile小磁贴类型，dropdown下拉类型
  @Input() viewType: string = 'tile';
  // 默认的视图类型
  @Input() defaultType: string;
  // 视图组
  @Input() viewGroupId:string = 'default';
  activeTypeItem;
  // 视图类型切换时，抛出的事件
  @Output() toolTypeChange = new EventEmitter();

  @ViewChild('typelist') typelist: ElementRef;

  constructor(private _renderer: Renderer2,
    private viewChangeService: ViewChangeService) { 

    }

  ngOnInit() {
    if (this.toolbarData && this.toolbarData.length) {
      if (this.defaultType) {
        let item = this.toolbarData.find((bar) => {
          return bar['type'] === this.defaultType;
        })
        this.activeTypeItem = item;
        this.toolTypeChange.emit(this.activeTypeItem);
      }
      else {
        this.activeTypeItem = this.toolbarData[0];
        this.toolTypeChange.emit(this.activeTypeItem);
      }

      
    }
  }
  ngAfterViewInit(): void {
    if(!this.viewChangeService){
      this.viewChangeService = new ViewChangeService();
    }
    // 调用服务中默认视图类型的更新方法
    this.viewChangeService.updateCurrentViewId(this.activeTypeItem['type'],this.viewGroupId);
  }

  listItemClick(item) {
    if (item.disable || this.activeTypeItem['type'] === item['type']) {
      return;
    }
    this.activeTypeItem = item;
    if(!this.viewChangeService){
      this.viewChangeService = new ViewChangeService();
    }
    this.viewChangeService.updateCurrentViewId(this.activeTypeItem['type'],this.viewGroupId);
    this.toolTypeChange.emit(item);
    if (this.typelist) {
      this._renderer.setStyle(
        this.typelist.nativeElement,
        'display',
        'none'
      );
    }
  }

  dropdownMouseEnter() {
    this._renderer.setStyle(
      this.typelist.nativeElement,
      'display',
      'block'
    );
  }
  dropdownMouseLeave() {
    this._renderer.setStyle(
      this.typelist.nativeElement,
      'display',
      'none'
    );
  }

}