import { __decorate } from "tslib";
import { Component } from 'vue-property-decorator';
import './app-style2-indexview-layout.less';
import { AppServiceBase, Util } from '@ibizstudio/runtime';
import { AppLoadingService } from "../../../../app-service";
import { AppStyle2DefaultLayout } from "../app-style2-default-layout/app-style2-default-layout";
let AppStyle2IndexViewLayout = class AppStyle2IndexViewLayout extends AppStyle2DefaultLayout {
    constructor() {
        super(...arguments);
        /**
         * 应用loading服务
         *
         * @memberof AppLayout
         */
        this.appLoadingService = AppLoadingService.getInstance();
        /**
         * 抽屉状态
         *
         * @type {boolean}
         * @memberof AppStyle2IndexViewLayout
         */
        this.contextMenuDragVisiable = false;
        /**
         * 导航服务
         *
         * @memberof TabPageExpStyle2
         */
        this.navHistory = AppServiceBase.getInstance().getAppNavDataService();
    }
    /**
     * 是否显示标题栏
     *
     * @readonly
     * @memberof AppDefaultViewLayout
     */
    get showCaption() {
        if (this.viewInstance && this.$parent && Util.isExist(this.viewInstance.showCaptionBar)) {
            return this.viewInstance.showCaptionBar && !this.$parent.noViewCaption;
        }
        else {
            return true;
        }
    }
    /**
     * 路由列表
     *
     * @memberof AppStyle2IndexViewLayout
     */
    get routerList() {
        var _a, _b, _c;
        if (((_b = (_a = this.navHistory) === null || _a === void 0 ? void 0 : _a.historyList) === null || _b === void 0 ? void 0 : _b.length) > 0) {
            let temp = [];
            (_c = this.navHistory) === null || _c === void 0 ? void 0 : _c.historyList.forEach((item) => {
                temp.push(item.to.fullPath);
            });
            return temp;
        }
        else {
            return [];
        }
    }
    /**
     * 当前主题
     *
     * @memberof AppStyle2IndexViewLayout
     */
    selectTheme() {
        let _this = this;
        if (_this.$router.app.$store.state.selectTheme) {
            return _this.$router.app.$store.state.selectTheme;
        }
        else if (localStorage.getItem('theme-class')) {
            return localStorage.getItem('theme-class');
        }
        else {
            return 'app-theme-studio-dark';
        }
    }
    /**
     * 路由键值
     *
     * @memberof AppStyle2IndexViewLayout
     */
    get routerViewKey() {
        let _this = this;
        return _this.$route.fullPath;
    }
    /**
     * 初始化
     *
     * @memberof AppStyle2IndexViewLayout
     */
    created() {
        document.getElementsByTagName('html')[0].className = this.selectTheme();
        this.$uiState.changeLayoutState({
            styleMode: 'DEFAULT'
        });
    }
    /**
     * 初始化完毕
     *
     * @memberof AppStyle2IndexViewLayout
     */
    mounted() {
        setTimeout(() => {
            const el = document.getElementById('app-loading-x');
            if (el) {
                el.style.display = 'none';
            }
        }, 300);
    }
    /**
     * 绘制内容
     *
     * @memberof AppStyle2IndexViewLayout
     */
    render(h) {
        const viewClassNames = this.initRenderClassNames();
        if (this.viewInstance && this.viewInstance.mainMenuAlign && Object.is(this.viewInstance.mainMenuAlign, "CENTER")) {
            const { codeName } = this.viewInstance;
            return (<studio-view style={{ 'font-family': this.selectFont }} viewName={codeName === null || codeName === void 0 ? void 0 : codeName.toLowerCase()} viewTitle={this.model.srfCaption} viewInstance={this.viewInstance} viewparams={this.viewparams} context={this.context} class={viewClassNames}>
                {this.$slots.default}
            </studio-view>);
        }
        else {
            const styleMode = this.$uiState.layoutState.styleMode;
            let leftContent;
            switch (styleMode) {
                case 'DEFAULT':
                    leftContent = this.$slots.leftExp;
                    break;
                case 'STYLE2':
                    leftContent = this.$slots.leftNavMenu;
            }
            return (<app-layout ref="appLayout" style={{ 'font-family': this.selectFont }} class={viewClassNames}>
                    <template slot="header">
                        <app-header>
                            <template slot="header_left">
                                <div class="title">
                                    {this.viewInstance.enableAppSwitch ? <span class="menuicon" style="cursor: pointer;" on-click={() => this.contextMenuDragVisiable = !this.contextMenuDragVisiable}><icon type="md-menu"/>&nbsp;</span> : null}
                                    {this.showCaption ? this.model.srfCaption : null}
                                </div>
                            </template>
                            <template slot="header_right">
                                {this.$slots.headerMenus}
                                {this.$topRenderService.rightItemsRenders.map((fun) => fun(h))}
                                <app-lang style='font-size: 15px;padding: 0 10px;'></app-lang>
                                {<app-orgsector />}
                                {<app-user viewStyle={this.viewInstance.viewStyle}/>}
                                {/* {<app-custom-theme viewStyle={this.viewInstance.viewStyle}></app-custom-theme>} */}   
                            </template>
                        </app-header>
                        {this.$slots.default}
                        {this.viewInstance.enableAppSwitch ? <context-menu-drag viewStyle={this.viewInstance.viewStyle} contextMenuDragVisiable={this.contextMenuDragVisiable}></context-menu-drag> : null}
                    </template>
                    <app-content>
                        {leftContent ?
                    <template slot="content_left">
                                {leftContent}
                            </template> : null}
                        {styleMode === 'DEFAULT' ? this.$slots.tabPageExp : null}
                        <div class="view-warp" on-click={() => this.contextMenuDragVisiable = false}>
                            <app-keep-alive routerList={this.routerList}>
                                <router-view key={this.routerViewKey}></router-view>
                            </app-keep-alive>
                        </div>
                        {this.$slots.bootomExp ?
                    <template slot="content_bottom">
                                {this.$slots.bootomExp}
                            </template> : null}
                    </app-content>
                    <template slot="footer">
                        {this.viewInstance.defaultPage
                    ? <app-footer v-notification-signal={this.appLoadingService.isLoading} ref="footer"/>
                    : <app-footer ref="footer"/>}
                    </template>
                </app-layout>);
        }
    }
};
AppStyle2IndexViewLayout = __decorate([
    Component({})
], AppStyle2IndexViewLayout);
export { AppStyle2IndexViewLayout };