import { Directive, HostBinding, Input, HostListener, OnInit, Renderer2, ElementRef } from '@angular/core';
import { FarrisMenuService } from '../service/menu.service';
import { FarrisSubMenuService } from '../service/sub-menu.service';
import { delay } from 'rxjs/operators';
@Directive(
    {
        selector: '[farrisMenuItem]'
    }
)

export class FarrisMenuItemDirective implements OnInit {

    /* 是否展开状态 */
    @Input()
    @HostBinding('class.f-component-dpmenu-item-disabled') disable = false;

    /* 是否选择状态 */
    @Input()
    @HostBinding('class.f-component-dpmenu-submenu-selected') selected = false;

    @HostBinding('class.f-component-dpmenu-item') dpMenuItem = true;

    opened: boolean;

    isChildOfSub: boolean;
    isChildOfMenuGroup: boolean;

    isSetPaddingLeft = false;
    level = 1;

    constructor(
        private el: ElementRef,
        private render: Renderer2,
        private menuService: FarrisMenuService,
        private submenuService: FarrisSubMenuService
    ) { }

    @HostListener('click', ['$event'])
    clickEvent(e: MouseEvent) {
        e.stopPropagation();
        this.menuService.menuClick$.next(this);
    }

    ngOnInit() {
        // 延迟获取层级关系
        // this.submenuService.level$
        //     .pipe(delay(1000))
        //     .subscribe(value => {
        //         if (this.isChildOfSub) {
        //             // const parent = this.render.parentNode(this.el.nativeElement);
        //             // const parentParent = this.render.parentNode(parent);
        //             // const level = value + 1;
        //             this.level = this.level + 1;
        //             console.log('submenu', this.level);

        //         }
        //         if (this.isChildOfMenuGroup) {
        //             // const parent = this.render.parentNode(this.el.nativeElement);
        //             // const parentParent = this.render.parentNode(parent);
        //             // const level = value + 1;
        //             // console.log('menugroup', this.level);

        //             this.level = this.level + 1;
        //             // this.render.setStyle(this.el.nativeElement, 'padding-left', `${16 * level}px`);
        //         }
        //         this.render.setStyle(this.el.nativeElement, 'padding-left', `${16 * this.level}px`);
        //     });


        // this.submenuService.isChildofSub$.subscribe(value => {
        //     this.isSetPaddingLeft = value;
        // });
    }

    setPaddingLeft() {
        if (!this.isSetPaddingLeft) {
            // 设置paddingLeft
            // 计算paddingLeft
            const paddingLeft = this.el.nativeElement.paddingLeft;
            let originPaddingLeft = paddingLeft;
            if (!paddingLeft) {
                originPaddingLeft = 0;
            }
        }
    }


    setLevel(value: number) {
        // this.level = value;
        // this.render.setStyle(this.el.nativeElement, 'padding-left', `${16 * this.level}px`);
    }
}