import {Component, Prop, Vue, Emit, Watch} from 'vue-property-decorator';

@Component
export default class EflyNavMenu extends Vue {
    @Prop({default: () => ''}) private defaultActive!: any[];
    @Prop({default: () => 'icon-down'}) private downIcon!: any[];

    private status: any = {
        stretch: false,                // 伸缩 -- icon:图标|
    }

    private activeItem: any;


    private mounted() {
        window.addEventListener('click', () => {
            this.hideGroup()
        })
        this.updateDefaultActive(this);
    }

    /**
     * 隐藏
     */
    private hideGroup() {
        if (this.activeItem && this.activeItem.tier > 1) {
            this.activeItem.status.groupShow = false;
        }
    }


    @Watch('defaultActive')
    private watchDefaultActivity(value: any) {
        this.updateDefaultActive(this);
    }

    private updateDefaultActive(that: any) {
        let children: any = that.$children;
        for (let i in children) {
            if (children[i].$options._componentTag === 'efly-nav-menu-group') {
                this.updateDefaultActive(children[i])
            } else if (children[i].$options._componentTag === 'efly-nav-menu-item') {
                children[i].getDefaultActive();
                if (children[i].status.group) {
                    this.updateDefaultActive(children[i])
                }
            }
        }
    }


    /**
     * 重置所有状态
     * @param that
     * @param tier
     */
    private resetActive(that: any = this) {
        let children: any = that.$children;
        for (let i in children) {
            if (children[i].$options._componentTag === 'efly-nav-menu-group') {
                this.resetActive(children[i])
            } else if (children[i].$options._componentTag === 'efly-nav-menu-item') {
                children[i].active = false;
                if (children[i].tier >= 2) {
                    children[i].status.groupShow = false;
                }
                children[i].$forceUpdate();
                if (children[i].status.group) {
                    this.resetActive(children[i])
                }
            }
        }
    }

    private resetGroup(that: any = this){
        let children: any = that.$children;
        for (let i in children) {
            if (children[i].$options._componentTag === 'efly-nav-menu-group') {
                this.resetGroup(children[i])
            } else if (children[i].$options._componentTag === 'efly-nav-menu-item') {
                if (children[i].tier >= 2) {
                    children[i].status.groupShow = false;
                }
                children[i].$forceUpdate();
                if (children[i].status.group) {
                    this.resetGroup(children[i])
                }
            }
        }
    }

    private resetStretch(that: any) {
        let children: any = that.$children;
        for (let i in children) {
            if (children[i].$options._componentTag === 'efly-nav-menu-group') {
                this.resetStretch(children[i])
            } else if (children[i].$options._componentTag === 'efly-nav-menu-item') {
                children[i].status.stretch = this.status.stretch;
                children[i].$forceUpdate();
                if (children[i].status.group) {
                    this.resetStretch(children[i]);
                }
            }
        }
    }


    private stretch() {
        this.status.stretch = !this.status.stretch ;
        this.resetStretch(this)
        this.$emit('indentChange', this.status.stretch)
    }


    private getActive(item: any) {
        this.activeItem = item;
    }

    private selectItem(index: any) {
        if(index !== this.defaultActive){
            this.$emit('change', index);
        }
    }


}