import { LayoutTool, throttle, Util } from '@ibizstudio/runtime';
import { PortletControlBase } from '../../../widgets';
import { AppViewLogicService } from '../../../app-service';
/**
 * 门户部件部件基类
 *
 * @export
 * @class AppPortletBase
 * @extends {PortletControlBase}
 */
export class AppPortletBase extends PortletControlBase {
    /**
     * 绘制其他部件
     *
     * @returns
     * @memberof AppPortletBase
     */
    renderControl() {
        var _a, _b;
        if ((_a = this.controlInstance.getPSControls()) === null || _a === void 0 ? void 0 : _a.length) {
            // 绘制其他部件
            let control = (_b = this.controlInstance.getPSControls()) === null || _b === void 0 ? void 0 : _b[0];
            let { targetCtrlName, targetCtrlParam, targetCtrlEvent } = this.computeTargetCtrlData(control);
            return this.$createElement(targetCtrlName, { props: targetCtrlParam, ref: control === null || control === void 0 ? void 0 : control.name, on: targetCtrlEvent });
        }
    }
    /**
     * 绘制直接内容
     *
     * @returns
     * @memberof AppPortletBase
     */
    renderRawItem() {
        var _a, _b, _c;
        const { rawItemHeight, rawItemWidth, contentType, rawContent, htmlContent } = this.controlInstance;
        let sysCssName = (_a = this.controlInstance.getPSSysCss()) === null || _a === void 0 ? void 0 : _a.cssName;
        let sysImage = (_b = this.controlInstance.getPSSysImage()) === null || _b === void 0 ? void 0 : _b.cssClass;
        let sysImgurl = (_c = this.controlInstance.getPSSysImage()) === null || _c === void 0 ? void 0 : _c.imagePath;
        const style = {
            width: rawItemWidth > 0 ? `${rawItemWidth}px` : false,
            height: rawItemHeight > 0 ? `${rawItemHeight}px` : false,
        };
        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>);
    }
    /**
     * 绘制HTML
     *
     * @returns
     * @memberof AppPortletBase
     */
    renderHtml() {
        let { pageUrl, height } = this.controlInstance;
        height = height > 0 ? height : 400;
        let iframeStyle = `height: ${height}px; width: 100%; border-width: 0px;`;
        return <iframe src={pageUrl} style={iframeStyle}></iframe>;
    }
    /**
     * 绘制工具栏栏
     *
     * @returns
     * @memberof AppPortletBase
     */
    renderToolBar() {
        return (<div class='toolbar-container'>
        <view-toolbar toolbarModels={this.toolbarModels} on-item-click={(data, $event) => {
                throttle(this.handleItemClick, [data, $event], this);
            }}></view-toolbar>
      </div>);
    }
    /**
     * 绘制操作栏
     *
     * @returns
     * @memberof AppPortletBase
     */
    renderActionBar() {
        return (<app-actionbar viewState={this.viewState} uiService={this.appUIService} items={this.actionBarModelData} on-itemClick={(...params) => throttle(this.handleItemClick, params, this)}></app-actionbar>);
    }
    /**
     * 绘制自定义
     *
     * @returns
     * @memberof AppPortletBase
     */
    renderCustom() {
        var _a, _b;
        let plugin = (_b = (_a = this.controlInstance) === null || _a === void 0 ? void 0 : _a.getPSSysPFPlugin) === null || _b === void 0 ? void 0 : _b.call(_a);
        // todo自定义绘制
        if (plugin) {
            // todo 自定义门户部件
        }
        else {
            return <div>{this.$t('app.portlet.noextensions')}</div>;
        }
    }
    /**
     * 绘制应用菜单
     *
     * @returns
     * @memberof AppPortletBase
     */
    renderAppMenu() {
        var _a;
        let menuInstance = (_a = this.controlInstance.getPSControls()) === null || _a === void 0 ? void 0 : _a[0];
        if (menuInstance) {
            let { targetCtrlName, targetCtrlParam, targetCtrlEvent } = this.computeTargetCtrlData(menuInstance);
            return this.$createElement(targetCtrlName, { props: targetCtrlParam, ref: menuInstance.name, on: targetCtrlEvent });
        }
    }
    /**
     * 绘制视图
     *
     * @returns
     * @memberof AppPortletBase
     */
    renderView() {
        var _a;
        let portletAppView = (_a = this.controlInstance) === null || _a === void 0 ? void 0 : _a.getPortletPSAppView();
        if (!portletAppView) {
            return;
        }
        const { modelFilePath, name } = portletAppView;
        let tempContext = Object.assign(this.context, { viewpath: modelFilePath });
        return this.$createElement('app-view-shell', {
            props: {
                staticProps: {
                    portletState: this.viewState,
                    viewDefaultUsage: false,
                    viewModelData: portletAppView,
                },
                dynamicProps: {
                    viewdata: JSON.stringify(tempContext),
                    viewparam: JSON.stringify(this.viewparams),
                },
            },
            on: {
                viewIsMounted: () => {
                    this.setIsMounted(portletAppView === null || portletAppView === void 0 ? void 0 : portletAppView.name);
                },
            },
            ref: name,
        });
    }
    /**
     * 根据portletType绘制
     *
     * @returns
     * @memberof AppPortletBase
     */
    renderByPortletType() {
        switch (this.controlInstance.portletType) {
            case 'VIEW':
                return this.renderView();
            case 'APPMENU':
                return this.renderAppMenu();
            case 'CUSTOM':
                return this.renderCustom();
            case 'ACTIONBAR':
                return this.renderActionBar();
            case 'TOOLBAR':
                return this.renderToolBar();
            case 'HTML':
                return this.renderHtml();
            case 'RAWITEM':
                return this.renderRawItem();
            default:
                return this.renderControl();
        }
    }
    /**
     * 绘制标题
     *
     * @returns
     * @memberof AppPortletBase
     */
    renderTitle() {
        var _a, _b, _c;
        const { portletType } = this.controlInstance;
        let image = (_b = (_a = this.controlInstance) === null || _a === void 0 ? void 0 : _a.getPSSysImage) === null || _b === void 0 ? void 0 : _b.call(_a);
        let labelCaption = this.$tl((_c = this.controlInstance.getTitlePSLanguageRes()) === null || _c === void 0 ? void 0 : _c.lanResTag, this.controlInstance.title);
        return [
            <p class='portlet-title'>
        <span>
          {image && (image === null || image === void 0 ? void 0 : image.cssClass) && <i class={image === null || image === void 0 ? void 0 : image.cssClass}/>}
          {image && (image === null || image === void 0 ? void 0 : image.imagePath) && <img src={image === null || image === void 0 ? void 0 : image.imagePath}/>}
          {labelCaption}
        </span>
        {portletType != 'ACTIONBAR' && this.renderUiAction()}
      </p>,
            <el-divider></el-divider>,
        ];
    }
    /**
     * 绘制界面行为图标
     *
     * @param {*} actionDetail 界面行为组成员
     * @returns
     * @memberof AppPortletBase
     */
    renderIcon(actionDetail) {
        const { getPSUIAction: uiAction, showIcon } = actionDetail;
        if (showIcon && (uiAction === null || uiAction === void 0 ? void 0 : uiAction.getPSSysImage)) {
            let image = uiAction.getPSSysImage;
            if (image.cssClass) {
                return <i class={image.cssClass}/>;
            }
            else {
                return <img src={image.imagePath}/>;
            }
        }
    }
    /**
     * 绘制界面行为组
     *
     * @returns
     * @memberof AppPortletBase
     */
    renderUiAction() {
        var _a, _b, _c, _d;
        const actionGroupDetails = (_d = (_c = (_b = (_a = this.controlInstance) === null || _a === void 0 ? void 0 : _a.getPSUIActionGroup) === null || _b === void 0 ? void 0 : _b.call(_a)) === null || _c === void 0 ? void 0 : _c.getPSUIActionGroupDetails) === null || _d === void 0 ? void 0 : _d.call(_c);
        if (!actionGroupDetails) {
            return;
        }
        return (<span class='portlet-action'>
        {actionGroupDetails.map((actionDetail) => {
                var _a, _b, _c, _d, _e;
                const { showCaption } = actionDetail;
                let uiAction = (_a = actionDetail === null || actionDetail === void 0 ? void 0 : actionDetail.getPSUIAction) === null || _a === void 0 ? void 0 : _a.call(actionDetail);
                let uiactionName = ((_b = uiAction === null || uiAction === void 0 ? void 0 : uiAction.codeName) === null || _b === void 0 ? void 0 : _b.toLowerCase()) || ((_c = actionDetail.name) === null || _c === void 0 ? void 0 : _c.toLowerCase());
                const caption = this.$tl((_d = uiAction === null || uiAction === void 0 ? void 0 : uiAction.getCapPSLanguageRes()) === null || _d === void 0 ? void 0 : _d.lanResTag, (uiAction === null || uiAction === void 0 ? void 0 : uiAction.caption) || (uiAction === null || uiAction === void 0 ? void 0 : uiAction.name));
                const tooltipCaption = this.$tl((_e = uiAction === null || uiAction === void 0 ? void 0 : uiAction.getTooltipPSLanguageRes()) === null || _e === void 0 ? void 0 : _e.lanResTag, (uiAction === null || uiAction === void 0 ? void 0 : uiAction.caption) || (uiAction === null || uiAction === void 0 ? void 0 : uiAction.name));
                // 显示内容
                // todo 界面行为显示this.actionModel?.[uiactionName]?.visabled
                let contentElement = (<a on-click={(e) => {
                        throttle(this.handleActionClick, [e, actionDetail], this);
                    }} v-show={true}>
              {this.renderIcon(actionDetail)}
              {showCaption ? caption : null}
            </a>);
                if (showCaption) {
                    return (<tooltip transfer={true} max-width={600}>
                {contentElement}
                <div slot='content'>{tooltipCaption}</div>
              </tooltip>);
                }
                else {
                    return contentElement;
                }
            })}
      </span>);
    }
    /**
     * 处理操作列点击
     *
     * @memberof GridControlBase
     */
    handleActionClick(event, detail) {
        var _a;
        const { name } = this.controlInstance;
        let data = Util.deepCopy(this.context);
        AppViewLogicService.getInstance().executeViewLogic(`${name}_${detail.name}_click`, event, this, data, (_a = this.controlInstance) === null || _a === void 0 ? void 0 : _a.getPSAppViewLogics());
    }
    /**
     * 绘制内容
     *
     * @returns
     * @memberof AppPortletBase
     */
    render() {
        if (!this.controlIsLoaded) {
            return null;
        }
        const { controlClassNames } = this.renderOptions;
        const { showTitleBar, title, height, width } = this.controlInstance;
        let isShowTitle = showTitleBar && title;
        let portletStyle;
        if (this.isAdaptiveSize) {
            portletStyle = { height: '100%', width: '100%' };
        }
        else {
            portletStyle = { height: LayoutTool.clacStyleSize(height), width: LayoutTool.clacStyleSize(width) };
        }
        return !this.isAdaptiveSize ? (<card class={'portlet-card custom-card'} bordered={false} dis-hover padding={0}>
        <div class={Object.assign({ portlet: true }, controlClassNames)}>
          {isShowTitle && this.renderTitle()}
          <div class={{ 'portlet-with-title': isShowTitle, 'portlet-without-title': !isShowTitle }} style={portletStyle}>
            {this.renderByPortletType()}
          </div>
        </div>
      </card>) : (<div class={Object.assign({ portlet: true }, controlClassNames)} style={portletStyle}>
        {isShowTitle && this.renderTitle()}
        <div class={{ 'portlet-with-title': isShowTitle, 'portlet-without-title': !isShowTitle }}>{this.renderByPortletType()}</div>
      </div>);
    }
}