statewizardpanel-control-base.tsx

import { IPSAppDEField, IPSControlAction, IPSDEEditForm, IPSDEStateWizardPanel, IPSDEWizard, IPSDEWizardEditForm, IPSDEWizardForm, IPSDEWizardStep } from '@ibiz/dynamic-model-api';
import { StateWizardPanelControlInterface, ViewState } from 'ibiz-core';
import { Subject, Subscription } from 'rxjs';
import { AppWizardPanelService } from '..';
import { MainControlBase } from './main-control-base';

export class StateWizardPanelControlBase extends MainControlBase implements StateWizardPanelControlInterface {

    /**
     * 向导面板部件实例
     * 
     * @memberof StateWizardPanelControlBase
     */
    public declare controlInstance: IPSDEStateWizardPanel;

    /**
     * 部件行为--init
     *
     * @type {string}
     * @memberof StateWizardPanelControlBase
     */
    public initAction!: string;

    /**
     * 部件行为--finish
     *
     * @type {string}
     * @memberof StateWizardPanelControlBase
     */
    public finishAction!: string;

    /**
     * 向导表单参数
     *
     * @type {*}
     * @memberof StateWizardPanelControlBase
     */
    public formParam: any = {};

    /**
     * 执行过的表单
     *
     * @public
     * @type {Array<string>}
     * @memberof StateWizardPanelControlBase
     */
    public historyForms: Array<string> = [];

    /**
     * 步骤行为集合
     *
     * @type {*}
     * @memberof StateWizardPanelControlBase
     */
    public stepActions: any = {};

    /**
     * 向导表单集合
     *
     * @type {Array<any>}
     * @memberof StateWizardPanelControlBase
     */
    public wizardForms: Array<any> = [];

    /**
     * 当前状态
     *
     * @memberof StateWizardPanelControlBase
     */
    public curState = '';

    /**
     * 当前激活表单
     *
     * @type {string}
     * @memberof StateWizardPanelControlBase
     */
    public activeForm: string = '';

    /**
     * 首表单
     *
     * @type {string}
     * @memberof StateWizardPanelControlBase
     */
    public firstForm: string = '';

    /**
     * 状态属性
     *
     * @type {string}
     * @memberof StateWizardPanelControlBase
     */
    public stateField: string = '';

    /**
     * 步骤标识集合
     *
     * @type {*}
     * @memberof StateWizardPanelControlBase
     */
    public stepTags: any = {};

    /**
     * 视图状态订阅对象
     *
     * @public
     * @type {Subject<{action: string, data: any}>}
     * @memberof StateWizardPanelControlBase
     */
    public wizardState: Subject<ViewState> = new Subject();

    /**
     * 步骤是否显示集合
     *
     * @type {*}
     * @memberof StateWizardPanelControlBase
     */
    public stepVisiable: any = {};

    /**
     * 当前显示表单
     *
     * @type {string}
     * @memberof StateWizardPanelControlBase
     */
    public curShow: string = "";

    /**
     * 抽屉状态
     *
     * @memberof StateWizardPanelControlBase
     */
    public drawerOpenStatus: any = {
        isOpen: false,
        formName: ""
    }

    /**
     * @description 状态向导面板部件事件
     * @type {(Subscription | undefined)}
     * @memberof StateWizardPanelControlBase
     */
    public stateWizardControlEvent: Subscription | undefined;

    /**
     * 部件模型数据初始化实例
     *
     * @param {*} [args]
     * @memberof StateWizardPanelControlBase
     */
    public async ctrlModelInit(args?: any) {
        await super.ctrlModelInit(args);
        this.stateField = (this.controlInstance.getStatePSAppDEField() as IPSAppDEField)?.codeName?.toLowerCase();
        //TODO行为首字母大写
        this.stateField = (this.controlInstance.getStatePSAppDEField() as IPSAppDEField)?.codeName?.toLowerCase();
        this.initAction = (this.controlInstance.getInitPSControlAction() as IPSControlAction)?.getPSAppDEMethod()?.codeName || 'Get';
        this.finishAction = (this.controlInstance.getFinishPSControlAction() as IPSControlAction)?.getPSAppDEMethod()?.codeName || 'Update';
        if (!(this.Environment && this.Environment.isPreviewMode)) {
            this.service = new AppWizardPanelService(this.controlInstance, this.context);
            await this.service.loaded();
        }
        this.initFirstForm();
    }

