import { __decorate } from "tslib";
import { Vue, Component } from 'vue-property-decorator';
import { on } from '../../../../utils';
import './app-content.less';
/**
 * 应用头部
 *
 * @export
 * @class AppContent
 * @extends {Vue}
 */
let AppContent = class AppContent extends Vue {
    /**
     * Creates an instance of AppContent.
     * @memberof AppContent
     */
    constructor() {
        super();
        on(window, 'keydown', (e) => {
            if (e.ctrlKey && e.keyCode === 192) {
                this.changeBottom();
            }
        });
    }
    /**
     * 组件创建完毕
     *
     * @protected
     * @memberof AppContent
     */
    created() {
        if (this.$slots.content_bottom) {
            this.$footerRenderService.registerRightItem(() => {
                return (<div title={this.$t('components.content.title')} class="action-item" on-click={() => this.changeBottom()}>
                        <svg t="1562669728550" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1118" width="18" height="18" class="icon">
                            <path d="M170.666667 170.666667h682.666666a85.333333 85.333333 0 0 1 85.333334 85.333333v512a85.333333 85.333333 0 0 1-85.333334 85.333333H170.666667a85.333333 85.333333 0 0 1-85.333334-85.333333V256a85.333333 85.333333 0 0 1 85.333334-85.333333z m0 85.333333v512h682.666666V256H170.666667z m341.333333 341.333333h256v85.333334h-256v-85.333334z m-43.306667-103.637333L317.866667 644.565333l-60.330667-60.373333 90.453333-90.453333-90.453333-90.538667L317.866667 342.869333l150.826666 150.826667z" p-id="1119"></path>
                        </svg>
                    </div>);
            }, 0);
        }
    }
    /**
     * 内容区底部区域，显示变更
     *
     * @protected
     * @param {boolean} [judge]
     * @memberof AppContent
     */
    changeBottom(judge) {
        if (judge !== undefined) {
            this.$uiState.changeLayoutState({
                contentBottomShow: judge,
            });
        }
        else {
            this.$uiState.changeLayoutState({
                contentBottomShow: !this.$uiState.layoutState.contentBottomShow,
            });
        }
    }
    /**
     * 绘制内容
     *
     * @protected
     * @param {boolean} isSlot
     * @returns {*}
     * @memberof AppContent
     */
    renderContent(isSlot) {
        return (<div slot={isSlot ? 'right' : null} class={{
                'app-content-right': true,
                'hidden-bottom': !this.$uiState.layoutState.contentBottomShow || !this.$slots.content_bottom,
            }}>
                <split mode="vertical" v-model={this.$uiState.layoutState.contentVerticalSplit} max={0.1}>
                    <div slot="top" class="app-content-exp">
                        {this.$slots.default}
                    </div>
                    {this.$slots.content_bottom ? (<div slot="bottom" class="app-content-bottom">
                            <div class="app-content-bottom-close" on-click={() => this.changeBottom(false)}>
                                <icon type="ios-arrow-down"/>
                            </div>
                            {this.$slots.content_bottom}
                        </div>) : null}
                </split>
            </div>);
    }
    /**
     * 绘制内容
     *
     * @returns {VNode}
     * @memberof AppContent
     */
    render() {
        let content = null;
        if (this.$uiState.layoutState.styleMode === 'STYLE2') {
            content = [<div class="app-content-nav">{this.$slots.content_left}</div>, this.renderContent(false)];
        }
        else {
            content = this.$slots.content_left ? (<split class={{ 'app-content-split': true, 'hidden-left': !this.$uiState.layoutState.leftExpContentShow }} v-model={this.$uiState.layoutState.contentHorizontalSplit} min={0.1} max={0.5}>
                    <div slot="left" class="app-content-left">
                        {this.$slots.content_left}
                    </div>
                    {this.renderContent(true)}
                </split>) : (this.renderContent(false));
        }
        return <div class="app-content">{content}</div>;
    }
};
AppContent = __decorate([
    Component({})
], AppContent);
export { AppContent };