import { throttle } from '@ibizstudio/runtime';
import { StateWizardPanelControlBase } from '../../../widgets';
export class AppStateWizardPanelBase extends StateWizardPanelControlBase {
    /**
     * 绘制步骤标题
     *
     * @memberof AppWizardPanelBase
     */
    renderTitle(step, stepForm) {
        return this.$createElement('div', {
            slot: 'title',
            directives: [
                {
                    name: 'popover',
                    arg: `${stepForm}_popover`,
                },
            ],
            on: {
                click: () => throttle(this.stepTitleClick, [stepForm], this),
            },
        }, [
            <span>
          {this.activeForm != stepForm && !this.historyForms.includes(stepForm) ? <i class='el-icon-lock'></i> : null}
          {step.title}
        </span>,
        ]);
    }
    /**
     * 绘制向导面板步骤
     *
     * @memberof AppWizardPanelBase
     */
    renderViewSteps() {
        const wizardSteps = this.controlInstance.getPSDEWizard().getPSDEWizardSteps() || [];
        if (wizardSteps.length > 0) {
            return (<div class='view-steps'>
          <div class='background-box'></div>
          <div class='steps_icon' on-click={() => throttle(this.handleClick, ['PRE'], this)}>
            <i class='el-icon-arrow-left'></i>
          </div>
          <el-steps class='wizard-steps' active={this.wizardForms.indexOf(this.activeForm) + 1} finish-status='success' align-center>
            {wizardSteps.map((step) => {
                    const stepForm = this.getStepForm(step);
                    return <el-step class={{ 'app-active-step': this.activeForm === stepForm ? true : false }}>{this.renderTitle(step, stepForm)}</el-step>;
                })}
          </el-steps>
          <div class='steps_icon' on-click={() => throttle(this.handleClick, ['NEXT'], this)}>
            <i class='el-icon-arrow-right'></i>
          </div>
        </div>);
        }
    }
    /**
     * 绘制表单
     *
     * @memberof AppWizardPanelBase
     */
    renderEditForm(form) {
        if ((form === null || form === void 0 ? void 0 : form.controlType) != 'FORM' || form.formFuncMode != 'WIZARDFORM') {
            return;
        }
        let { targetCtrlName, targetCtrlParam, targetCtrlEvent } = this.computeTargetCtrlData(form);
        Object.assign(targetCtrlParam.staticProps, { viewState: this.wizardState });
        return this.$createElement(targetCtrlName, { key: form.codeName, props: targetCtrlParam, ref: form.name, on: targetCtrlEvent });
    }
    /**
     * 绘制所有表单
     *
     * @memberof AppWizardPanelBase
     */
    renderEditForms() {
        const editForms = this.controlInstance.getPSDEEditForms() || [];
        let content;
        if (editForms.length > 0) {
            content = editForms.map((form, index) => {
                return (<el-popover value={this.stepVisiable[form.name]} ref={`${form.name}_popover`} popper-class='app-state-wizard-popover-container' placement={`bottom-${index === editForms.length - 1 ? 'end' : 'start'}`} trigger='click'>
            <div class='app-state-wizard-container'>
              <div class='app-state-wizard-header'>
                <div class='app-state-wizard-header-extra'>
                  <i class='ivu-icon ivu-icon-md-open' size='18' on-click={() => throttle(this.handleOpen, [form.name], this)}></i>
                  <i class='ivu-icon ivu-icon-md-close' size='18' on-click={() => throttle(this.handleClose, [form.name], this)}></i>
                </div>
              </div>
              <div class='popover-title'>{form.logicName}</div>
              <div class='app-state-wizard-content'>{this.renderEditForm(form)}</div>
              {this.renderStepsFooter(form.name)}
            </div>
          </el-popover>);
            });
        }
        return content;
    }
    /**
     * 绘制向导面板footer
     *
     * @memberof AppWizardPanelBase
     */
    renderStepsFooter(name) {
        return (<footer class='app-state-wizard-footer'>
        {this.isVisiable(name, 'PREV') ? (<i-button on-click={(...params) => throttle(this.onClickPrev, params, this)} type='primary'>
            <i class='ivu-icon ivu-icon-ios-arrow-back'/>
          </i-button>) : null}
        {this.isVisiable(name, 'NEXT') ? (<i-button on-click={(...params) => throttle(this.onClickNext, params, this)} type='primary' long>
            {this.$t('app.wizardpanel.next')}
          </i-button>) : null}
        {this.isVisiable(name, 'FINISH') ? (<i-button on-click={(...params) => throttle(this.onClickFinish, params, this)} type='primary' long>
            {this.$t('app.wizardpanel.complete')}
          </i-button>) : null}
      </footer>);
    }
    /**
     * 绘制状态向导面板
     *
     * @memberof AppWizardPanelBase
     */
    render() {
        if (!this.controlIsLoaded) {
            return null;
        }
        const wizard = this.controlInstance.getPSDEWizard();
        const controlClassNames = this.renderOptions.controlClassNames;
        //TODO  表单抽屉
        return (<layout class={Object.assign({ 'app-state-wizard': true }, controlClassNames)}>{wizard && (wizard.getPSDEWizardSteps() || []).length > 0 ? [this.renderViewSteps(), this.renderEditForms()] : null}</layout>);
    }
}