/**
 * 封装加载提示
 */
class Loading {
    /**
     * 加载进度
     */
    loading() {
        this.SetLoading()
        // 塞入loading的html
        this.$(".isShow .loading").innerHTML = 
        `
            <div class="back">
                <div class="load8">
                    <div class="load8-container container1">
                        <div class="circle1"></div>
                        <div class="circle2"></div>
                        <div class="circle3"></div>
                        <div class="circle4"></div>
                    </div>
                    <div class="load8-container container2">
                        <div class="circle1"></div>
                        <div class="circle2"></div>
                        <div class="circle3"></div>
                        <div class="circle4"></div>
                    </div>
                    <div class="load8-container container3">
                        <div class="circle1"></div>
                        <div class="circle2"></div>
                        <div class="circle3"></div>
                        <div class="circle4"></div>
                    </div>
                </div>                 
            </div>
        `;
        this.$(".isShow .back").style = `padding: 0.4rem;`
        this.show()
    }

    /**
     * 显示toast提示
     * @param {*} text 文字
     * @param {*} time 自动关闭提示的时间 默认3秒
     */
    toast(text, time = 3000) {
        this.SetLoading()
        this.$(".isShow .loading").innerHTML = `<div class="back"></div>`
        // 设置边距
        this.$(".isShow .back").style = `padding: 0.14rem 0.4rem;`

        // 设置内容
        this.$(".isShow .back").innerHTML = `<span>${text}</span>`;
        this.show()
        setTimeout(()=> this.close(),time)
    }

    /**
     * 弹出框 dialog
     * @param {*} params 
     */
    dialog(params) {
        params == undefined ? params = {} : null;
        let defaultParams = { title: '标题', message: '内容', 
            cancelText: '取消', confirmText: '确定', 
            cancelColor: '#323233', confirmColor: '#fb7299'
        };

        defaultParams.title = params.title ||  defaultParams.title;
        defaultParams.message = params.message ||  defaultParams.message;
        defaultParams.cancelText = params.cancelText ||  defaultParams.cancelText;
        defaultParams.confirmText = params.confirmText ||  defaultParams.confirmText;
        defaultParams.cancelColor = params.cancelColor ||  defaultParams.cancelColor;
        defaultParams.confirmColor = params.confirmColor ||  defaultParams.confirmColor;
  
        this.SetLoading()
        this.$(".isShow .loading").innerHTML = `
            <div class="dialog_f">
              <div class="dialog_header">${defaultParams.title}</div>
              <div class="dialog_content">
                <div class="dialog_message">${defaultParams.message}</div>
              </div>
              <div class="dialog_footer">
                <div class="dialog_cancel" style="color:${defaultParams.cancelColor}">
                    ${defaultParams.cancelText}
                </div>
                <div class="dialog_confirm" style="color:${defaultParams.confirmColor}">
                    ${defaultParams.confirmText}
                </div>
              </div>
            </div>
        `;
        // 取消按钮被点击的时候
        this.$(".isShow .dialog_cancel").onclick = () => {
            params.cancel && params.cancel()
            this.close()
        }
         // 确定按钮被点击的时候
         this.$(".isShow .dialog_confirm").onclick = () => {
            params.confirm && params.confirm()
            this.close()
        }
        this.$(".isShow .loading").style = 'background: rgba(0, 0, 0, 0.7)'
        this.show()
    }

    /**
     * 填充loading的html结构
     */
    SetLoading () {
        if (this.$(".isShow") == null) {
            var isShow = document.createElement("div")
            isShow.className = "isShow"
            isShow.style = "display: none;"

            var loading = document.createElement("div")
            loading.className = "loading";
            isShow.appendChild(loading)
            this.$("body").appendChild(isShow)
        }
    }
   
    /**
     * 删除内容，隐藏弹窗
     */
    close() {
        this.clearContent()
        this.$(".isShow").style.display = "none"
    }

    /**
     * 显示弹窗
     */
    show() {
        this.$(".isShow").style.display = "block"
    }

    /**
     * 清空弹窗内部的内容
     */
    clearContent() {
        this.$(".isShow .loading").style = "";
        this.$(".isShow .loading").innerHTML = "";
    }

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

var Tips = new Loading()