    /**
     * 部件初始化
     *
     * @memberof StateWizardPanelControlBase
     */
    public ctrlInit() {
        super.ctrlInit();
        this.regFormActions();
        this.doInit();
        if (this.viewState) {
            this.stateWizardControlEvent = this.viewState.subscribe(({ tag, action, data }: any) => {
                if (Object.is(tag, this.name)) {
                    if (Object.is('load', action)) {
                        this.doInit(data);
                    }
                }
            });
        }
    }

    /**
     * 注册表单步骤行为
     *
     * @memberof StateWizardPanelControlBase
     */
    public regFormActions() {
        const wizard: IPSDEWizard | null = this.controlInstance.getPSDEWizard();
        const wizardForms: Array<IPSDEWizardForm> = wizard?.getPSDEWizardForms() || [];
        if (wizard && wizardForms.length > 0) {
            wizardForms.forEach((form: IPSDEWizardForm) => {
                this.regFormAction(`${this.controlInstance.name}_form_${form.formTag.toLowerCase()}`, form.getStepActions() || [], this.getStepTag(wizard.getPSDEWizardSteps() || [], (form?.getPSDEWizardStep()?.codeName) as string))
            })
        }
    }

    /**
     * 初始化当前激活表单
     * 
     * @memberof StateWizardPanelControlBase
     */
    public initFirstForm() {
        const wizard: IPSDEWizard | null = this.controlInstance.getPSDEWizard();
        const wizardForms: Array<IPSDEWizardForm> = wizard?.getPSDEWizardForms() || [];
        if (wizard && wizardForms.length > 0) {
            //TODO IPSDEWizard getFirstPSDEWizardForm()无返回值
            const firstForm = wizardForms.find((form: any) => { return form.firstForm; })
            if (firstForm) {
                this.firstForm = `${this.controlInstance.name}_form_${firstForm.formTag?.toLowerCase()}`;
            }
        }
    }

    /**
     * 状态表单加载完成
     *
     * @param {*} args 表单参数
     * @param {string} name 名称
     * @memberof StateWizardPanelControlBase
     */
    public wizardpanelFormload(args: any, name: string) {
        if (args) {
            Object.assign(this.formParam, args);
        }
    }

    /**
    * 向导表单保存完成
    *
    * @param {*} args 表单参数
    * @param {string} name 名称
    * @memberof StateWizardPanelControlBase
    */
    public wizardpanelFormsave(args: any, name: string) {
        Object.assign(this.formParam, args);
        if (Object.is(this.curState, 'NEXT')) {
            if (this.historyForms.indexOf(name) === -1) {
                this.historyForms.push(name);
            }
            this.setPopVisiable(name, false);
            if (this.getNextForm(name)) {
                this.activeForm = this.getNextForm(name);
                this.setPopVisiable(this.activeForm, true);
                setTimeout(() => {
                    this.formLoad(this.activeForm);
                }, 1);
            } else {
                this.doFinish();
            }
        } else if (Object.is(this.curState, 'FINISH')) {
            this.doFinish();
        }
    }

    /**
     * 步骤标题点击
     *
     * @param {string} name 步骤名称
     * @return {*} 
     * @memberof StateWizardPanelControlBase
     */
    public stepTitleClick(name: string) {
        const that = this;
        let activeIndex: number = that.wizardForms.indexOf(that.activeForm);
        let curIndex: number = that.wizardForms.indexOf(name);
        if (curIndex > activeIndex) {
            setTimeout(() => {
                (that.$refs[name + '_popover'] as any).showPopper = false;
                that.curShow = "";
            }, 0)
            return;
        }
        that.stepVisiable[name] = !that.stepVisiable[name];
        if (that.stepVisiable[name]) {
            that.curShow = name;
            that.formLoad(name);
        } else {
            that.curShow = "";
        }
    }

