import { __decorate } from "tslib";
import { Vue, Prop } from 'vue-property-decorator';
/**
 * 视图布局组件基类
 *
 * @export
 * @class StudioViewBase
 * @extends {Vue}
 */
export class StudioViewBase extends Vue {
    constructor() {
        super(...arguments);
        /**
         * 是否显示视图头
         *
         * @protected
         * @type {boolean}
         * @memberof StudioViewBase
         */
        this.isShowHeader = true;
    }
    /**
     * 组件创建完毕
     *
     * @memberof StudioViewBase
     */
    created() {
        if (this.hiddenHeader) {
            this.isShowHeader = false;
        }
        else {
            this.isShowHeader =
                this.$slots.title ||
                    this.$slots.toolbar ||
                    this.$slots.quickSearch ||
                    this.$slots.quickSearchForm ||
                    this.$slots.quickGroupSearch
                    ? true
                    : false;
        }
    }
    /**
     * 计算容器样式
     *
     * @protected
     * @param {{ [str: string]: boolean }} [classNames] 样式名称对象
     * @returns {{ [str: string]: boolean }}
     * @memberof StudioViewBase
     */
    getContainerClass(classNames) {
        const data = {
            'studio-view': true,
            'view-container': true,
            'hidden-header': !this.isShowHeader,
            'show-footer': this.$slots.footer ? true : false,
        };
        if (classNames) {
            Object.assign(data, classNames);
        }
        return data;
    }
    /**
     * 绘制视图内容
     *
     * @protected
     * @returns {*}
     * @memberof StudioViewBase
     */
    renderContent() {
        return [
            this.$slots.topMessage ? this.$slots.topMessage : null,
            this.isShowHeader ? (<div class="view-header" key="view-header">
                    {this.$slots.title ? <div class="title">{this.$slots.title}</div> : null}
                    {this.$slots.toolbar ? <div class="toolbar">{this.$slots.toolbar}</div> : null}
                    {this.$slots.quickGroupSearch ? (<div class="quick-group-search">{this.$slots.quickGroupSearch}</div>) : null}
                    {this.$slots.quickSearchForm ? (<div class="quick-search-form">{this.$slots.quickSearchForm}</div>) : null}
                    {this.$slots.quickSearch ? <div class="quick-search">{this.$slots.quickSearch}</div> : null}
                </div>) : null,
            <div class={{ 'view-content': true, 'show-search-form': this.$slots.searchForm }} key="view-content">
                {this.$slots.bodyMessage ? this.$slots.bodyMessage : null}
                {this.$slots.searchForm ? <div class="search-form-wrapper">{this.$slots.searchForm}</div> : null}
                {this.$slots.searchBar ? <div class="search-bar-wrapper">{this.$slots.searchBar}</div> : null}
                <div class="content-wrapper">{this.$slots.default}</div>
            </div>,
            this.$slots.bottomMessage ? this.$slots.bottomMessage : null,
            this.$slots.footer ? (<div class="view-footer" key="view-footer">
                    {this.$slots.footer}
                </div>) : null,
        ];
    }
    /**
     * 绘制内容
     *
     * @returns {*}
     * @memberof StudioViewBase
     */
    render() {
        return (<div class={this.getContainerClass()}>
                <app-studioaction viewInstance={this.viewInstance} context={this.context} viewparams={this.viewparams} viewTitle={this.viewTitle} viewName={this.viewInstance.codeName.toLowerCase()}></app-studioaction>
                {this.renderContent()}
            </div>);
    }
}
__decorate([
    Prop({ default: '' })
], StudioViewBase.prototype, "viewName", void 0);
__decorate([
    Prop({ default: '' })
], StudioViewBase.prototype, "viewTitle", void 0);
__decorate([
    Prop({ default: false })
], StudioViewBase.prototype, "hiddenHeader", void 0);
__decorate([
    Prop()
], StudioViewBase.prototype, "viewInstance", void 0);
__decorate([
    Prop()
], StudioViewBase.prototype, "context", void 0);
__decorate([
    Prop()
], StudioViewBase.prototype, "viewparams", void 0);