import Vue, { CreateElement } from 'vue';
import { StudioModelEditor } from '../studio-model-editor';
import { clone } from 'ramda';
import { IContext, IParams } from '@ibizstudio/api';
import './model-editor-view-controller.less';

/**
 * 动态模型模态展示控制器
 *
 * @export
 * @class ModelEditorViewController
 */
export class ModelEditorViewController {
    /**
     * 容器
     *
     * @protected
     * @type {HTMLDivElement}
     * @memberof ModelEditorViewController
     */
    protected container!: HTMLDivElement;
    /**
     * Vue实例
     *
     * @protected
     * @type {*}
     * @memberof ModelEditorViewController
     */
    protected vueInstance: any;

    /**
     * 上飘窗打开，关闭回调
     *
     * @protected
     * @type {*}
     * @memberof ModelEditorViewController
     */
    protected resolve?: any;

    /**
     * 模型是否修改
     *
     * @protected
     * @type {boolean}
     * @memberof ModelEditorViewController
     */
    protected isModelChange: boolean = false;

    /**
     * Creates an instance of ModelEditorViewController.
     * @memberof ModelEditorViewController
     */
    constructor() {
        this.init();
    }

    /**
     * 初始化
     *
     * @protected
     * @memberof ModelEditorViewController
     */
    protected init(): void {
        this.container = document.createElement('div');
        document.body.appendChild(this.container);
    }

    /**
     * 打开视图
     *
     * @author chitanda
     * @date 2021-03-25 20:03:41
     * @param {IContext} context
     * @param {IParams} params
     * @return {*}  {Promise<any>}
     */
    open(context: IContext, params: IParams): Promise<any> {
        return new Promise((resolve: any) => {
            this.resolve = resolve;
            this.isModelChange = false;
            if (!this.vueInstance) {
                this.vueInit(context, params);
            } else {
                this.vueInstance.modalContext = clone(context);
                this.vueInstance.modalParams = clone(params);
                this.vueInstance.showChange(true);
            }
        });
    }

    /**
     * vue实例初始化
     *
     * @protected
     * @param {IContext} context
     * @param {*} [params={}]
     * @returns {void}
     * @memberof ModelEditorViewController
     */
    protected vueInit(context: IContext, params: any = {}): void {
        const ctrl: ModelEditorViewController = this;
        this.vueInstance = new Vue<any>({
            data() {
                return {
                    isShow: false,
                    modalContext: context,
                    modalParams: params,
                };
            },
            created() {},
            mounted() {
                setTimeout(() => {
                    this.showChange();
                }, 100);
                this.updateModelParam();
            },
            updated() {
                this.updateModelParam();
            },
            methods: {
                showChange(is: boolean) {
                    if (is !== undefined) {
                        this.isShow = is;
                    } else {
                        this.isShow = !this.isShow;
                    }
                },
                updateModelParam() {
                    if (this.$refs.StudioModelEditor && this.isShow) {
                        this.$refs.StudioModelEditor.setParam(this.modalContext, this.modalParams);
                    }
                },
                close() {
                    this.showChange(false);
                    if (ctrl.resolve) {
                        ctrl.resolve(ctrl.isModelChange);
                    }
                },
                saved() {
                    ctrl.isModelChange = true;
                },
            },
            render(h: CreateElement) {
                return h(
                    'div',
                    {
                        class: 'studio-model-editor-drawer',
                        style: {
                            'margin-top': this.isShow ? '0px' : '-100vh',
                        },
                    },
                    [
                        h(
                            'div',
                            {
                                class: 'studio-model-editor-drawer-container',
                            },
                            [
                                h(StudioModelEditor, {
                                    ref: 'StudioModelEditor',
                                    props: {
                                        isClose: !this.isShow,
                                    },
                                    on: {
                                        close: this.close,
                                        saved: this.saved,
                                    },
                                }),
                            ],
                        ),
                    ],
                );
            },
        }).$mount(this.container);
    }
}
// 导出控制器
export const modelEditorController = new ModelEditorViewController();