    /**
     * 左右按钮点击
     *
     * @param {*} mode 左右标识
     * @return {*} 
     * @memberof StateWizardPanelControlBase
     */
    public handleClick(mode: any) {
        if (Object.is(this.curShow, "")) {
            return;
        }
        let curIndex: number = this.wizardForms.indexOf(this.curShow);
        if (Object.is(mode, "PRE") && (curIndex !== 0)) {
            this.setPopVisiable(this.wizardForms[curIndex], false);
            setTimeout(() => {
                this.setPopVisiable(this.wizardForms[curIndex - 1], true);
                this.formLoad(this.wizardForms[curIndex - 1]);
            }, 0);
        }
        if (Object.is(mode, "NEXT") && (curIndex < (this.wizardForms.length - 1) && this.historyForms.includes(this.wizardForms[curIndex + 1]))) {
            this.setPopVisiable(this.wizardForms[curIndex], false);
            setTimeout(() => {
                this.setPopVisiable(this.wizardForms[curIndex + 1], true);
                this.formLoad(this.wizardForms[curIndex + 1]);
            }, 0);
        }
    }

    /**
     * 打开链接
     *
     * @param {string} name 表单名称
     * @memberof StateWizardPanelControlBase
     */
    public handleOpen(name: string) {
        this.handleClose(name);
        this.drawerOpenStatus.isOpen = true;
        this.drawerOpenStatus.formName = name;
    }

    /**
     * 关闭
     *
     * @param {string} name 表单名称
     * @memberof StateWizardPanelControlBase
     */
    public handleClose(name: string) {
        this.setPopVisiable(name, false);
    }

    /**
     * 上一步
     *
     * @param {string} name 表单名称
     * @memberof StateWizardPanelControlBase
     */
    public clickPrev(name: string) {
        const length = this.historyForms.length;
        if (length > 0) {
            this.curState = 'PREV';
            let curIndex: number = this.wizardForms.indexOf(name);
            this.handleCtrlEvents('onbeforeprev', { action: 'load', data: this.formParam }).then((res: boolean) => {
                if (res) {
                    this.setPopVisiable(name, false);
                    setTimeout(() => {
                        this.setPopVisiable(this.historyForms[curIndex - 1], true);
                        this.formLoad(this.historyForms[curIndex - 1]);
                    }, 1);
                }
            })
        }
    }

    /**
     * 下一步
     *
     * @param {string} name 表单名称
     * @memberof StateWizardPanelControlBase
     */
    public clickNext(name: string) {
        if (name) {
            if (this.$refs && this.$refs[name]) {
                let form: any = (this.$refs[name] as any).ctrl;
                if (form.formValidateStatus()) {
                    this.curState = 'NEXT';
                    this.handleCtrlEvents('onbeforenext', { action: 'save', data: this.formParam }).then((res: boolean) => {
                        if (res) {
                            this.wizardState.next({ tag: name, action: 'save', data: this.formParam });
                        }
                    })
                } else {
                    this.$throw((this.$t('app.commonwords.rulesexception') as string), 'onClickNext');
                }
            }
        }

    }

    /**
     * 完成
     *
     * @param {string} name 表单名称
     * @memberof StateWizardPanelControlBase
     */
    public clickFinish(name: string) {
        if (name) {
            if (this.$refs && this.$refs[name]) {
                let form: any = (this.$refs[name] as any).ctrl;
                if (form.formValidateStatus()) {
                    this.curState = 'FINISH';
                    this.handleCtrlEvents('onbeforefinish', { action: 'save', data: this.formParam }).then((res: boolean) => {
                        if (res) {
                            this.wizardState.next({ tag: name, action: 'save', data: this.formParam });
                        }
                    })
                } else {
                    this.$throw((this.$t('app.commonwords.rulesexception') as string), 'onClickFinish');
                }
            }
        }
    }

    /**
     * 抽屉状态改变
     *
     * @param {*} value  值
     * @memberof StateWizardPanelControlBase
     */
    public onVisibleChange(value: any) {
        if (!value) {
            this.drawerOpenStatus.isOpen = false;
        }
    }

