class Util {

    inject() {
        Element.prototype.remove = function (removeClassName) {
            this.classList.remove(removeClassName);
        }

        Element.prototype.add = function (addClassName) {
            this.classList.add(addClassName);
        }

        HTMLElement.prototype.text = function (text) {
            this.innerText = text;
        }

        HTMLElement.prototype.html = function (text) {
            this.innerHTML += text;
        }
    }

    //头部菜单
    header(title = "", icon) {
        $("body").html(`
            <div class="pub_header">
                <i class="iconfont icon-back1"></i>
                <div class="text">${title}</div>
                ${icon}
            </div>
        `)

        click($(".icon-back1"), function() {
            history.back()
        })
    }

     
    item(father, data) {
        data.forEach(v => {
            father.html(`
                <div class="item">
                    <a href="./info.html?id=${v.id}&total=${v.total || v.shuliang}">
                        <div class="item_top">
                            <img src="${v.img_src || v.preview}" alt="">
                            <span>${v.total || v.shuliang}</span>
                        </div>
                        <div class="item_text">
                            <div class="title ellipsis">${v.title}</div>
                            <div class="model ellipsis">模特：${v.user || v.renwulist[0].name}</div>
                            <div class="source ellipsis">机构：${v.source || v.jigoulist[0].name}</div>
                        </div>
                    </a>
                    <div class="item_tag">
                        ${(v.biaoqianlist || v.tags).map(j => {
                return `<div class="tage_item">${j.name || j.title}</div>`
            }).toString().replaceAll(",", "")
                }
                    </div>
                </div>
            `)
        })
    }

    //底部导航菜单
    footer() {
        var ul = `
        <ul class="footer">
           ${config.footerList.map((v, i) => {
            //用map进行循环 循环里面的首个子元素 
            return `<li class="${location.href.includes(v.url) ? 'active' : ''}"> 
                            <a href="${v.url}">
                                <i class="iconfont ${v.icon}"></i>
                                <p>${v.title}</p>
                            </a>
                        </li>`
                        // 用 location方法得到当前地址栏地址 判断是否包含includes当前的短地址 如果是添加active 否则就不添加 返回li标签
        }).toString().replaceAll(",", "") //要把map转换数组中的逗号去掉
            }
        </ul>
        `;

        $("body").html(ul)
        //向页面添加ul
    }

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

    /**
     * className 可能的类型：
     *   对象类型，本质上是 Element 类型
     *   数组类型，本质上是 NodeList 类型
     */
    click(className, callback) {
        // 不管是 Element 还是 NodeList 都统一转化为 Array类型
        // 但如果 className 是 Element 类型，那么转换后数组为空：[]
        //   如果 className 是 NodeList 类型，那么转换后数组不为空: [ Element, Element ]
        // 因为已经都是数组，所以无需：Array.isArray() 来判断是否是数组了
        // 只需要判断数值是否有数据即可
        var domArr = Array.from(className);
        if (domArr.length != 0) {
            className.forEach((v, i) => {
                v.onclick = function (e) {
                    v.index = i;
                    v.e = e;
                    callback.call(this)
                }
            })
        } else {
            className.onclick = function (e) {
                className.e = e;
                callback.call(this)
            }
        }
    }

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

    _(className) {
        return document.querySelectorAll(className)
    }
}

var { $, _, click, inject, query, footer, item,header } = new Util()

inject()