import { throttle, LayoutTool, Util } from '@ibizstudio/runtime';
import { DashboardControlBase } from '../../../widgets';
/**
 * 数据看板部件基类
 *
 * @export
 * @class AppDashboardBase
 * @extends {DashboardControlBase}
 */
export class AppDashboardBase extends DashboardControlBase {
    /**
     * 绘制门户部件内容
     *
     * @param {IPSDBPortletPart} modelJson
     * @memberof AppDashboardBase
     */
    renderPortletContent(modelJson, index) {
        var _a, _b, _c, _d;
        if (!modelJson) {
            return;
        }
        if (modelJson.portletType == 'CONTAINER') {
            // 绘制门户部件（容器）
            const childPortlets = modelJson.getPSControls();
            let cardClass = !childPortlets ? 'portlet-card' : 'portlet-card custom-card';
            let cardPadding = childPortlets ? 0 : 10;
            let isShowTitle = !!(modelJson.showTitleBar && modelJson.title);
            const controlClassNames = {
                [Util.srfFilePath2(modelJson.codeName)]: true,
            };
            if ((_b = (_a = modelJson.getPSSysCss) === null || _a === void 0 ? void 0 : _a.call(modelJson)) === null || _b === void 0 ? void 0 : _b.cssName) {
                Object.assign(controlClassNames, { [((_c = modelJson.getPSSysCss()) === null || _c === void 0 ? void 0 : _c.cssName) || '']: true });
            }
            let labelCaption = this.$tl((_d = modelJson.getTitlePSLanguageRes()) === null || _d === void 0 ? void 0 : _d.lanResTag, modelJson.title);
            return (<div class='portlet-without-title'>
          <card class={cardClass} bordered={false} dis-hover padding={cardPadding}>
            {isShowTitle && [
                    <p slot='title'>
                {labelCaption}
                <span class='line'></span>
              </p>,
                    <a slot='extra'></a>,
                ]}
            <div class={Object.assign({ 'portlet-container': true }, controlClassNames)}>{this.renderPortlets(modelJson)}</div>
          </card>
        </div>);
        }
        else {
            let { targetCtrlName, targetCtrlParam, targetCtrlEvent } = this.computeTargetCtrlData(modelJson);
            Object.assign(targetCtrlParam.dynamicProps, Object.assign({}, this.dynamicProps));
            Object.assign(targetCtrlParam.staticProps, Object.assign({}, this.staticProps));
            // 绘制门户部件（非容器）
            return this.$createElement(targetCtrlName, {
                props: targetCtrlParam,
                ref: modelJson.name,
                on: targetCtrlEvent,
            });
        }
    }
    /**
     * 绘制门户部件布局
     *
     * @memberof AppDashboardBase
     */
    renderPortlets(modelJson) {
        var _a, _b, _c, _d, _e, _f, _g;
        if (!modelJson) {
            return;
        }
        const layout = (_b = (_a = modelJson.getPSLayout) === null || _a === void 0 ? void 0 : _a.call(modelJson)) === null || _b === void 0 ? void 0 : _b.layout;
        if (!layout) {
            return this.renderPortletContent(modelJson);
        }
        // 栅格布局
        if (layout == 'TABLE_24COL' || layout == 'TABLE_12COL') {
            return (<row>
          {(_d = (_c = modelJson.getPSControls) === null || _c === void 0 ? void 0 : _c.call(modelJson)) === null || _d === void 0 ? void 0 : _d.map((item, index) => {
                    let attrs = LayoutTool.getGridOptions(item.getPSLayoutPos());
                    return <i-col {...{ props: attrs }}>{this.renderPortletContent(item, index)}</i-col>;
                })}
        </row>);
        }
        // FLEX布局
        if (layout == 'FLEX') {
            const flexStyle = LayoutTool.getFlexStyle((_e = modelJson.getPSLayout) === null || _e === void 0 ? void 0 : _e.call(modelJson));
            return (<div style={flexStyle}>
          {(_g = (_f = modelJson.getPSControls) === null || _f === void 0 ? void 0 : _f.call(modelJson)) === null || _g === void 0 ? void 0 : _g.map((item, index) => {
                    let detailStyle = LayoutTool.getFlexStyle2(item.getPSLayoutPos());
                    return <div style={detailStyle}>{this.renderPortletContent(item, index)}</div>;
                })}
        </div>);
        }
    }
    /**
     * 绘制静态布局内容
     *
     * @returns
     * @memberof AppDashboardBase
     */
    renderStaticDashboard() {
        return this.renderPortlets(this.controlInstance);
    }
    /**
     * 绘制自定义门户部件
     *
     * @param {*} item
     * @returns
     * @memberof AppDashboardBase
     */
    renderCustomPortlet(customModel) {
        let { targetCtrlName, targetCtrlParam, targetCtrlEvent } = this.computeTargetCtrlData(customModel.modelData);
        Object.assign(targetCtrlParam.dynamicProps, { isAdaptiveSize: true });
        return this.$createElement(targetCtrlName, {
            key: Util.createUUID(),
            props: targetCtrlParam,
            ref: customModel.modelData.name,
            on: targetCtrlEvent,
        });
    }
    /**
     * 绘制动态自定义布局内容
     *
     * @returns
     * @memberof AppDashboardBase
     */
    renderCustomizedDashboard() {
        return (<row style='width:100%;min-height: calc(100% - 40px);'>
        <div class='portlet-container' style='position: relative;width:100%;'>
          {this.customModelData.map((item, index) => {
                let itemStyle = {
                    zIndex: 10,
                    position: 'absolute',
                    height: item.h * this.layoutRowH + 'px',
                    width: `calc(100% / ${this.layoutColNum} * ${item.w})`,
                    top: item.y * this.layoutRowH + 'px',
                    left: `calc(100% / ${this.layoutColNum} * ${item.x})`,
                };
                return (<div key={index} style={itemStyle}>
                {this.renderCustomPortlet(item)}
              </div>);
            })}
        </div>
      </row>);
    }
    /**
     * 绘制内容
     *
     * @returns
     * @memberof AppDashboardBase
     */
    render() {
        if (!this.controlIsLoaded) {
            return null;
        }
        const { controlClassNames } = this.renderOptions;
        return (<div class={Object.assign(Object.assign({}, controlClassNames), { dashboard: true })}>
        {this.isEnableCustomized && (<row>
            <app-build on-handleClick={(...params) => throttle(this.handleClick, params, this)}></app-build>
          </row>)}
        {this.dashboardType == 'default' && this.renderStaticDashboard()}
        {this.dashboardType == 'custom' && this.renderCustomizedDashboard()}
      </div>);
    }
}