/**
 * @fileoverview added by tsickle
 * Generated from: lib/layout/main-container/index.component.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
import * as tslib_1 from "tslib";
// 组件类
import { Component, ContentChild, ElementRef, EventEmitter, HostListener, Input, Output, ViewChild, } from "@angular/core";
import { RSHeaderComponent } from "../rs-header/index.component";
import { DrawerComponent } from "../drawer/index.component";
import { DrawerService } from "../../service/drawer.service";
import { MultiTabComponent } from "../multi-tab/index.component";
import { debounce } from "lodash";
import ResizeObserver from "resize-observer-polyfill";
var MainContainerComponent = /** @class */ (function () {
    function MainContainerComponent(globalDrawer, elementRef) {
        var _this = this;
        this.globalDrawer = globalDrawer;
        this.elementRef = elementRef;
        this.isCollapsed = false; // 接收输入属性
        // 接收输入属性
        this.singleReuseUrls = []; //只能单个缓存的url
        //只能单个缓存的url
        this.onWidthChange = new EventEmitter();
        this.debouncedHandleResize = debounce((/**
         * @param {?} width
         * @return {?}
         */
        function (width) {
            // console.log("Debounced width change:", width);
            // 在这里处理防抖后的宽度变化逻辑
            _this.multiTabRef && _this.multiTabRef.setEllipsisTitle();
            _this.onWidthChange.emit(width);
        }), 300);
    }
    /**
     * @return {?}
     */
    MainContainerComponent.prototype.ngOnInit = /**
     * @return {?}
     */
    function () { };
    /**
     * @param {?} event
     * @return {?}
     */
    MainContainerComponent.prototype.onResize = /**
     * @param {?} event
     * @return {?}
     */
    function (event) {
        /** @type {?} */
        var screenWidth = window.innerWidth;
        if (screenWidth <= 992) {
            this.headerRef && this.headerRef.onToggleMenu(false);
        }
        else if (screenWidth < 1200) {
            this.headerRef && this.headerRef.onToggleMenu(true);
        }
        else {
            this.headerRef && this.headerRef.onToggleMenu(false);
        }
    };
    /**
     * @return {?}
     */
    MainContainerComponent.prototype.ngAfterViewInit = /**
     * @return {?}
     */
    function () {
        var _this = this;
        this.globalDrawer.setDrawer(this.drawer); // 设置抽屉组件
        // 设置抽屉组件
        /** @type {?} */
        var rightAside = this.elementRef.nativeElement.querySelector(".right-aside");
        this.resizeObserver = new ResizeObserver((/**
         * @param {?} entries
         * @return {?}
         */
        function (entries) {
            var e_1, _a;
            try {
                for (var entries_1 = tslib_1.__values(entries), entries_1_1 = entries_1.next(); !entries_1_1.done; entries_1_1 = entries_1.next()) {
                    var entry = entries_1_1.value;
                    /** @type {?} */
                    var width = entry.contentRect.width;
                    _this.debouncedHandleResize(width);
                }
            }
            catch (e_1_1) { e_1 = { error: e_1_1 }; }
            finally {
                try {
                    if (entries_1_1 && !entries_1_1.done && (_a = entries_1.return)) _a.call(entries_1);
                }
                finally { if (e_1) throw e_1.error; }
            }
        }));
        this.resizeObserver.observe(rightAside);
    };
    /**
     * @return {?}
     */
    MainContainerComponent.prototype.ngOnDestroy = /**
     * @return {?}
     */
    function () {
        if (this.resizeObserver) {
            this.resizeObserver.disconnect();
        }
    };
    /**
     * @return {?}
     */
    MainContainerComponent.prototype.onRightAsideClick = /**
     * @return {?}
     */
    function () {
        /** @type {?} */
        var screenWidth = window.innerWidth;
        if (screenWidth <= 992 && this.isCollapsed) {
            this.headerRef && this.headerRef.onToggleMenu();
        }
    };
    MainContainerComponent.decorators = [
        { type: Component, args: [{
                    selector: "rs-main-container",
                    template: "<div class=\"app-main-container-wrap\">\r\n  <div class=\"app-main-container\">\r\n    <ng-content select=\"[headerSlot]\"></ng-content>\r\n    <div class=\"main-page\">\r\n      <div class=\"left-aside\">\r\n        <ng-content select=\"[leftAsideSlot]\"></ng-content>\r\n      </div>\r\n      <div\r\n        class=\"right-aside\"\r\n        [ngClass]=\"{ isCollapsed: isCollapsed }\"\r\n        (click)=\"onRightAsideClick()\"\r\n      >\r\n        <ng-content select=\"[multiTabSlot]\"></ng-content>\r\n        <!-- <rs-multi-tab [singleReuseUrls]=\"singleReuseUrls\"></rs-multi-tab> -->\r\n        <div class=\"router-content\">\r\n          <rs-drawer #drawer>\r\n            <ng-content select=\"[routerSlot]\"></ng-content>\r\n          </rs-drawer>\r\n        </div>\r\n        <rs-footer></rs-footer>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
                    styles: [".app-main-container-wrap{width:100%;overflow:auto;height:100vh}@media (max-width:768px){.app-main-container-wrap{height:calc(100vh - 40px)}}.app-main-container{display:flex;flex-direction:column;height:100%;min-width:768px}.app-main-container .main-page{flex:1;height:0;display:flex;background-color:var(--rs-container-bg)}.app-main-container .left-aside{height:100%}.app-main-container .right-aside{width:0;flex:1;display:flex;flex-direction:column;padding-right:12px}.app-main-container .right-aside .router-content{flex:1;overflow:auto;max-width:1886px;width:100%;margin:0 auto}@media (max-width:992px){.app-main-container .right-aside{padding-left:12px}.app-main-container .right-aside.isCollapsed{position:relative}.app-main-container .right-aside.isCollapsed::after{content:\" \";position:absolute;z-index:5;inset:0;background-color:rgba(0,0,0,.2)}}"]
                }] }
    ];
    /** @nocollapse */
    MainContainerComponent.ctorParameters = function () { return [
        { type: DrawerService },
        { type: ElementRef }
    ]; };
    MainContainerComponent.propDecorators = {
        headerRef: [{ type: ContentChild, args: [RSHeaderComponent, { static: true },] }],
        multiTabRef: [{ type: ContentChild, args: [MultiTabComponent, { static: true },] }],
        drawer: [{ type: ViewChild, args: ["drawer", { static: false },] }],
        isCollapsed: [{ type: Input }],
        singleReuseUrls: [{ type: Input }],
        onWidthChange: [{ type: Output }],
        onResize: [{ type: HostListener, args: ["window:resize", ["$event"],] }]
    };
    return MainContainerComponent;
}());
export { MainContainerComponent };
if (false) {
    /** @type {?} */
    MainContainerComponent.prototype.headerRef;
    /** @type {?} */
    MainContainerComponent.prototype.multiTabRef;
    /** @type {?} */
    MainContainerComponent.prototype.drawer;
    /** @type {?} */
    MainContainerComponent.prototype.isCollapsed;
    /** @type {?} */
    MainContainerComponent.prototype.singleReuseUrls;
    /** @type {?} */
    MainContainerComponent.prototype.onWidthChange;
    /**
     * @type {?}
     * @private
     */
    MainContainerComponent.prototype.resizeObserver;
    /**
     * @type {?}
     * @private
     */
    MainContainerComponent.prototype.debouncedHandleResize;
    /**
     * @type {?}
     * @private
     */
    MainContainerComponent.prototype.globalDrawer;
    /**
     * @type {?}
     * @private
     */
    MainContainerComponent.prototype.elementRef;
}
//# sourceMappingURL=data:application/json;base64, 