class Utils {

    footer() {
        var html = `
        <ul class="footer top">
           ${config.footerArr.forH(v => {
                return `<li>
                            <a href="${v.href}" class="${location.href.includes(v.href) ? 'active' : ''}">
                                <i class="iconfont ${v.icon}"></i>
                                <p>${v.title}</p>
                            </a>
                        </li>`
            })}
            
        </ul>
        `

        $("body").insertAdjacentHTML("beforeend", html);
    }

    item (father, data) {
        father.innerHTML = ""
        data.forEach(v => {
            father.innerHTML+=`
            <div class="item">
                <div class="img">
                   <a href="./info.html?id=${v.id}&quantity=${v.total || v.shuliang}&title=${encodeURIComponent(v.title)}">
                    <img src="${v.preview || v.img_src}" alt="">
                    <span>${v.total || v.shuliang}P</span>
                   </a>
                </div>
                <div class="text">
                   <a href="./info.html?id=${v.id}&quantity=${v.total || v.shuliang}&title=${encodeURIComponent(v.title)}">
                    <div class="title ellipsis">${v.title}</div>
                    <div class="model ellipsis">${v.user || `模特: ${v.renwulist[0].name}`}</div>
                    <div class="mechanism ellipsis">${v.source || `机构: ${v.jigoulist[0].name}`}</div>
                   </a>
                </div>
                ${(v.tags || v.biaoqianlist) == undefined
                  ? ''
                  : `<div class="tags">
                        ${
                            (v.tags || v.biaoqianlist).forH(val => {
                                return `
                                    <a href="./../page/tags.html?id=${val.id}&name=${val.title || val.name}">${val.title || val.name}</a>
                                `
                            })
                        }
                    </div>`
                }
                
            </div>
            `
        })
    }

    title(text = "", rightIcon = "") {
        var html = `
            <div class="pub_title">
                <i class="iconfont icon-back1"></i>
                <span class="ellipsis">${text}</span>
                ${rightIcon}
            </div>
        `

        $("body").insertAdjacentHTML("beforeend", html);

        click(".icon-back1", () => {
            history.back()
        })
    }

    click(className, callback) {
        _(className).forEach((v,i) => v.onclick = () => callback(v,i))
    }

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



    cover() {
        // 对map进行重写

        // map的实现原理
        // function a(callback) {
        //     return callback(v).toString()
        // }
        // var c = a( function (v) {
        //     return "v"
        // } )

        Array.prototype.forH = function (callback) {
            var res = []
            for (var index = 0; index < this.length; index++) {
                res.push(callback(this[index]))
            }
            return res.toString().replaceAll(",", "")
        }
        // 其他很多重写
    }

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

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

}


var { 
    footer, $, _, query,
    cover, click, item,
    title
} = new Utils();

cover()