import { throttle, Util } from '@ibizstudio/runtime';
import { WizardPanelControlBase } from '../../../widgets';
export class AppWizardPanelBase extends WizardPanelControlBase {
    /**
     * 绘制步骤标题栏
     *
     * @memberof AppWizardPanelBase
     */
    renderStepsTitle() {
        const wizardSteps = this.controlInstance.getPSDEWizard().getPSDEWizardSteps() || [];
        if (this.controlInstance.showStepBar && wizardSteps.length > 0) {
            return (<el-steps class='wizard-steps' active={this.steps.indexOf(this.stepTags[this.activeForm]) + 1} align-center finish-status='success'>
          {wizardSteps.map((step) => {
                    var _a, _b, _c;
                    const title = this.$tl((_a = step.getTitlePSLanguageRes()) === null || _a === void 0 ? void 0 : _a.lanResTag, step.title);
                    const stepClassName = (_b = step.getTitlePSSysCss()) === null || _b === void 0 ? void 0 : _b.cssName;
                    const icon = (_c = step.getPSSysImage()) === null || _c === void 0 ? void 0 : _c.cssClass;
                    return <el-step title={title} class={stepClassName} icon={icon}></el-step>;
                })}
        </el-steps>);
        }
    }
    /**
     * 绘制步骤表单
     *
     * @memberof AppWizardPanelBase
     */
    renderStepForm(form) {
        if ((form === null || form === void 0 ? void 0 : form.controlType) != 'FORM' || this.activeForm != form.name || form.formFuncMode != 'WIZARDFORM') {
            return;
        }
        let { targetCtrlName, targetCtrlParam, targetCtrlEvent } = this.computeTargetCtrlData(form);
        Object.assign(targetCtrlParam.staticProps, { viewState: this.wizardState });
        return this.$createElement(targetCtrlName, { key: Util.createUUID(), props: targetCtrlParam, ref: form.name, on: targetCtrlEvent });
    }
    /**
     * 绘制向导面板footer
     *
     * @memberof AppWizardPanelBase
     */
    renderStepsFooter() {
        var _a, _b, _c;
        const wizard = this.controlInstance.getPSDEWizard();
        const finishCaption = wizard.finishCaption ? wizard.finishCaption : this.$t('app.wizardpanel.complete');
        const nextCaption = wizard.nextCaption ? wizard.nextCaption : this.$t('app.wizardpanel.next');
        const prevCaption = wizard.prevCaption ? wizard.prevCaption : this.$t('app.wizardpanel.back');
        const prev = this.$tl((_a = wizard.getPrevCapPSLanguageRes()) === null || _a === void 0 ? void 0 : _a.lanResTag, prevCaption);
        const next = this.$tl((_b = wizard.getNextCapPSLanguageRes()) === null || _b === void 0 ? void 0 : _b.lanResTag, nextCaption);
        const finish = this.$tl((_c = wizard.getFinishCapPSLanguageRes()) === null || _c === void 0 ? void 0 : _c.lanResTag, finishCaption);
        return (<footer class='app-wizard-footer'>
        {!this.isHidden('PREV') ? (<i-button on-click={(...params) => throttle(this.onClickPrev, params, this)} type='primary'>
            {prev}
          </i-button>) : null}
        {!this.isHidden('NEXT') ? (<i-button on-click={(...params) => throttle(this.onClickNext, params, this)} type='primary'>
            {next}
          </i-button>) : null}
        {!this.isHidden('FINISH') ? (<i-button on-click={(...params) => throttle(this.onClickFinish, params, this)} type='primary'>
            {finish}
          </i-button>) : null}
      </footer>);
    }
    /**
     * 绘制向导面板
     *
     * @memberof AppWizardPanelBase
     */
    render() {
        if (!this.controlIsLoaded || !this.activeForm) {
            return null;
        }
        const editForms = this.controlInstance.getPSDEEditForms() || [];
        const controlClassNames = this.renderOptions.controlClassNames;
        return (<layout class={Object.assign({ 'app-wizard': true }, controlClassNames)}>
        {this.controlInstance.wizardStyle && this.controlInstance.wizardStyle == 'STYLE2' ? null : this.renderStepsTitle()}
        <i-content class='app-wizard-content'>
          {editForms.length > 0
                ? editForms.map((editForm) => {
                    return this.renderStepForm(editForm);
                })
                : null}
        </i-content>
        {this.renderStepsFooter()}
      </layout>);
    }
}