import Vue from 'vue';
import store from '../../store';
import i18n from '@/locale';
import { MessageBoxOptions } from './interface/message-box-options';
import AppMessageBoxComponent from './app-message-box-component';
// import AppMessageBoxComponent from './app-message-box.vue';

/**
 * 提示信息
 *
 * @export
 * @class AppMessageBox
 */
export class AppMessageBox {
    /**
     * 唯一实例
     *
     * @private
     * @static
     * @memberof AppMessageBox
     */
    private static readonly instance = new AppMessageBox();

    /**
     * vue 实例
     *
     * @private
     * @type {Vue}
     * @memberof AppModal
     */
    private vueExample!: Vue;

    /**
     * 引用对象
     *
     * @private
     * @type {*}
     * @memberof AppMessageBox
     */
    private refs: any;

    /**
     * 获取唯一实例
     *
     * @static
     * @return {*}  {AppMessageBox}
     * @memberof AppMessageBox
     */
    public static getInstance(): AppMessageBox {
        return AppMessageBox.instance;
    }


    /**
     * 打开提示信息
     *
     * @param {*} options
     * @return {*}
     * @memberof AppMessageBox
     */
    public async open(options: any): Promise<any> {
        this.handleDefault(options);
        return this.createVueExample(options)
    }

    /**
     * 处理options的默认值
     *
     * @private
     * @param {*} options
     * @memberof AppMessageBox
     */
    private handleDefault(options: any) {
        // 标题没有时显示默认标题
        if (!options.title) {
            switch (options.type) {
                case 'error':
                    options.title = '错误';
                    break;
                case 'success':
                    options.title = '询问';
                    break;
                case 'warning':
                    options.title = '警告';
                    break;
                default:
                    options.title = '消息';
            }
        }
    }


    /**
     * 创建vue 实例
     *
     * @private
     * @param {ModalConfirmOptions} opt
     * @return {*}  {Subject<any>}
     * @memberof AppMessageBox
     */
    private createVueExample(opt: MessageBoxOptions): Promise<any> {
        try {
            let component = AppMessageBoxComponent;
            let props = { ...opt };
            const vm = new Vue({
                store: store,
                i18n: i18n,
                render(h) {
                    return h(component, { props });
                }
            }).$mount();
            this.vueExample = vm;
            let app =  document.getElementById("app");
            console.log(vm, vm.$el, app);
            if(app){
                app.appendChild(vm.$el);
            }
            const comp: any = vm.$children[0];
            let subject =  comp.getSubject()
            return new Promise((resolve, reject) => {
                subject.subscribe((result: any) => {
                    resolve(result);
                });
            });
        } catch (error) {
            console.error(error);
            return new Promise((resolve)=>{ resolve(false) });
        }
    }

    /**
     * 关闭
     *
     * @memberof AppMessageBox
     */
    public close() {
        if (this.refs) {
            this.refs.close();
        }
    }
}
