(function ($w, $d) {
    let body = $d.body
    let m = {}
    /**
     * 使用html新建一个dom元素
     * @param {html} h 元素html字符串
     * @returns 
     */
    m.newElm = (h) => {
        var o = document.createElement("a") // 创建一个元素容器
        o.innerHTML = h // 设定元素的innerHtml
        return o.firstChild // 返回容器元素的第一个子元素
    }
    /**
     * 控制元素淡入显示
     * @param {element} e 需要淡入的元素
     * @param {callback} f 元素显示后执行的回调函数
     */
    m.fadeIn = (e, f) => {
        e.style.display = 'block' // 设置为显示
        e.style.opacity = 0 // 初始透明
        body.appendChild(e) // 添加元素到body
        let v = 0, t = setInterval(o => { // 初始化透明度和定时器
            v += 20 // 透明度+0.2
            e.style.opacity = v / 100 // 设定透明度
            if (v == 100) { // 如果元素已经完全显示
                clearInterval(t) // 移除定时器
                if (f) f() // 如果存在回调则执行回调
            }
        }, 20)
    }
    /**
     * 控制元素淡出显示
     * @param {element} e 需要淡出的元素
     * @param {callback} f 元素隐藏后执行的回调函数
     */
    m.fadeOut = (e, f) => {
        e.style.opacity = 1 // 初始显示
        let v = 100, t = setInterval(o => { // 初始化透明度和定时器
            v -= 20 // 透明度-0.2
            e.style.opacity = v / 100 // 设定透明度
            if (v == 0) { // 如果元素已经完全显示
                clearInterval(t) // 移除定时器
                body.removeChild(e) // 移除元素
                if (f) f() // 如果存在回调则执行回调
            }
        }, 20)
    }
    /**
     * 生成一个随机数字
     * @returns 数字结果
     */
    m.newId = () => {
        return 'm' + (Math.random() * 1000000).toFixed(0)
    }
    /**
     * 弹出一个消息框显示内容
     * @param {content} c 提示内容 
     * @param {time} t 显示时间
     */
    m.msg = (c, t) => {
        if (!t) t = 2000 // 设定默认时间
        let h = m.newElm(`<div class="alay-info">${c}</div>`)
        m.fadeIn(h, o => {
            setTimeout(o => {
                m.fadeOut(h)
            }, t)
        })
    }
    /**
     * 弹出一个消息提示框
     * @param {content} c 消息内容
     * @param {callback} f 回调函数，如果点击确定参数将会返回true，其他方式关闭返回false
     * @param {title} t 消息标题
     */
    m.alert = (c, f, t) => {
        if (!t) t = '消息'
        let i = m.newId() // 生成新ID
        let h = m.newElm(`<div id="${i}" class="alay-container"><div class="alay-panel"><div class="alay-title">${t}<label onclick="alay.close('${i}',false)">×</label></div><div class="alay-content">${c}</div><div class="alay-btns"><input type="button" class="alay-btn-ok" onclick="alay.close('${i}',true)" value="确定"></div></div></div></div></div>`)
        m.fadeIn(h)
        m.fc = f
    }
    /**
     * 弹出加载动画
     * @param {content} c 加载提示内容，默认“加载中”
     * @returns 元素ID，用于调用close函数隐藏
     */
    m.loading = c => {
        if (!c) c = '加载中' // 设定默认加载文本
        let i = m.newId() // 生成新ID
        let h = m.newElm(`<div id="${i}" class="alay-container"><div class="alay-loading"><div class="alay-icon"></div>${c}</div></div>`)
        m.fadeIn(h) // 淡入元素
        return i // 返回ID，用于关闭
    }
    /**
     * 将一个元素淡出隐藏并移除
     * @param {elementid} i 元素ID 
     */
    m.close = (i, t) => {
        let h = document.querySelector('#' + i) // 获取元素
        m.fadeOut(h) // 淡出移除元素
        if (m.fc) { // 如果存在回调函数则执行
            m.fc(t)
            m.fc = 0
        }
    }
    /**
     * 弹出一个确认消息框
     * @param {content} c 消息内容
     * @param {callback} f 回调函数，如果点击确定参数将会返回true，其他方式关闭返回false
     * @param {title} t 消息标题
     */
    m.confirm = (c, f, t) => {
        if (!t) t = '消息'
        let i = m.newId() // 生成新ID
        let h = m.newElm(`<div id="${i}" class="alay-container"><div class="alay-panel"><div class="alay-title">${t}<label onclick="alay.close('${i}',false)">×</label></div><div class="alay-content">${c}</div><div class="alay-btns"><input type="button" class="alay-btn-cancel" onclick="alay.close('${i}',false)" value="取消"><input type="button" class="alay-btn-ok" onclick="alay.close('${i}',true)" value="确定"></div></div></div></div></div>`)
        m.fadeIn(h)
        m.fc = f
    }

    $w.alay = m

    let css = `<style>@keyframes load{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}.alay-info{position:fixed;background-color:rgba(0,0,0,.6);color:#fff;padding:6px 20px;border-radius:5px;font-size:13px;top:50%;letter-spacing:1px;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 5px #fff;}.alay-container{position:fixed;width:100vw;height:100vh;top:0;left:0;display:flex;justify-content:center;align-items:center;}.alay-loading{width:100px;height:80px;background-color:rgba(0,0,0,.6);border-radius:15px;text-align:center;color:#fff;font-size:13px;padding-top:18px;line-height:32px;}.alay-icon{border:5px solid #f3f3f3;border-radius:50%;border-top:5px solid #ff6666;width:30px;height:30px;margin:auto;animation:load 2s ease-in-out infinite;}.alay-panel{position:fixed;width:250px;background-color:#fff;box-shadow:0 0 8px #bbb;border-radius:5px;top:50%;left:50%;transform:translate(-50%,-50%);}.alay-panel .alay-title{background-color:#6669ff;border-radius:5px 5px 0 0;color:#fff;padding:5px 10px;box-sizing:border-box;display:flex;justify-content:space-between;}.alay-panel .alay-title label{cursor:pointer;display:block;width:20px;text-align:center;}.alay-panel .alay-content{padding:5px 10px;font-size:14px;min-height:80px;}.alay-panel .alay-btns{padding:6px 10px;border-top:1px solid #ddd;overflow:hidden;}.alay-panel .alay-btns input{outline:none;border-radius:5px;padding:2px 10px;font-size:13px;transition:all .1s;cursor:pointer;}.alay-btn-ok{background-color:#fff;border:1px #aaa solid;float:right;}.alay-btn-cancel{background-color:#fff;border:1px #ff6666 solid;color:#ff6666;float:left;}.alay-btn-ok:hover{background-color:#ff6666;color:#fff;border-color:#ff6666;}.alay-btn-cancel:hover{background-color:#ff6666;color:#fff;border-color:#ff6666;}</style>`
    let style = m.newElm(css)
    $d.head.appendChild(style)
})(window, document)