import { Component, OnInit, ViewEncapsulation, ElementRef } from '@angular/core'
import { SideBarService } from '../../services/side-bar.service'
@Component({
    selector: 'farris-doc-main',
    templateUrl: './main.component.html',
    styleUrls: ['./main.component.scss'],
    encapsulation: ViewEncapsulation.None
})
export class MainComponent implements OnInit {
    contentDom: any
    titleDom: any
    anchorBallTop: number
    isShowSideBar: boolean
    titleOffsetTop: number
    constructor(
        private el: ElementRef,
        private sideBarService: SideBarService
    ) {
        this.isShowSideBar = sideBarService.isShowSideBar
        //this.titleOffsetTop = sideBarService.titleOffsetTop
    }

    ngOnInit() {
        this.sideBarService.titleOffsetTopUpdated.subscribe(val => {
            this.contentDom.scrollTop = this.sideBarService.getTitleOffsetTop()
        })
    }
    ngDoCheck(): void {
        if (this.sideBarService.isShowSideBar !== this.isShowSideBar) {
            this.isShowSideBar = this.sideBarService.isShowSideBar
        }
        // if (this.sideBarService.titleOffsetTop !== this.titleOffsetTop) {
        //     this.titleOffsetTop = this.sideBarService.titleOffsetTop
        //     this.contentDom.scrollTop = this.titleOffsetTop
        // }
    }
    ngAfterViewInit() {
        this.contentDom = this.el.nativeElement.querySelector(
            '.content-wrapper'
        )
        this.onScroll()
    }
    onScroll() {
        // 初始化锚点位置
        // const firstTitleTop = this.titleDom[0].offsetTop
        // if (firstTitleTop < 100) {
        //     setTimeout(() => {
        //         this.anchorBallTop = 0
        //     }, 0)
        // }
        let idle = 50,
            timeOut
        this.contentDom.addEventListener('scroll', () => {
            clearTimeout(timeOut) // debounce
            let _top: number
            let contentDom_top = this.contentDom.scrollTop
            timeOut = setTimeout(() => {
                // for (let i = 0; i < this.titleDom.length; i++) {
                //     let titleDom_top = this.titleDom[i].offsetTop
                //     if (contentDom_top > titleDom_top - 200) {
                //         _top = i
                //     }
                // }
                // this.anchorBallTop = _top
                this.sideBarService.setTitleOffsetTop(contentDom_top)
            }, idle)
        })
    }
}