    /**
     * 获取步表单
     *
     * @param {IPSDEWizardStep} step 步骤模型
     * @return {*} 
     * @memberof StateWizardPanelControlBase
     */
    public getStepForm(step: IPSDEWizardStep) {
        const editForms: Array<IPSDEEditForm> = this.controlInstance.getPSDEEditForms() || [];
        let stepForm: any;
        if (editForms.length > 0) {
            stepForm = editForms.find((form: IPSDEEditForm) => {
                const wizardForm: IPSDEWizardForm | null = (form as IPSDEWizardEditForm)?.getPSDEWizardForm();
                if (wizardForm) {
                    const wizardStep: string | undefined = wizardForm.getPSDEWizardStep()?.codeName;
                    if (wizardStep && wizardStep == step.codeName) {
                        return true;
                    }
                }
                return false;
            });
        }
        return stepForm ? stepForm.name : "";
    }

    /**
     * 设置popover是否显示
     *
     * @param {string} name 表单名称
     * @param {boolean} isVisiable 是否显示
     * @memberof StateWizardPanelControlBase
     */
    public setPopVisiable(name: string, isVisiable: boolean) {
        this.stepVisiable[name] = isVisiable;
        const refFrom = (this.$refs[name + '_popover'] as any);
        if (refFrom) {
            refFrom.showPopper = isVisiable;
            this.curShow = isVisiable ? name : "";
        }
    }

    /**
     * 是否显示
     *
     * @param {string} name 表单名称
     * @param {string} type 类型
     * @return {*} 
     * @memberof StateWizardPanelControlBase
     */
    public isVisiable(name: string, type: string) {
        const actions: Array<string> = this.stepActions[name];
        if (actions && actions.indexOf(type) !== -1 && Object.is(name, this.activeForm)) {
            return true;
        } else {
            return false;
        }
    }

    /**
     * 部件事件
     * @param ctrl 部件 
     * @param action  行为
     * @param data 数据
     * 
     * @memberof StateWizardPanelControlBase
     */
    public onCtrlEvent(controlname: string, action: string, data: any) {
        if (Object.is(action, "save")) {
            this.wizardpanelFormsave(data, controlname);
        } else if (Object.is(action, "load")) {
            this.wizardpanelFormload(data, controlname);
        }
    }

    /**
     * 获取下一步向导表单
     *
     * @memberof StateWizardPanelControlBase
     */
    public getNextForm(name: string) {
        let index = this.wizardForms.indexOf(name);
        if (index >= 0) {
            if (this.wizardForms[index + 1]) {
                return this.wizardForms[index + 1];
            }
        }
        return undefined;
    }

    /**
     * 完成行为
     *
     * @memberof StateWizardPanelControlBase
     */
    public doFinish() {
        let arg: any = {};
        Object.assign(arg, this.formParam);
        Object.assign(arg, { viewparams: this.viewparams });
        let tempContext: any = JSON.parse(JSON.stringify(this.context));
        this.onControlRequset('doFinish', tempContext, arg);
        const post: Promise<any> = this.service.finish(this.finishAction, tempContext, arg, this.showBusyIndicator);
        post.then((response: any) => {
            this.onControlResponse('doFinish', response);
            if (response && response.status === 200) {
                const data = response.data;
                this.handleCtrlEvents('onfinishsuccess', { action: this.finishAction, navParam: arg, data: data }).then((res: boolean) => {
                    if (res) {
                        this.ctrlEvent({
                            controlname: this.controlInstance.name,
                            action: 'finish',
                            data: data,
                        });
                    }
                })
            } else {
                this.handleCtrlEvents('onfinisherror', { action: this.finishAction, navParam: arg, data: response?.data }).then((res: boolean) => {
                    if (res) {
                        this.$throw(response, 'doFinish');
                    }
                })
            }
        }).catch((response: any) => {
            this.onControlResponse('doFinish', response);
            this.handleCtrlEvents('onfinisherror', { action: this.finishAction, navParam: arg, data: response?.data }).then((res: boolean) => {
                if (res) {
                    this.$throw(response, 'doFinish');
                }
            })
        });
    }

