import { Directive, ElementRef, HostListener, Renderer2 } from '@angular/core';

@Directive({
  selector: '[farrisFold]'
})
export class FoldDirective {

  constructor(private el: ElementRef, private render: Renderer2) { }

  @HostListener('click', ['$event']) click(e) {
    if (e.target.localName === 'legend') {

      const legend = this.el.nativeElement.children[0];
      const div = this.el.nativeElement.children[1];
      if (legend.classList.contains('f-legend-collapse')) {
        // 处理 legend
        this.render.removeClass(legend, 'f-legend-collapse');
        this.render.addClass(legend, 'f-legend-show');
        // 处理div
        this.render.removeStyle(div, 'height');
        this.render.removeStyle(div, 'overflow');
      } else {
        // 处理 legend
        this.render.removeClass(legend, 'f-legend-show');
        this.render.addClass(legend, 'f-legend-collapse');
        // 处理div
        this.render.setStyle(div, 'height', '0px');
        this.render.setStyle(div, 'overflow', 'hidden');
      }
      this.render.addClass(legend, 'f-legend-icon');
    }
  }
}