class Dlogo {
    config = {
        body: this.$("body"),
        title: "标题",
        content: "内容",
        showClose: false,//true表示显示，flase是关闭
        cancelm: "取消",
        confirmv: "确认",
        AgainFatherlassName: '',
        AgainCancelClassName: '', // 取消的类名
        AgainConfirmClassName: '', // 确定的类名
        beforeCloseType: null,
        cancelEvent: () => {

        },
        confirmvEvent: () => {

        }
    };

    constructor(option) {
        this.config.title = option.title || this.config.title;
        this.config.content = option.content || this.config.content;
        this.config.showClose = option.showClose || this.config.showClose;
        this.config.cancelm = option.cancelm || this.config.cancelm;
        this.config.confirmv = option.confirmv || this.config.confirmv;
        this.config.cancelEvent = option.cancelEvent || this.config.cancelEvent;
        this.config.confirmvEvent = option.confirmvEvent || this.config.confirmvEvent;
        this.config.beforeCloseType = option.beforeCloseType || this.config.beforeCloseType;
        this.createDlogo()
        this.BindClose()
        this.cancelClear()
        this.showCloseClear()

    }

    createDlogo() {
        this.config.body.insertAdjacentHTML("beforeend", `<div class="back ${this.config.AgainFatherlassName}">
        <div class="backg"></div>
        <div class="pop">
            <div class="top">
            <div class="title">${this.config.title}</div>
           ${
            this.config.showClose
                ? `<i class="iconfont icon-guanbi"></i>`
                : `<span></span>`
        }
            </div>
            <div class="content">
            ${this.config.content}
            </div>
            <div class="buttom">
            <button class="cancel ${this.config.AgainCancelClassName}">${this.config.cancelm}</button>
            <button class="confirm ${this.config.AgainConfirmClassName}">${this.config.confirmv}</button>
            </div>
        </div>
        </div>`)
    }

    createdAgainConfirm() {
        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.createDlogo()
        this.click(".againCancel", ()=> {
            this.DeleteDlogo(".again");
        })

        this.click(".againConfirm", ()=> {
            this.DeleteDlogo(".back");
            this.DeleteDlogo(".again");
        })
    }

    /*删除元素*/
    DeleteDlogo(came) {
        this.config.body.removeChild(this.$(came))
    }

    /*关闭按钮被点击*/
    BindClose() {
        this.click(".cancel", () => {
            this.DeleteDlogo(".back");
            this.DeleteDlogo();
        })
    }

    /*确认按钮被点击*/
    cancelClear() {
        this.click(".confirm", () => {
            this.config.confirmvEvent();
            this.DeleteDlogo(".back");
        })


    }

    /*标签按钮被点击*/
    showCloseClear() {
        this.click(".icon-guanbi",() =>{
            this.DeleteDlogo(".back");
            this.createdAgainConfirm()
        })


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

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

window.Dlogo = Dlogo