import { style } from '@angular/animations';
import { Directive, Injectable, Input, EventEmitter, Output, ElementRef, OnInit, OnDestroy, ChangeDetectorRef, HostBinding, Renderer2, RendererStyleFlags2 } from '@angular/core';
import { ViewChangeService } from './view-change.service';
//视图区域
@Directive({
    selector: '[fViewItem]'
})
export class FarrisViewItemDirective implements OnInit, OnDestroy {
    /**使用方式
     * <div [fViewItem]="'type11'" [fViewGroupId]="'group2'">
         视图的内容区域
       </div>
     */
    // 当前项的标记
    @Input('fViewItem') viewItemType: string;
    // 当前项所属的组
    @Input('fViewGroupId') fViewGroupId: string = 'default';

    constructor(
        private elementRef: ElementRef,
        private viewChangeService: ViewChangeService,
        private render: Renderer2
    ) {

    }

    public ngOnInit(): void {
        // 追加到服务中统一管理
        this.viewChangeService.addViewItem(this.viewItemType, this.fViewGroupId);
        // 
        this.viewChangeService.getChangeCurrentViewId().subscribe((currentViewType: any): void => {
            if (!currentViewType) return;
            if (!currentViewType[this.fViewGroupId]) {
                return;
            }
            else if (currentViewType[this.fViewGroupId] == this.viewItemType) {
                // this.render.setStyle(this.elementRef.nativeElement,'display','');
                this.render.removeClass(this.elementRef.nativeElement, 'f-viewchange-view-none');
            }
            else {
                // this.render.setStyle(this.elementRef.nativeElement,'display','none',0);
                this.render.addClass(this.elementRef.nativeElement, 'f-viewchange-view-none');
            }
        });
    }

    public ngOnDestroy(): void {
        this.viewChangeService.removeViewItem(this.viewItemType, this.fViewGroupId);
    }
}