import { __decorate } from "tslib";
import { ModelTool, Util } from '@ibizstudio/runtime';
import Vue from 'vue';
import { Prop, Component } from 'vue-property-decorator';
import { PluginService } from '../../../../app-service/common-service/plugin-service';
import './app-default-view-layout.less';
/**
 * 视图基础布局
 *
 * @export
 * @class AppDefaultViewLayout
 * @extends {Vue}
 */
let AppDefaultViewLayout = class AppDefaultViewLayout extends Vue {
    constructor() {
        super(...arguments);
        /**
         * 是否展示视图工具栏
         *
         * @memberof AppDefaultViewLayout
         */
        this.viewIsshowToolbar = false;
        /**
         * FLEX布局时类名映射
         *
         * @memberof AppDefaultViewLayout
         */
        this.classObj = {
            FIELD: 'app-viewlayoutpanel-field',
            RAWITEM: 'app-viewlayoutpanel-rowitem',
            TABPAGE: 'app-viewlayoutpanel-tabpage',
            TABPANEL: 'app-viewlayoutpanel-tabpanel',
        };
    }
    /**
     * 是否显示标题栏
     *
     * @readonly
     * @memberof AppDefaultViewLayout
     */
    get showCaption() {
        if (this.viewInstance && this.$parent) {
            return this.viewInstance.showCaptionBar && !this.$parent.noViewCaption;
        }
        else {
            return true;
        }
    }
    /**
     * Vue生命周期，实例创建完成
     *
     * @memberof AppDefaultViewLayout
     */
    created() {
        this.viewIsshowToolbar = ModelTool.findPSControlByType("TOOLBAR", this.viewInstance.getPSControls()) ? true : false;
        this.viewLayoutPanel = this.viewInstance.getPSViewLayoutPanel();
    }
    /**
     * 绘制头部内容
     *
     * @memberof AppDefaultViewLayout
     */
    renderViewHeader() {
        return [
            this.showCaption ? <span class='caption-info'>{this.$slots.captionInfo ? this.$slots.captionInfo : this.model.srfCaption}</span> : null,
            this.viewIsshowToolbar ? <div class='toolbar-container'>
                {this.$slots.toolbar}
            </div> : null,
        ];
    }
    /**
     * 绘制内容
     *
     * @memberof AppDefaultViewLayout
     */
    renderContent() {
        let cardClass = {
            'view-card': true,
            'view-no-caption': !this.showCaption,
            'view-no-toolbar': !this.viewIsshowToolbar,
        };
        return (<card class={cardClass} disHover={true} bordered={false}>
                {(this.showCaption || this.viewIsshowToolbar) && (<div slot='title' class='header-container' key='view-header'>
                        {this.renderViewHeader()}
                    </div>)}
                {this.$slots.topMessage}
                {this.$slots.searchForm}
                <div class='content-container'>
                    {(this.$slots.quickGroupSearch || this.$slots.quickSearch) && <div style="margin-bottom: 6px;">
                        {this.$slots.quickGroupSearch}
                        {this.$slots.quickSearchForm}
                        {this.$slots.quickSearch}
                    </div>}
                    {this.$slots.bodyMessage}
                    {this.$slots.default}
                </div>
                {this.$slots.bottomMessage}
            </card>);
    }
    /**
     * 绘制布局
     *
     * @memberof AppDefaultViewLayout
     */
    render(h) {
        var _a, _b;
        let viewClass = {
            'view-container': true,
            'view-default': true,
            [this.viewInstance.viewType.toLowerCase()]: true,
            [Util.srfFilePath2(this.viewInstance.codeName)]: true,
            [((_a = this.viewInstance.getPSSysCss()) === null || _a === void 0 ? void 0 : _a.cssName) || '']: true,
        };
        return (<div class={viewClass}>
                <app-studioaction viewInstance={this.viewInstance} context={this.context} viewparams={this.viewparams} viewName={this.viewInstance.codeName.toLowerCase()} viewTitle={(_b = this.model) === null || _b === void 0 ? void 0 : _b.srfCaption}/>
                {(this.viewLayoutPanel && this.viewLayoutPanel.useDefaultLayout) ? this.renderContent() : this.renderViewLayoutPanel()}
            </div>);
    }
    /**
     * 绘制视图布局面板
     *
     * @memberof AppDefaultViewLayout
     */
    renderViewLayoutPanel() {
        var _a;
        if ((_a = this.viewLayoutPanel) === null || _a === void 0 ? void 0 : _a.layoutBodyOnly) {
            return this.renderLayouBodyOnly();
        }
        else {
            return this.renderRootPSPanelItems();
        }
    }
    /**
     * 绘制顶级面板成员集合
     *
     * @memberof AppDefaultViewLayout
     */
    renderRootPSPanelItems() {
        var _a, _b, _c, _d, _e;
        let rootStyle = { 'height': '100%' };
        let layout = (_a = this.viewLayoutPanel) === null || _a === void 0 ? void 0 : _a.getPSLayout();
        let layoutMode = (_c = (_b = this.viewLayoutPanel) === null || _b === void 0 ? void 0 : _b.getPSLayout()) === null || _c === void 0 ? void 0 : _c.layout;
        if (layout && layoutMode == 'FLEX') {
            Object.assign(rootStyle, { 'display': 'flex' });
        }
        return <row class="app-viewlayout-panel" style={rootStyle}>
            {(_e = (_d = this.viewLayoutPanel) === null || _d === void 0 ? void 0 : _d.getRootPSPanelItems()) === null || _e === void 0 ? void 0 : _e.map((container, index) => {
                return this.renderByDetailType(container);
            })}
        </row>;
    }
    /**
    * 仅布局内容区模式绘制
    *
    * @memberof AppDefaultViewLayout
    */
    renderLayouBodyOnly() {
        let cardClass = {
            'view-card': true,
            'view-no-caption': !this.showCaption,
            'view-no-toolbar': !this.viewIsshowToolbar || (this.viewIsshowToolbar && !this.$slots.toolbar),
        };
        return (<card class={cardClass} disHover={true} bordered={false}>
                {(this.showCaption || (this.viewIsshowToolbar && this.$slots.toolbar)) && (<div slot='title' class='header-container' key='view-header'>
                        {[this.showCaption ? <span class='caption-info'>{this.$slots['layout-captionbar'] ? this.$slots['layout-captionbar'] : this.model.srfCaption}</span> : null,
                    this.viewIsshowToolbar ? <div class='toolbar-container'>
                {this.$slots.toolbar}
            </div> : null]}
                    </div>)}
                {this.$slots.topMessage}
                <div class='content-container'>
                    {this.$slots.bodyMessage}
                    {this.renderRootPSPanelItems()}
                </div>
                {this.$slots.bottomMessage}
            </card>);
    }
    /**
     * 根据detailType绘制对应detail
     *
     * @param {*} modelJson
     * @memberof AppDefaultViewLayout
     */
    renderByDetailType(modelJson, parent) {
        if (modelJson.getPSSysPFPlugin()) {
            const pluginInstance = PluginService.getInstance().getPluginInstance("CONTROLITEM", modelJson.getPSSysPFPlugin().pluginCode);
            if (pluginInstance) {
                return pluginInstance.renderCtrlItem(this.$createElement, modelJson, this, this.context);
            }
        }
        switch (modelJson.itemType) {
            case 'CONTAINER':
                return this.renderContainer(modelJson);
            case 'TABPANEL':
                return this.renderTabPanel(modelJson, parent);
            case 'TABPAGE':
                return this.renderTabPage(modelJson);
            case 'FIELD':
                return this.renderField(modelJson);
            case 'RAWITEM':
                return this.renderRawitem(modelJson);
            case 'CTRLPOS':
                return this.renderCtrlPos(modelJson, parent);
        }
    }
    /**
     * 绘制面板Container
     *
     * @memberof AppDefaultViewLayout
     */
    renderContainer(container, isRootContainer = false) {
        var _a, _b, _c, _d, _e, _f;
        const panelItems = container.getPSPanelItems() || [];
        if (panelItems.length == 0) {
            return null;
        }
        let layout = container.getPSLayout();
        let layoutMode = (_a = container.getPSLayout()) === null || _a === void 0 ? void 0 : _a.layout;
        let css = container.getPSSysCss();
        let containerClass = {
            'app-viewlayoutpanel-container': true,
            [`viewlayoutpanel-container-${container.name.toLowerCase()}`]: true,
            'show-caption': container.showCaption
        };
        if (isRootContainer && css && css.cssName) {
            Object.assign(containerClass, { [css.cssName]: true });
        }
        let containerStyle = {
            width: container.width ? container.width + 'px' : '',
            height: container.height ? container.height + 'px' : '',
        };
        // FLEX布局
        if (layout && layoutMode == 'FLEX') {
            const containerGrow = (_b = container.getPSLayoutPos()) === null || _b === void 0 ? void 0 : _b.grow;
            Object.assign(containerStyle, {
                'overflow': 'auto',
                'display': 'flex',
                'flex-grow': containerGrow && containerGrow != -1 ? containerGrow : 0
            });
            const { dir, align, vAlign } = layout;
            if (dir) {
                Object.assign(containerStyle, { 'flex-direction': dir });
            }
            if (align) {
                Object.assign(containerStyle, { 'justify-content': align });
            }
            if (vAlign) {
                Object.assign(containerStyle, { 'align-items': vAlign });
            }
            return (<i-col style={containerStyle} class={containerClass}>
                    {container.showCaption ? <div class="viewlayoutpanel-container-header">
                        <span>{this.$tl((_d = (_c = container.getCapPSLanguageRes) === null || _c === void 0 ? void 0 : _c.call(container)) === null || _d === void 0 ? void 0 : _d.lanResTag, container.caption)}</span>
                    </div> : null}
                    {panelItems.map((item, index) => {
                    var _a;
                    // 子样式
                    let { height, width, itemType } = item;
                    let detailStyle = {};
                    if (height) {
                        detailStyle.height = height + 'px';
                    }
                    switch (itemType) {
                        case 'CONTAINER':
                            return this.renderByDetailType(item, container);
                        case 'CTRLPOS':
                            detailStyle.width = width ? width + 'px' : '100%';
                            break;
                    }
                    if (item.getPSLayoutPos()) {
                        let grow = (_a = item.getPSLayoutPos()) === null || _a === void 0 ? void 0 : _a.grow;
                        detailStyle.flexGrow = grow != -1 ? grow : 0;
                    }
                    // 自定义类名
                    const controlClassName = this.renderDetailClass(item);
                    return (<div style={detailStyle} class={controlClassName}>
                                {this.renderByDetailType(item, container)}
                            </div>);
                })}
                </i-col>);
        }
        else {
            // 栅格布局
            let attrs = this.getGridLayoutProps(null, container);
            return (<i-col {...{ props: attrs }} style={containerStyle} class={containerClass}>
                    {container.showCaption ? <row class="viewlayoutpanel-container-header">
                        <span>{this.$tl((_f = (_e = container.getCapPSLanguageRes) === null || _e === void 0 ? void 0 : _e.call(container)) === null || _f === void 0 ? void 0 : _f.lanResTag, container.caption)}</span>
                    </row> : null}
                    {panelItems.map((item, index) => {
                    let { height, width, itemType } = item;
                    let detailStyle = {};
                    if (height) {
                        detailStyle.height = height + 'px';
                    }
                    switch (itemType) {
                        case 'CONTAINER':
                            return this.renderByDetailType(item, container);
                        case 'CTRLPOS':
                            detailStyle.width = width ? width + 'px' : '100%';
                            break;
                    }
                    // 栅格布局
                    let attrs = this.getGridLayoutProps(container, item);
                    // 自定义类名
                    const controlClassName = this.renderDetailClass(item);
                    return (<i-col {...{ props: attrs }} style={detailStyle} class={controlClassName}>
                                {this.renderByDetailType(item, container)}
                            </i-col>);
                })}
                </i-col>);
        }
    }
    /**
     * 绘制面板TabPanel
     *
     * @memberof AppDefaultViewLayout
     */
    renderTabPanel(modelJson, parent) {
        const tabPages = modelJson.getPSPanelTabPages() || [];
        let activedTabPage = tabPages.length > 0 ? tabPages[0].name : '';
        const customStyle = {};
        if (modelJson.width) {
            Object.assign(customStyle, { width: modelJson.width + 'px' });
        }
        if (modelJson.height) {
            Object.assign(customStyle, { height: modelJson.height + 'px' });
        }
        return (<el-tabs value={activedTabPage} class={this.renderDetailClass(modelJson)} style={parent ? {} : customStyle}>
                {tabPages.length > 0 ?
                tabPages.map((item, index) => {
                    return this.renderTabPage(item);
                }) : null}
            </el-tabs>);
    }
    /**
     * 绘制面板TabPage
     *
     * @memberof AppDefaultViewLayout
     */
    renderTabPage(modelJson) {
        var _a, _b;
        let label = this.$tl((_b = (_a = modelJson.getCapPSLanguageRes) === null || _a === void 0 ? void 0 : _a.call(modelJson)) === null || _b === void 0 ? void 0 : _b.lanResTag, modelJson.caption) || '分页';
        const panelItems = modelJson.getPSPanelItems() || [];
        return (<el-tab-pane label={label} name={modelJson.name} class={this.renderDetailClass(modelJson)}>
                {panelItems.map((item, index) => {
                return this.renderByDetailType(item);
            })}
            </el-tab-pane>);
    }
    /**
     * 绘制面板Field
     *
     * @memberof AppDefaultViewLayout
     */
    renderField(modelJson) {
        var _a;
        let { name, caption, hidden, showCaption } = modelJson;
        const editor = modelJson.getPSEditor();
        let labelPos = 'LEFT';
        const viewFieldName = modelJson.viewFieldName;
        return (!hidden && (<app-panel-field name={viewFieldName} labelPos={labelPos} caption={this.$tl((_a = modelJson.getCapPSLanguageRes()) === null || _a === void 0 ? void 0 : _a.lanResTag, caption)} isEmptyCaption={!showCaption} data={this.context} value={this.context[viewFieldName]}>
                    {editor && (<app-default-editor value={this.context[viewFieldName]} editorInstance={editor} containerCtrl={this.viewInstance} parentItem={modelJson} contextData={this.context} context={this.context} viewparams={this.viewparams} disabled={false}/>)}
                </app-panel-field>));
    }
    /**
     * 绘制面板Rawitem
     *
     * @memberof AppDefaultViewLayout
     */
    renderRawitem(modelJson) {
        var _a, _b, _c;
        let { rawItemHeight, rawItemWidth, contentType, htmlContent, rawContent } = modelJson;
        let sysCssName = (_a = modelJson.getPSSysCss()) === null || _a === void 0 ? void 0 : _a.cssName;
        let sysImage = (_b = modelJson.getPSSysImage()) === null || _b === void 0 ? void 0 : _b.cssClass;
        let sysImgurl = (_c = modelJson.getPSSysImage()) === null || _c === void 0 ? void 0 : _c.imagePath;
        const style = {
            width: rawItemWidth > 0 ? `${rawItemWidth}px` : '',
            height: rawItemHeight > 0 ? `${rawItemHeight}px` : '',
        };
        let content;
        if (Object.is(contentType, 'RAW')) {
            content = rawContent;
        }
        else if (Object.is(contentType, 'HTML')) {
            content = htmlContent;
        }
        if (content) {
            const items = content.match(/\{{(.+?)\}}/g);
            if (items) {
                items.forEach((item) => {
                    content = content.replace(/\{{(.+?)\}}/, eval(item.substring(2, item.length - 2)));
                });
            }
            content = content.replaceAll('&lt;', '<');
            content = content.replaceAll('&gt;', '>');
            content = content.replaceAll('&amp;nbsp;', ' ');
            content = content.replaceAll('&nbsp;', ' ');
        }
        return (<app-rawitem class={sysCssName} style={style} viewparams={this.viewparams} context={this.context} contentType={contentType} imageClass={sysImage} imgUrl={sysImgurl} content={content}>
            </app-rawitem>);
    }
    /**
     * 绘制控件占位
     *
     * @memberof AppDefaultViewLayout
     */
    renderCtrlPos(modelJson, parent) {
        var _a, _b;
        const { width, height, name } = modelJson;
        if (parent) {
            return this.$slots[`layout-${name}`];
        }
        else {
            let ctrlStyle = { width: width ? width + 'px' : '100%' };
            if (height) {
                Object.assign(ctrlStyle, { height: height + 'px' });
            }
            let ctrlCss = ((_b = (_a = modelJson.getPSSysCss) === null || _a === void 0 ? void 0 : _a.call(modelJson)) === null || _b === void 0 ? void 0 : _b.cssName) || '';
            return <div class={ctrlCss} style={ctrlStyle}>
                {this.$slots[`layout-${name}`]}
            </div>;
        }
    }
    /**
     * 获取FLEX布局时类名
     * @param AppDefaultViewLayout
     */
    renderDetailClass(item) {
        var _a;
        // 映射类名
        let detailClass = this.classObj[item.itemType] || '';
        detailClass += ` viewlayoutpanel-${item.itemType.toLowerCase()}-${item.name.toLowerCase()}`;
        if ((_a = item === null || item === void 0 ? void 0 : item.getPSSysCss) === null || _a === void 0 ? void 0 : _a.call(item)) {
            detailClass += ` ${item.getPSSysCss().cssName}`;
        }
        return detailClass;
    }
    /**
     * 获取栅格布局的props
     *
     * @param {*} parent 父
     * @param {*} child 子
     * @returns {*}
     * @memberof AppDefaultViewLayout
     */
    getGridLayoutProps(parent, child) {
        let layout = parent === null || parent === void 0 ? void 0 : parent.getPSLayout().layout;
        let { colXS, colSM, colMD, colLG, colXSOffset, colSMOffset, colMDOffset, colLGOffset } = child.getPSLayoutPos();
        // 设置初始值
        colXS = !colXS || colXS == -1 ? 24 : colXS;
        colSM = !colSM || colSM == -1 ? 24 : colSM;
        colMD = !colMD || colMD == -1 ? 24 : colMD;
        colLG = !colLG || colLG == -1 ? 24 : colLG;
        colXSOffset = !colXSOffset || colXSOffset == -1 ? 0 : colXSOffset;
        colSMOffset = !colSMOffset || colSMOffset == -1 ? 0 : colSMOffset;
        colMDOffset = !colMDOffset || colMDOffset == -1 ? 0 : colMDOffset;
        colLGOffset = !colLGOffset || colLGOffset == -1 ? 0 : colLGOffset;
        if (layout == 'TABLE_12COL') {
            // 重新计算12列的栅格数值
            colXS = Math.min(colXS * 2, 24);
            colSM = Math.min(colSM * 2, 24);
            colMD = Math.min(colMD * 2, 24);
            colLG = Math.min(colXS * 2, 24);
            // 重新计算12列的栅格偏移
            let sign = (num) => (num == 0 ? 0 : num / Math.abs(num));
            colXSOffset = sign(colXSOffset) * Math.min(colXSOffset * 2, 24);
            colSMOffset = sign(colSMOffset) * Math.min(colSMOffset * 2, 24);
            colMDOffset = sign(colMDOffset) * Math.min(colMDOffset * 2, 24);
            colLGOffset = sign(colLGOffset) * Math.min(colLGOffset * 2, 24);
        }
        return {
            xs: { span: colXS, offset: colXSOffset },
            sm: { span: colSM, offset: colSMOffset },
            md: { span: colMD, offset: colMDOffset },
            lg: { span: colLG, offset: colLGOffset },
        };
    }
};
__decorate([
    Prop()
], AppDefaultViewLayout.prototype, "viewInstance", void 0);
__decorate([
    Prop()
], AppDefaultViewLayout.prototype, "context", void 0);
__decorate([
    Prop()
], AppDefaultViewLayout.prototype, "viewparams", void 0);
__decorate([
    Prop()
], AppDefaultViewLayout.prototype, "modelService", void 0);
__decorate([
    Prop()
], AppDefaultViewLayout.prototype, "model", void 0);
AppDefaultViewLayout = __decorate([
    Component({})
], AppDefaultViewLayout);
export { AppDefaultViewLayout };