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, input = false) {
        $("body").html(`
            <div class="pub_header">
                <i class="iconfont icon-back1"></i>
                ${!input ? `<div class="text">${title}</div>` : `<input class="searchInput" />`}
                ${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 `<a class="tage_item" href="./tag.html?id=${v.id}">${j.name || j.title}</a>`
            }).toString().replaceAll(",", "")
                }
                    </div>
                </div>
            `)

        })
    }


    model(father, data) {

        data.forEach(v => {
            father.html(`
                <div class="model">
                    <a href="./modelinfo.html?id=${v.id}&title=${v.title}">
                        <div class="model_top">
                            <img src="${v.img}" alt="">
                            <span>63套</span>
                        </div>
                        <div class="model_bottom">${v.title}</div>
                    </a>
                </div>
            `)
        })
    }

    modelList(father, data) {
        //最外层数组，是个对象
        father.html(`
             <img src="${data.model_info.portrait}" alt="">
             <div class="name">
                 <p>${data.model_info.name}</p>
                 <p>${data.model_info.explain} </p>
             </div>
         
         `)

    }

    testModelList(father, data) {
        //第二层，才是数组，只有数组才能循环
        data.forEach((value, index) => {
            father.html(`
           <img src="${value.img_src}" alt="">
            
            `)

        })

    }



    footer() {
        var ul = `
        <ul class="footer">
           ${config.footerList.map((v, i) => {
            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>`
        }).toString().replaceAll(",", "")
            }
        </ul>
        `;

        $("body").html(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, model, modelList, testModelList } = new Util()

inject()