import { Prop, Watch, Emit } from 'vue-property-decorator';
import { throttle, Util } from 'ibiz-core';
import { StateWizardPanelControlBase } from '../../../widgets';
import { IPSDEEditForm, IPSDEWizard, IPSDEWizardEditForm, IPSDEWizardStep } from '@ibiz/dynamic-model-api';

export class AppStateWizardPanelBase extends StateWizardPanelControlBase {

    /**
     * 部件动态参数
     *
     * @memberof AppStateWizardPanelBase
     */
     @Prop() public declare dynamicProps: any;

    /**
     * 部件静态参数
     *
     * @memberof AppStateWizardPanelBase
     */
     @Prop() public declare staticProps: any;

    /**
     * 监听部件动态参数变化
     *
     * @param {*} newVal
     * @param {*} oldVal
     * @memberof AppStateWizardPanelBase
     */
    @Watch('dynamicProps',{
        immediate: true,
    })
    public onDynamicPropsChange(newVal: any, oldVal: any) {
        if (newVal && !Util.isFieldsSame(newVal,oldVal)) {
           super.onDynamicPropsChange(newVal,oldVal);
        }
    }

    /**
     * 监听部件静态参数变化
     *
     * @param {*} newVal
     * @param {*} oldVal
     * @memberof AppStateWizardPanelBase
     */
    @Watch('staticProps', {
        immediate: true,
    })
    public onStaticPropsChange(newVal: any, oldVal: any) {
        if (newVal && !Util.isFieldsSame(newVal,oldVal)) {
            super.onStaticPropsChange(newVal,oldVal);
        }
    }

    /**
     * 销毁视图回调
     *
     * @memberof AppStateWizardPanelBase
     */
    public destroyed(){
        this.ctrlDestroyed();
    }

    /**
     * 部件事件
     *
     * @param {{ controlname: string; action: string; data: any }} { controlname 部件名称, action 事件名称, data 事件参数 }
     * @memberof AppStateWizardPanelBase
     */
    @Emit('ctrl-event')
    public ctrlEvent({ controlname, action, data }: { controlname: string; action: string; data: any }): void {}
    
    /**
     * 绘制步骤标题
     *
     * @memberof AppWizardPanelBase
     */
    public renderTitle(step: any, stepForm: string) {
        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
     */
    public renderViewSteps() {
        const wizardSteps: Array<IPSDEWizardStep> = (this.controlInstance.getPSDEWizard() as IPSDEWizard).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: IPSDEWizardStep) => {
                            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
     */
    public renderEditForm(form: IPSDEWizardEditForm) {
        if (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
     */
    public renderEditForms() {
        const editForms: Array<IPSDEEditForm> = this.controlInstance.getPSDEEditForms() || [];
        let content: any;
        if (editForms.length > 0) {
            content = editForms.map((form: IPSDEEditForm, index: number) => {
                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 as IPSDEWizardEditForm) }
                                </div>
                                { this.renderStepsFooter(form.name) }
                            </div>
                    </el-popover>
                );
            });
        }
        return content;
    }

    /**
     * 绘制向导面板footer
     *
     * @memberof AppWizardPanelBase
     */
    public renderStepsFooter(name: string) {
        return (
            <footer class="app-state-wizard-footer">
                {this.isVisiable(name, 'PREV') ? <i-button on-click={(...params: any[]) => throttle(this.clickPrev,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: any[]) => throttle(this.clickNext,params,this)} type="primary" long>{this.$t('app.wizardpanel.next')}</i-button> : null}
                {this.isVisiable(name, 'FINISH') ? <i-button on-click={(...params: any[]) => throttle(this.clickFinish,params,this)} type="primary" long>{this.$t('app.wizardpanel.complete')}</i-button> : null}
            </footer>
        );
    }

    /**
     * 绘制状态向导面板
     *
     * @memberof AppWizardPanelBase
     */
    public render() {
        if (!this.controlIsLoaded) {
            return null;
        }
        const wizard: IPSDEWizard | null = this.controlInstance.getPSDEWizard();
        const controlClassNames = this.renderOptions.controlClassNames;
        //TODO  表单抽屉
        return (
            <layout class={{ 'app-state-wizard': true, ...controlClassNames }}>
                { wizard && (wizard.getPSDEWizardSteps() || []).length > 0 ?
                    [
                        this.renderViewSteps(),
                        this.renderEditForms()
                    ]
                : null }
            </layout>
        );
    }
}