// 语法糖
class Dialog {

    // 默认参数
    defaultOption = {
        title: '标题1',
        message: '内容1',
        showConfirmButton: false,
        confirmButtonText: '确认',
        confirmButtonColor: '#ee0a24',

        showCancelButton: true,
        cancelButtonText: '取消',
        cancelButtonColor: 'black',

        className: '',
        width: 320,

        overlay: true,
        closeOnPopstate: true,  // 是否在页面回退时自动关闭
        closeOnClickOverlay: true, // 是否在点击遮罩层后关闭弹窗
        lockScroll: false,
        allowHtml: true,
        confirm: () => { }, // 确认按钮的回调
        cancel: () => { }, // 点击取消按钮时触发
        oncancel: () => { },  // 打开弹出
        onconfirm: () => { }  // 关闭弹窗
    }

    // 构造函数
    constructor(option) {

        if (option.hasOwnProperty("title") && option.hasOwnProperty("message")) {
            this.defaultOption.title = option.title || this.defaultOption.title
            this.defaultOption.message = option.message || this.defaultOption.message

            option.hasOwnProperty("showConfirmButton") ? this.defaultOption.showConfirmButton = option.showConfirmButton : ''
            option.hasOwnProperty("showCancelButton") ? this.defaultOption.showCancelButton = option.showCancelButton : ''
            option.hasOwnProperty("overlay") ? this.defaultOption.overlay = option.overlay : ''
            option.hasOwnProperty("closeOnPopstate") ? this.defaultOption.closeOnPopstate = option.closeOnPopstate : ''
            option.hasOwnProperty("closeOnClickOverlay") ? this.defaultOption.closeOnClickOverlay = option.closeOnClickOverlay : ''
            option.hasOwnProperty("lockScroll") ? this.defaultOption.lockScroll = option.lockScroll : ''
            option.hasOwnProperty("allowHtml") ? this.defaultOption.allowHtml = option.allowHtml : ''


            this.defaultOption.confirmButtonText = option.confirmButtonText || this.defaultOption.confirmButtonText
            this.defaultOption.cancelButtonText = option.cancelButtonText || this.defaultOption.cancelButtonText


            this.defaultOption.className = option.className || this.defaultOption.className
            this.defaultOption.width = option.width || this.defaultOption.width
            this.defaultOption.confirmButtonColor = option.confirmButtonColor || this.defaultOption.confirmButtonColor
            this.defaultOption.cancelButtonColor = option.cancelButtonColor || this.defaultOption.cancelButtonColor

            this.defaultOption.confirm = option.confirm || this.defaultOption.confirm
            this.defaultOption.cancel = option.cancel || this.defaultOption.cancel
            this.defaultOption.open = option.open || this.defaultOption.open
            this.defaultOption.close = option.close || this.defaultOption.close

        } else {
            throw new Error("抱歉，缺少必填的title，message参数，请传入！")
        }
    }

    initHTML() {
        $("body").insertAdjacentHTML("beforeend", `
            <div class="bmy_dialog ${this.defaultOption.className}">
                <div class="bmy_dialog_content" style="width:${this.defaultOption.width}px">
                    <div class="bmy_dialog_title">${this.defaultOption.title}</div>
                    <div class="bmy_dialog_message"></div>
                    <div class="bmy_dialog_button">
                        ${this.defaultOption.showCancelButton
                            ? `<div style="color:${this.defaultOption.cancelButtonColor}" class="button bmy_dialog_cancel">${this.defaultOption.cancelButtonText}</div>`
                            : ''
                        }
                        ${this.defaultOption.showConfirmButton
                            ? `<div style="color:${this.defaultOption.confirmButtonColor}" class="button bmy_dialog_confirm">${this.defaultOption.confirmButtonText}</div>`
                            : ''
                        }
                    </div>
                </div>
            </div>`);

            this.initConfig();
    }

    initConfig() {
        // 是否监听页面返回
        if (this.defaultOption.closeOnPopstate) {
            window.addEventListener("popstate", (e) => { 
                this.close();
            }, false);
        }

        // 是否显示背景层
        this.defaultOption.overlay
        ? ''
        : $(".bmy_dialog ").style.backgroundColor = "rgba(0, 0, 0, 0)"
        
        // message 是否支持渲染html
        this.defaultOption.allowHtml
        ? $(".bmy_dialog_message").innerHTML = this.defaultOption.message
        : $(".bmy_dialog_message").innerText = this.defaultOption.message
        

        // 是否锁住背景层
        this.defaultOption.lockScroll
        ? $("body").style.overflow = "hidden"
        : $("body").style.overflow = "auto"

        $(".bmy_dialog_cancel").onclick = (e) => {
            e.stopPropagation()
            this.close();
        }

        $(".bmy_dialog_confirm").onclick = (e) => {
            e.stopPropagation()
            this.defaultOption.confirm()
            this.defaultOption.onconfirm()
            this.close();
        }

        if (this.defaultOption.closeOnClickOverlay) {
            $(".bmy_dialog").onclick = () => {
               
                this.close();
            }
        }
        
    }

    
    open () {
        this.initHTML()
    }
    
    close () {
        $("body").removeChild($(".bmy_dialog"))
        this.defaultOption.cancel()
        this.defaultOption.oncancel()
    }


    oncancel(callback) {
        this.defaultOption.oncancel = callback
    }

    onconfirm(callback) {
        this.defaultOption.onconfirm = callback
    }
}

function open () {
    
}

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