import { Util, LayoutTool, throttle } from '@ibizstudio/runtime';
import { SearchFormControlBase } from '../../../widgets';
/**
 * 搜索表单部件基类
 *
 * @export
 * @class AppSearchFormBase
 * @extends {SearchFormControlBase}
 */
export class AppSearchFormBase extends SearchFormControlBase {
    /**
     * 绘制子表单成员,布局控制
     *
     * @param {*} modelJson
     * @returns
     * @memberof AppSearchFormBase
     */
    renderDetails(modelJson) {
        let formDetails = modelJson.getPSDEFormDetails();
        let layout = modelJson.getPSLayout();
        // 没有子表单成员
        if (!formDetails || formDetails.length == 0) {
            return null;
        }
        // 无布局
        if (!layout) {
            return formDetails.map((item, index) => {
                return this.renderByDetailType(item, index);
            });
        }
        // 栅格布局
        if (layout.layout == 'TABLE_24COL' || layout.layout == 'TABLE_12COL') {
            return (<row>
          {formDetails.map((item, index) => {
                    var _a;
                    if (item.hidden) {
                        return;
                    }
                    let attrs = LayoutTool.getGridOptions(item.getPSLayoutPos());
                    return (<i-col class='form-layout-container' {...{ props: attrs }} style={((_a = this.detailsModel[item.name]) === null || _a === void 0 ? void 0 : _a.visible) ? '' : 'display: none;'}>
                {this.renderByDetailType(item, index)}
              </i-col>);
                })}
        </row>);
        }
        // FLEX布局
        if (layout.layout == 'FLEX') {
            const flexStyle = LayoutTool.getFlexStyle(layout);
            return (<div style={flexStyle}>
          {formDetails.map((item, index) => {
                    if (item.hidden) {
                        return;
                    }
                    let detailStyle = LayoutTool.getFlexStyle2(item === null || item === void 0 ? void 0 : item.getPSLayoutPos());
                    detailStyle += this.detailsModel[item.name].visible ? '' : 'display: none;';
                    return (<div style={detailStyle} class='form-layout-container'>
                {this.renderByDetailType(item, index)}
              </div>);
                })}
        </div>);
        }
    }
    /**
     * 根据detailType绘制对应detail
     *
     * @param {*} modelJson
     * @param {number} index
     * @memberof AppSearchFormBase
     */
    renderByDetailType(modelJson, index) {
        var _a;
        if (modelJson.getPSSysPFPlugin()) {
            const pluginInstance = this.PluginFactory.getPluginInstance('CONTROLITEM', ((_a = modelJson.getPSSysPFPlugin()) === null || _a === void 0 ? void 0 : _a.pluginCode) || '');
            if (pluginInstance) {
                return pluginInstance.renderCtrlItem(this.$createElement, modelJson, this, null);
            }
        }
        else {
            switch (modelJson.detailType) {
                case 'FORMPAGE':
                    return this.renderFormPage(modelJson, index);
                case 'GROUPPANEL':
                    return this.renderGroupPanel(modelJson, index);
                case 'TABPAGE':
                    return this.renderTabPage(modelJson, index);
                case 'TABPANEL':
                    return this.renderTabPanel(modelJson, index);
                case 'FORMITEM':
                    return this.renderFormItem(modelJson, index);
                case 'BUTTON':
                    return this.renderButton(modelJson, index);
                case 'DRUIPART':
                    return this.renderDruipart(modelJson, index);
                case 'RAWITEM':
                    return this.renderRawitem(modelJson, index);
                case 'IFRAME':
                    return this.renderIframe(modelJson, index);
                case 'FORMPART':
                    return this.renderFormPart(modelJson, index);
            }
        }
    }
    /**
     * 绘制表单部件
     *
     * @returns
     * @memberof AppSearchFormBase
     */
    renderFormPart(modelJson, index) {
        let { formPartType, name, codeName } = modelJson;
        // 后续补
        let systemCodeName = '', appCodeName = '', deCodeName = '', formCodeName = '';
        if (formPartType && formPartType == 'DYNASYS') {
            return (<app-form-part name={name} context={this.context} viewparams={this.viewparams} systemCodeName={systemCodeName} appCodeName={appCodeName} deCodeName={deCodeName} formCodeName={formCodeName} formDetailCodeName={codeName} on-change={this.onFormItemValueChange}></app-form-part>);
        }
    }
    /**
     * 绘制iframe
     *
     * @returns
     * @memberof AppSearchFormBase
     */
    renderIframe(modelJson, index) {
        let { contentHeight, iFrameUrl } = modelJson;
        let iframeStyle = { height: contentHeight + 'px' };
        return (<div style={iframeStyle}>
        <iframe src={iFrameUrl}></iframe>
      </div>);
    }
    /**
     * 绘制直接内容
     *
     * @returns
     * @memberof AppSearchFormBaseBase
     */
    renderRawitem(modelJson, index) {
        const data = this.data;
        let { rawItemHeight, rawItemWidth, contentType, htmlContent, rawContent } = modelJson;
        let sysCss = modelJson.getPSSysCss();
        let sysImage = modelJson.getPSSysImage();
        let sizeStyle = rawItemHeight > 0 && rawItemWidth > 0 ? { width: rawItemWidth + 'px', height: rawItemHeight + 'px' } : '';
        if (rawContent) {
            const items = rawContent === null || rawContent === void 0 ? void 0 : rawContent.match(/\{{(.+?)\}}/g);
            if (items) {
                items.forEach((item) => {
                    rawContent = rawContent === null || rawContent === void 0 ? void 0 : rawContent.replace(/\{{(.+?)\}}/, eval(item === null || item === void 0 ? void 0 : item.substring(2, (item === null || item === void 0 ? void 0 : item.length) - 2)));
                });
            }
        }
        const tempNode = this.$createElement('div', {
            domProps: {
                innerHTML: rawContent,
            },
        });
        return (<app-rawitem viewparams={this.viewparams} context={this.context} contentStyle={sysCss === null || sysCss === void 0 ? void 0 : sysCss.cssName} sizeStyle={sizeStyle} contentType={contentType} imageClass={sysImage === null || sysImage === void 0 ? void 0 : sysImage.cssClass} htmlContent={htmlContent}>
        {Object.is(contentType, 'RAW') ? tempNode : null}
      </app-rawitem>);
    }
    /**
     * 关系界面保存事件
     *
     * @param {*} e
     * @memberof AppSearchFormBase
     */
    onDrDataSaved(e) {
        this.ctrlEvent({
            controlname: this.controlInstance.name,
            action: 'drdatasaved',
            data: e,
        });
    }
    /**
     * 绘制关系界面
     *
     * @returns
     * @memberof AppSearchFormBase
     */
    renderDruipart(modelJson, index) {
        var _a;
        const { getPSSysCss, refreshItems, getLayoutPos, contentHeight, appView, parentdata, localContext, localParam, appDERSPaths } = modelJson;
        const { dynaModelFilePath } = appView;
        let tempContext = Object.assign(this.context, { viewpath: dynaModelFilePath });
        // druipart样式
        let druipartHeight;
        if ((getLayoutPos === null || getLayoutPos === void 0 ? void 0 : getLayoutPos.layout) == 'FlEX') {
            druipartHeight = '100%';
        }
        else if (contentHeight === 0 && (appView === null || appView === void 0 ? void 0 : appView.height) > 0) {
            druipartHeight = appView.height;
        }
        else {
            druipartHeight = contentHeight;
        }
        let druipartStyle = { height: druipartHeight, overflow: 'auto' };
        return (<app-form-druipart class={getPSSysCss === null || getPSSysCss === void 0 ? void 0 : getPSSysCss.cssName} isForbidLoad={((_a = this.data) === null || _a === void 0 ? void 0 : _a.srfuf) === '0'} paramItem={this.appDeCodeName.toLowerCase()} parentdata={parentdata} parameters={Util.formatAppDERSPath(this.context, appDERSPaths)} context={tempContext} viewparams={this.viewparams} parameterName={this.appDeCodeName.toLowerCase()} parentName={this.appDeCodeName} appViewtype={appView === null || appView === void 0 ? void 0 : appView.viewType} refreshitems={refreshItems} ignorefieldvaluechange={this.ignorefieldvaluechange} viewname={'app-view-shell'} localContext={Util.formatNavParam(localContext)} localParam={Util.formatNavParam(localParam)} tempMode={(appView === null || appView === void 0 ? void 0 : appView.tempMode) ? appView === null || appView === void 0 ? void 0 : appView.tempMode : 0} data={JSON.stringify(this.data)} on-drdatasaved={($event) => this.drdatasaved($event)} style={druipartStyle}></app-form-druipart>);
    }
    /**
     * 绘制按钮
     *
     * @returns
     * @memberof AppSearchFormBase
     */
    renderButton(modelJson, index) {
        var _a, _b, _c;
        const { width, height, showCaption, caption } = modelJson;
        const uiAction = modelJson.getPSUIAction();
        const sysImage = modelJson.getPSSysImage();
        const sysCss = modelJson.getPSSysCss();
        let btnClass = width > 0 && height > 0 ? { width: width + 'px', height: height + 'px' } : '';
        let badge = null;
        // TODO计数器徽章
        // if (uiAction) {
        //     let { appCounter, counterId } = uiAction;
        //     let { codeName } = appCounter;
        //     let count = codeName + 'counterservice.counterData.' + counterId;
        //     badge = <badge type='primary' count={count}></badge>;
        // }
        // 自定义类名
        const controlClassNames = { 'app-form-button': true };
        if (sysCss === null || sysCss === void 0 ? void 0 : sysCss.cssName) {
            Object.assign(controlClassNames, { [sysCss.cssName]: true });
        }
        let labelCaption = this.$tl((_a = modelJson.getCapPSLanguageRes()) === null || _a === void 0 ? void 0 : _a.lanResTag, caption);
        return (<div>
        {badge}
        <i-button type='primary' class={controlClassNames} style={btnClass} on-click={($event) => throttle(this.onFormItemActionClick, [{ formdetail: modelJson, event: $event }], this)} disabled={(_b = this.detailsModel[modelJson.name]) === null || _b === void 0 ? void 0 : _b.disabled}>
          {sysImage ? <i class={sysImage === null || sysImage === void 0 ? void 0 : sysImage.cssClass} style='margin-right: 2px;'></i> : <menu-icon item={{ iconcls: (_c = uiAction === null || uiAction === void 0 ? void 0 : uiAction.getPSSysImage()) === null || _c === void 0 ? void 0 : _c.cssClass }}/>}
          {showCaption && <span>{labelCaption}</span>}
        </i-button>
      </div>);
    }
    /**
     * 绘制表单项
     *
     * @returns
     * @memberof AppSearchFormBase
     */
    renderFormItem(modelJson, index) {
        var _a;
        const editor = modelJson.getPSEditor();
        return (<app-default-search-form-item detailsInstance={modelJson} modelService={this.modelService} index={index} data={this.data} rules={this.rules[modelJson.name]} runtimeModel={this.detailsModel[modelJson.name]} context={Util.deepCopy(this.context)} viewparams={Util.deepCopy(this.viewparams)} service={this.service} ignorefieldvaluechange={this.ignorefieldvaluechange} on-formItemValueChange={(value) => {
                this.onFormItemValueChange(value);
            }} controlInstance={this.controlInstance}>
        {editor && (<app-default-editor editorInstance={editor} value={this.data[editor === null || editor === void 0 ? void 0 : editor.name]} contextData={this.data} context={Util.deepCopy(this.context)} viewparams={Util.deepCopy(this.viewparams)} service={this.service} disabled={(_a = this.detailsModel[modelJson.name]) === null || _a === void 0 ? void 0 : _a.disabled} ignorefieldvaluechange={this.ignorefieldvaluechange} on-change={(value) => {
                    this.onFormItemValueChange(value);
                }}/>)}
      </app-default-search-form-item>);
    }
    /**
     * 绘制分页部件panel
     *
     * @returns
     * @memberof AppSearchFormBase
     */
    renderTabPanel(modelJson, index) {
        return (<app-default-search-form-tab-panel modelService={this.modelService} detailsInstance={modelJson} index={index} controlInstance={this.controlInstance}>
        {this.renderDetails(modelJson)}
      </app-default-search-form-tab-panel>);
    }
    /**
     * 绘制分页部件
     *
     * @returns
     * @memberof AppSearchFormBase
     */
    renderTabPage(modelJson, index) {
        return (<app-default-search-form-tab-page modelService={this.modelService} detailsInstance={modelJson} index={index} controlInstance={this.controlInstance}>
        {this.renderDetails(modelJson)}
      </app-default-search-form-tab-page>);
    }
    /**
     * 绘制分组面板
     *
     * @returns
     * @memberof AppSearchFormBase
     */
    renderGroupPanel(modelJson, index) {
        return (<app-default-search-group-panel modelService={this.modelService} detailsInstance={modelJson} index={index} runtimeModel={this.detailsModel[modelJson.name]} controlInstance={this.controlInstance} on-groupUIActionClick={(...params) => throttle(this.handleActionClick, params, this)} data={this.data}>
        {this.renderDetails(modelJson)}
      </app-default-search-group-panel>);
    }
    /**
     * 绘制表单分页
     *
     * @returns
     * @memberof AppSearchFormBase
     */
    renderFormPage(modelJson, index) {
        const { noTabHeader } = this.controlInstance;
        if (noTabHeader) {
            return this.renderDetails(modelJson);
        }
        return (<app-default-search-form-page modelService={this.modelService} detailsInstance={modelJson} index={index} runtimeModel={this.detailsModel[modelJson.name]} controlInstance={this.controlInstance}>
        {this.renderDetails(modelJson)}
      </app-default-search-form-page>);
    }
    /**
     * 绘制表单内容
     *
     * @returns
     * @memberof AppSearchFormBase
     */
    renderFormContent() {
        var _a;
        const { noTabHeader, codeName, name, controlType } = this.controlInstance;
        const formPages = this.controlInstance.getPSDEFormPages();
        if (formPages && formPages.length > 0) {
            if (noTabHeader) {
                return formPages.map((item, index) => {
                    return this.renderFormPage(item, index);
                });
            }
            else {
                const tabsName = `${this.appDeCodeName.toLowerCase()}_${controlType === null || controlType === void 0 ? void 0 : controlType.toLowerCase()}_${codeName === null || codeName === void 0 ? void 0 : codeName.toLowerCase()}`;
                return (<tabs animated={false} name={tabsName} value={(_a = this.detailsModel[name]) === null || _a === void 0 ? void 0 : _a.activatedPage} on-on-click={(e) => {
                        var _a;
                        throttle((_a = this.detailsModel[name]) === null || _a === void 0 ? void 0 : _a.clickPage, [e], this);
                    }}>
            {formPages.map((item, index) => {
                        return this.renderFormPage(item, index);
                    })}
          </tabs>);
            }
        }
    }
    /**
     * 绘制内容
     *
     * @returns
     * @memberof AppSearchFormBase
     */
    render() {
        var _a, _b, _c;
        const isShow = this.controlInstance.formStyle != 'SEARCHBAR' ? this.isExpandSearchForm : true;
        if (!(this.controlIsLoaded && isShow)) {
            return;
        }
        const { controlClassNames } = this.renderOptions;
        let formId = this.appDeCodeName.toLowerCase() + ((_a = this.controlInstance.codeName) === null || _a === void 0 ? void 0 : _a.toLowerCase());
        if (!this.controlInstance.getPSDEFormItems() || ((_b = this.controlInstance.getPSDEFormItems()) === null || _b === void 0 ? void 0 : _b.length) == 0) {
            return null;
        }
        return (<i-form props={{ model: this.data }} class={Object.assign(Object.assign({}, controlClassNames), { 'app-search-form': true })} ref={this.controlInstance.name} id={formId} on-on-valuidate={this.formItemValidate.bind(this)} nativeOnkeyup={this.onKeyUp.bind(this)}>
        <input style='display:none;'/>
        <row>
          <i-col class='form-content'>
            <row>{this.renderFormContent()}</row>
          </i-col>
          {this.controlInstance.formStyle != 'SEARCHBAR' && (<i-col class='search-action-footer'>
              {((_c = this.historyItems) === null || _c === void 0 ? void 0 : _c.length) > 0 ? (<el-select size='small' popper-class='search-action-select' value={this.selectItem} on-change={this.onFilterChange.bind(this)}>
                  {this.historyItems.map((item) => {
                        return (<el-option key={item.value} label={item.name} value={item.value}>
                        <div on-click={() => {
                                if (this.selectItem == item.value) {
                                    this.data = JSON.parse(JSON.stringify(item.data));
                                }
                            }}>
                          <span>{item.name}</span>
                          <i class='el-icon-close' on-click={(e) => throttle(this.removeHistoryItem, [e, item], this)}/>
                        </div>
                      </el-option>);
                    })}
                </el-select>) : null}
              {Object.keys(this.data).length > 0 && (<row class='search-button'>
                  <el-dropdown split-button type='primary' trigger='click' on-click={(...params) => throttle(this.onSearch, params, this)}>
                    {this.$t('app.searchbutton.search')}
                    <el-dropdown-menu class='search-button-dropdown' slot='dropdown'>
                      <el-dropdown-item>
                        <div on-click={(...params) => throttle(this.onReset, params, this)}>{this.$t('app.searchbutton.reset')}</div>
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>

                  {this.enableSaveFilter ? (<poptip ref='propip' trigger='hover' placement='top-end' title='存储自定义查询' popper-class='searchform-poptip' on-on-popper-show={() => (this.saveItemName = '')}>
                      <i-button>
                        <i class='fa fa-floppy-o' aria-hidden='true'></i>
                      </i-button>
                      <div slot='content'>
                        <i-input v-model={this.saveItemName} placeholder=''></i-input>
                        <div class='save-action'>
                          <i-button on-click={(...params) => throttle(this.onCancel, params, this)}>{this.$t('app.commonwords.cancel')}</i-button>
                          <i-button type='primary' on-click={(...params) => throttle(this.onOk, params, this)}>
                            {this.$t('app.commonwords.save')}
                          </i-button>
                        </div>
                      </div>
                    </poptip>) : null}
                </row>)}
            </i-col>)}
        </row>
      </i-form>);
    }
}