import Vue, { CreateElement } from 'vue';
import { Util, AppServiceBase } from '@ibizstudio/runtime';
import { OpenParams } from '../interface/open-params';
import { ModelClipboardImportView } from '../model-clipboard-import-view';
import './model-clipboard-import-view-controller.less';

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

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

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

    /**
     * @description store 对象
     * @private
     * @type {*}
     * @memberof ModelClipboardImportViewController
     */
    private store: any;

    /**
     * @description 层级
     * @private
     * @type {number}
     * @memberof ModelClipboardImportViewController
     */
    private zIndex: number = 100;

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

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

    /**
     * 打开视图
     *
     * @param {OpenParams} params
     * @returns {*}
     * @memberof ModelClipboardImportViewController
     */
    open(params: OpenParams): Promise<any> {
        this.handleZIndex();
        return new Promise((resolve: any) => {
            this.resolve = resolve;
            this.isModelChange = false;
            if (!this.vueInstance) {
                this.vueInit(params);
            } else {
                this.vueInstance.modalParams = Util.deepCopy(params);
                this.vueInstance.zIndex = this.zIndex;
                this.vueInstance.showChange(true);
            }
        });
    }

    /**
     * @description 处理z-index
     * @memberof ModelClipboardImportViewController
     */
    handleZIndex() {
      if (!this.store) {
        this.store = AppServiceBase.getInstance().getAppStore();
      }
      this.store.commit('upZIndex');
      this.zIndex = this.store.getters.getZIndex();
    }

    /**
     * vue实例初始化
     *
     * @protected
     * @param {*} [params={}]
     * @returns {void}
     * @memberof ModelClipboardImportViewController
     */
    protected vueInit(params: any = {}): void {
        const ctrl: ModelClipboardImportViewController = this;
        this.vueInstance = new Vue<any>({
            data() {
                return {
                    isShow: false,
                    modalParams: params,
                    zIndex: ctrl.zIndex,
                }
            },
            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.ModelClipboardImportView && this.isShow) {
                        this.$refs.ModelClipboardImportView.setParam(this.modalParams);
                    }
                },
                close() {
                    this.showChange(false);
                    if (this.zIndex) {
                      ctrl.store.commit('downZIndex');
                    }
                    if (ctrl.resolve) {
                        ctrl.resolve(ctrl.isModelChange);
                    }
                },
                saved() {
                    ctrl.isModelChange = true
                }
            },
            render(h: CreateElement) {
                return h('div', {
                    class: 'model-clipboard-import-view-drawer',
                    style: {
                        'margin-top': this.isShow ? '0px' : '-100vh',
                        'z-index': this.zIndex,
                    }
                }, [
                    h('div', {
                        class: 'model-clipboard-import-view-drawer-container'
                    }, [
                        h(ModelClipboardImportView, {
                            ref: 'ModelClipboardImportView',
                            props: {
                                isClose: !this.isShow
                            },
                            on: {
                                'close': this.close,
                                'saved': this.saved
                            }
                        })
                    ])
                ]);
            },
        }).$mount(this.container);
    }

}
// 导出控制器
export const modelClipboardImportViewController = new ModelClipboardImportViewController();