class Utils {

    // 类被初始化的时候，构造函数就会自己运行了
    constructor() {
        this.newMap()
    }

    newMap() {
        Array.prototype.maps = function (callback) {
            // var callback = e => `<li>${e}</li>`
            var res = []
            for (let i = 0; i < this.length; i++) {
                var ddd = callback(this[i], i, this)
                res.push(ddd)
            }
            return res.toString().replaceAll(",", "")
        }
    }

    $(className) {
        var classNameArr = className.split(" ");
        if (classNameArr.length == 1) {
            var isAll = document.querySelectorAll(classNameArr[0])
            return isAll.length == 1 ? isAll[0] : isAll
        } else {
            var lastChild = classNameArr[classNameArr.length - 1];
            var lastChildFather = classNameArr[classNameArr.length - 2];

            var lastChildFatherDOM = document.querySelector(lastChildFather);

            var key = "";
            lastChild.includes(".")
                ? (key = "className")
                : lastChild.includes("#")
                    ? (key = "id")
                    : (key = "localName");

            var res = Array.from(lastChildFatherDOM.children).filter(
                (e) => e[key] == lastChild.replace(".", "")
            );
        }

        return res.length <= 1 ? res[0] : res;
    }

    footer() {
        // ajax 接口返回的底部导航数据
        let arr = [
            { icon: 'icon-shouye', title: '首页', href: 'index.html' },
            { icon: 'icon-changchenglogo', title: '分类', href: 'domestic.html' },
            { icon: 'icon-hot', title: '热门', href: 'hot.html' },
            { icon: 'icon-wo', title: '我的', href: 'me.html' },
        ]
        let body = this.$("body")

        // TODO innerHTML 会导致事件丢失
        body.innerHTML += `
            <ul class="footer fixed flex ja ais">
                ${arr.maps(v => {
            return `
                        <li class="${location.pathname.includes(v.href) ? 'active' : ''}">
                            <a href="${v.href}">
                            <i class="iconfont ${v.icon}"></i>
                            <p>${v.title}</p>
                            </a>
                        </li>
                        `
        })
            }
                
            </ul>
        `
    }

    item(dom, data, theme = 1) {
        $(dom).innerHTML = data.maps(v => {
            return `
            <li class="${theme == 2 ? 'item-theme-horizontally' : ''}">
                <a href="./info.html?id=${v.id}&time=${v.time}">
                    <img src="${v.thumbnail}" alt="">
                    <div class="r">
                        <div class="text ellipsis">${v.title}</div>
                        <div class="desc flex ais js">
                            <div class="time">${v.time}</div>
                            <div class="view flex ais">
                                <i class="iconfont icon-yanjing"></i>
                                <span>${v.view}</span>
                            </div>
                        </div>
                    </div>
                </a>
            </li>
            `
        })
    }


    query(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return decodeURIComponent(r[2]); return null;
    }

    header(content, action, back = `<i class="iconfont icon-fanhui"></i>`) {
        this.$("body").insertAdjacentHTML('afterbegin', `
         <div class="header fixed flex ais flex1 border-box p15">
          ${back}
          ${content}
          ${action}
         </div>    
        `);

        this.$(".icon-fanhui").onclick = () => {
            history.back()
        }
    }

    // 滚动到底部实现自动加载下一页数据
    onscroll(callback) {
        window.onscroll = async () => {
            var scrollHeight = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);
            var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
            var clientHeight = window.innerHeight || Math.min(document.documentElement.clientHeight, document.body.clientHeight);

            if (clientHeight + Math.ceil(scrollTop) >= scrollHeight) {
              callback()
            }
        }
    }


    async navShare(title = "", text = "", url = "") {
        console.log(navigator.share && navigator.canShare);
        if (navigator.share && navigator.canShare) {
            await navigator.share({
                title, text, url
            });
        } else {
            alert(`当前浏览器版本不支持分享此功能`);
        }
    }


    show(className) {
        this.$(className).style.display = "block"
    }

    hidden(className) {
        this.$(className).style.display = "none"
    }


    setItem(key, value) {
        localStorage.setItem(key, JSON.stringify(value))
    }

    getItem(key) {
        let local = localStorage.getItem(key)
        return local ? JSON.parse(local) : []
    }
}

let u = new Utils
let util = u, 
{ 
    $, item, query, navShare, 
    getItem, setItem, onscroll
} 
= u

// let util = new Utils
// let $ = (new Utils).$

// util.$
// $
// footer