import { ChangeDetectorRef } from '@angular/core';
import {
    Component, Input, TemplateRef, ContentChild,
    HostBinding, ViewChild, ViewContainerRef, EventEmitter,
    Output, ContentChildren, QueryList, OnInit, AfterContentInit
} from '@angular/core';
import { FarrisMenuService } from '../service/menu.service';
import { FarrisMenuItemDirective } from '../directive/menu-item.directive';
import { FarrisSubMenuService } from '../service/sub-menu.service';
@Component(
    {
        selector: '[farrisSubmenu]',
        templateUrl: './sub-menu.component.html',
        providers: [FarrisSubMenuService]
    }
)

export class FarrisSubMenuComponent implements OnInit, AfterContentInit {

    @ViewChild('titleViewf', { read: ViewContainerRef }) titleViewf: ViewContainerRef;

    @ContentChildren(FarrisSubMenuComponent) listOfSubmenuComponent: QueryList<FarrisSubMenuComponent>;

    @ContentChildren(FarrisMenuItemDirective) listOfMenuItemDirective: QueryList<FarrisMenuItemDirective>;

    /* 副菜单  标题 */
    @Input()
    get title() {
        return this.fTitle;
    }
    set title(value: string | TemplateRef<any>) {
        if (value instanceof TemplateRef) {
            this.titleViewf.createEmbeddedView(value);
        } else {
            this.fTitle = value;
        }
    }


    /* 禁用 */
    @Input()
    @HostBinding('class.f-component-dpmenu-submenu-disabled') disable = false;


    @Output() fOpenChange = new EventEmitter<any>();

    /* 打开子列表 */
    // @Input()

    /* 副菜单 标题模板 */
    @ContentChild('titleTemplate') titleTemplate: TemplateRef<any>;

    /* f-component-dpmenu-submenu f-component-dpmenu-submenu-open f-component-dpmenu-submenu-selected f-component-dpmenu-submenu-inline */
    @HostBinding('class.f-component-dpmenu-submenu') isSubmenu = true;
    @HostBinding('class.f-component-dpmenu-submenu-inline') isInline = true;

    @Input()
    @HostBinding('class.f-component-dpmenu-submenu-open')
    get open() {
        return this.fOpen;
    }

    set open(value: boolean) {
        this.fOpen = value;
    }

    isChildOfSub: boolean;

    level = 1;
    // isChildOfMenu
    /* 选中样式 */
    @HostBinding('class.f-component-dpmenu-submenu-selected')
    get selected() {
        return this.open;
    }

    fTitle: string | TemplateRef<any>;
    fOpen = false;
    constructor(
        private menuService: FarrisMenuService,
        private subMenuSer: FarrisSubMenuService,
        private changeRef: ChangeDetectorRef
    ) { }

    ngOnInit() {

    }

    ngAfterContentInit() {
        if (this.listOfMenuItemDirective) {
            // this.subMenuSer.level$.next(this.leve);
            this.listOfMenuItemDirective.forEach(menuItem => {
                menuItem.isChildOfSub = true;
                menuItem.level = this.level + 1;
            });
        }
        if (this.listOfSubmenuComponent) {
            this.listOfSubmenuComponent.forEach(submenu => {
                submenu.isChildOfSub = true;
            });
        }
    }
    /* 打开子列表 */
    openList(e: MouseEvent) {
        e.stopPropagation();
        this.open = !this.open;
        // this.updateSubmenuLevel(this.open);
        this.fOpenChange.emit(this.open);
    }


    /* 更新submenu下面menu-item层级 */
    updateSubmenuLevel(open: boolean) {
        if (this.open) {
            this.subMenuSer.level++;
            this.listOfMenuItemDirective.forEach(menuItem => {
                menuItem.setLevel(this.subMenuSer.level);
            });
        } else {
            this.subMenuSer.level--;
            this.listOfMenuItemDirective.forEach(menuItem => {
                menuItem.setLevel(this.subMenuSer.level);
            });
        }
    }



    /* menu-item是否展开 */


}