const message = {
    background: '', 
    outside: '', 
    inside: '', 
    insideSetTime: '', 
    body: '', 
    time: 0, 
    run(msg = "success", type = 'success', time = 2000, isTimeout = true) {
        this.time = time;
        this.background = this.backgroundCheck(type)
        this.body = document.body;
        let id = 'inside_box' + Date.now();
        let outsideShow = document.getElementById('message_box_show');
        if (outsideShow != null) {
            this.inside = document.createElement('div');
            this.inside.setAttribute('class', 'message_box_inside cc-display')
            this.inside.setAttribute('id', id)
            this.inside.style = 'border-radius: 5px;color: #FFF;cursor: pointer;display: inline-block;font-size: 12px;height: 40px;line-height: 34px;min-width: 110px;padding: 0 10px 0 10px;text-align: left;text-decoration: none;-ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#ff123852,Positive=true)";zoom: 1;filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#ff123852,Positive=true);-ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=2,Color=#33000000,Positive=true)";filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=2,Color=#33000000,Positive=true);-moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.2);-webkit-box-shadow: 0px 2px 2px rgb(0 0 0 / 20%);box-shadow: 0px 2px 2px rgb(0 0 0 / 20%);';
            this.inside.style.backgroundColor = this.background;
            this.inside.style.border = '2px solid ' + this.background;
            this.inside.innerHTML = `<span>${msg}</span>`
            outsideShow.appendChild(this.inside);
        } else {
            this.outside = document.createElement('div');
            this.outside.setAttribute('id', 'message_box_outside')
            this.outside.setAttribute('class', 'cc-display')
            this.outside.style = 'position: fixed;top: 40px;left: 50%;transform: translate(-50%, 0%);z-index: 2000;';
            outsideShow = document.createElement('div');
            outsideShow.setAttribute('id', 'message_box_show');
            this.inside = document.createElement('div');
            this.inside.setAttribute('class', 'message_box_inside cc-display')
            this.inside.setAttribute('id', id)
            this.inside.style = 'border-radius: 5px;color: #FFF;cursor: pointer;display: inline-block;font-size: 12px;max-height: 100px;overflow: scroll;line-height: 34px;min-width: 110px;padding: 0 10px 0 10px;text-align: left;text-decoration: none;-ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#ff123852,Positive=true)";zoom: 1;filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#ff123852,Positive=true);-ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=2,Color=#33000000,Positive=true)";filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=2,Color=#33000000,Positive=true);-moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.2);-webkit-box-shadow: 0px 2px 2px rgb(0 0 0 / 20%);box-shadow: 0px 2px 2px rgb(0 0 0 / 20%);';
            this.inside.style.backgroundColor = this.background;
            this.inside.style.border = '2px solid ' + this.background;
            this.inside.innerHTML = `<span>${msg}</span>`
            outsideShow.appendChild(this.inside);
            this.outside.appendChild(outsideShow);
            this.body.appendChild(this.outside);
        }
        if (isTimeout) {
            this[id] = this.insideTime(this.inside, outsideShow);
            this.boxShowTime(this.inside, id, outsideShow);
        }
    },
    boxShowTime(inside, insideSetTime, outsideShow) {
        inside.addEventListener('mouseleave', () => {
            this[insideSetTime] = this.insideTime(inside, outsideShow);
        })
        inside.addEventListener('mouseenter', () => {
            clearTimeout(this[insideSetTime]);
        })
    },
    insideTime(inside, outsideShow) {
        let insideSetTime = setTimeout(() => {
            outsideShow.removeChild(inside);
        }, this.time);
        return insideSetTime;
    },
    backgroundCheck(type) {
        if (type === 'success') return '#67C23A';
        if (type === 'error') return '#F56C6C';
        if (type === 'warning') return '#E6A23C';
        return '#909399';
    },
}