class Dialog {

    config = {
        body: this.$("body"),
        AgainFatherlassName: '',
        AgainCancelClassName: '', // 取消的类名
        AgainConfirmClassName: '', // 确定的类名
        title: '提示',
        content: '这是一段信息',
        cancelText: '取消',
        confirmText: '确定',
        beforeCloseType: null,
        showClose: false,  // true 显示，false关闭
        confirmEvent: () => {},
        cancelEvent: () => {},
    };

    constructor(option) {
        this.config.title = option.title || this.config.title;
        this.config.content = option.content || this.config.content;
        this.config.cancelText = option.cancelText || this.config.cancelText;
        this.config.confirmText = option.confirmText || this.config.confirmText;
        this.config.beforeCloseType = option.beforeCloseType || this.config.beforeCloseType;
        this.config.showClose = option.showClose || this.config.showClose;
        this.config.confirmEvent = option.confirmEvent || this.config.confirmEvent;
        this.config.cancelEvent = option.cancelEvent || this.config.cancelEvent;
       
        this.createdDialog();
        this.BindCancel();
        this.BindConfirm();
    }

    createdDialog() {
        this.config.body.insertAdjacentHTML(
            "beforeend",
            `
            <div class="dialog ${this.config.AgainFatherlassName}">
                <div class="dialog_background"></div>
                <div class="dialog_content">
                    <div class="dialog_title">
                        <div class="dialog_text">${this.config.title}</div>
                        ${
                            this.config.showClose 
                            ? `<i class="iconfont"></i>`
                            : `<span></span>`
                        }
                    </div>
                    <div class="dialog_content">${this.config.content}</div>
                    <div class="dialog_action">
                        <div class="dialog_cancel ${this.config.AgainCancelClassName}">
                          ${this.config.cancelText}
                        </div>
                        <div class="dialog_confirm ${this.config.AgainConfirmClassName}">
                          ${this.config.confirmText}
                        </div>
                    </div>
                </div>
            </div>
            `
        )
    }

    createdAgainConfirm() {
        if (this.$(".again") == null) {

            this.config.AgainFatherlassName = "again";
            this.config.AgainCancelClassName = "againCancel";
            this.config.AgainConfirmClassName = "againConfirm";
            this.config.title = ""
            this.config.content = "确认关闭？"
            this.config.cancelText = "取消"
            this.config.confirmText = "确定"
            this.createdDialog();

            this.click(".againCancel", ()=> {
                this.deleteDialog(".again");
            })

            this.click(".againConfirm", ()=> {
                this.config.confirmEvent();
                this.deleteDialog(".again");
                this.deleteDialog(".dialog");
            })
        }
    }

    deleteDialog(className) {
        this.config.body.removeChild(this.$(className))
    }

    // 取消
    BindCancel() {
        this.click(".dialog_cancel", ()=> {
            this.isShowConfirm("cancel");
            if (this.config.beforeCloseType == null) {
                this.config.cancelEvent();
            }
        })
    }

    // 确定
    BindConfirm() {
        this.click(".dialog_confirm", ()=> {
            this.isShowConfirm("confirm")
            if (this.config.beforeCloseType == null) {
                this.config.confirmEvent();
            }
        })
    }

    // 判断如何展示确定关闭弹窗
    isShowConfirm(type) {
        if (this.config.beforeCloseType == type) {
            this.createdAgainConfirm()
        } else {
            this.deleteDialog(".dialog");
        }
    }

    click(className, methods) {
        this.$(className).onclick = () => methods();
    }


    $(className) {
        return document.querySelector(className)
    }


}

window.Dialog = Dialog