    /**
     * 获取步骤标识
     *
     * @param {Array<any>} wizardSteps 步骤数组
     * @param {string} tag 标识
     * @return {*} 
     * @memberof StateWizardPanelControlBase
     */
    public getStepTag(wizardSteps: Array<any>, tag: string) {
        if (wizardSteps && (wizardSteps.length > 0) && tag) {
            let curStep: any = wizardSteps.find((step: any) => {
                return step.title === tag;
            })
            return curStep.stepTag || tag;
        } else {
            return tag;
        }
    }

    /**
     * 注册表单
     *
     * @param {string} name 名称
     * @param {Array<string>} actions 步骤集合
     * @param {*} stepTag 步骤标识
     * @memberof StateWizardPanelControlBase
     */
    public regFormAction(name: string, actions: Array<string>, stepTag: any) {
        this.stepActions[name] = actions;
        this.stepTags[name] = stepTag;
        this.stepVisiable[name] = false;
        this.wizardForms.push(name);
    }

    /**
     * 计算激活表单
     *
     * @param {*} data 数据
     * @memberof StateWizardPanelControlBase
     */
    public computedActiveForm(data: any) {
        if (data[this.stateField]) {
            if (Object.keys(this.stepTags).length > 0) {
                Object.keys(this.stepTags).forEach((name: string) => {
                    if (this.stepTags[name] === data[this.stateField]) {
                        this.activeForm = name;
                    }
                })
            }
            if (!this.activeForm) {
                this.activeForm = this.firstForm;
            }
        } else {
            this.activeForm = this.firstForm;
        }
        if (this.activeForm) {
            let index = this.wizardForms.indexOf(this.activeForm);
            this.wizardForms.forEach((item: any, inx: number) => {
                if (inx <= index) {
                    this.historyForms.push(item);
                }
            })
        }
    }

    /**
     * 初始化
     *
     * @param {*} [opt={}] 额外参数
     * @memberof StateWizardPanelControlBase
     */
    public doInit(opt: any = {}) {
        const arg: any = { ...opt };
        Object.assign(arg, { viewparams: this.viewparams });
        let tempContext: any = JSON.parse(JSON.stringify(this.context));
        this.handleCtrlEvents('onbeforeinit', { action: this.initAction, navContext: tempContext, navParam: arg }).then((res: any) => {
            if (res) {
                this.onControlRequset('doInit', tempContext, arg);
                const post: Promise<any> = this.service.init(this.initAction, tempContext, arg, this.showBusyIndicator);
                post.then((response: any) => {
                    this.onControlResponse('doInit', response);
                    if (response && response.status === 200) {
                        this.handleCtrlEvents('oninitsuccess', { action: this.initAction, navParam: arg, data: this.formParam }).then((res: boolean) => {
                            if (res) {
                                this.formParam = response.data;
                                if (response.data[this.appDeCodeName.toLowerCase()]) {
                                    Object.assign(this.context, { [this.appDeCodeName.toLowerCase()]: response.data[this.appDeCodeName.toLowerCase()] });
                                }
                                this.computedActiveForm(this.formParam);
                            }
                        })
                    } else {
                        this.handleCtrlEvents('oniniterror', { action: this.initAction, navParam: arg, data: response?.data }).then((res: boolean) => {
                            if (res) {
                                this.$throw(response, 'doInit');
                            }
                        })
                    }
                }).catch((response: any) => {
                    this.onControlResponse('doInit', response);
                    this.handleCtrlEvents('oniniterror', { action: this.initAction, navParam: arg, data: response?.data }).then((res: boolean) => {
                        if (res) {
                            this.$throw(response, 'doInit');
                        }
                    })
                })
            }
        })
    }

    /**
     * 表单加载
     *
     * @param {string} name 表单名称
     * @memberof StateWizardPanelControlBase
     */
    public formLoad(name: string) {
        if (name) {
            this.wizardState.next({ tag: name, action: 'load', data: this.formParam });
        }
    }

    /**
     * @description 部件销毁
     * @memberof StateWizardPanelControlBase
     */
    public ctrlDestroyed(){
        super.ctrlDestroyed()
        if(this.stateWizardControlEvent){
            this.stateWizardControlEvent.unsubscribe();
        }
    }
}