class Utils {
    $(className) {
        return document.querySelector(className);
    }

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

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


   footer () {
        var arr = [
            { text: '首页', icon: 'icon-home', href: 'index.html' },
            { text: '机构', icon: 'icon-jigou', href: 'mechanism.html' },
            { text: '模特', icon: 'icon-me', href: 'model.html' },
            { text: '我的', icon: 'icon-wo', href: 'my.html' },
        ];

        var liArr = `
          <ul class="footer">
            ${
               arr.map((v,i) => {
                   return `
                     <li class="${ location.pathname.includes(v.href) ? 'active' : '' }">
                        <a href="${v.href}">
                            <i class="iconfont ${v.icon}"></i>
                            <p>${v.text}</p>
                        </a>
                    </li>
                    `
               }).toString().replaceAll(",","")
             }
          </ul>
        `

        $("body").innerHTML += liArr
    }

    item(father, arr) {
        arr.forEach(v => {
            father.innerHTML += `
              <div class="list_item">
                <a href="./info.html?id=${v.id}&quantity=${v.shuliang || v.total}&title=${v.title}">
                    <div class="list_img">
                        <img src="${v.preview || v.img_src}" alt="">
                        <span>${v.shuliang || v.total}</span>
                    </div>
                    <div class="list_title ellipsis">${v.title}</div>
                    <div class="list_model ellipsis">模特: ${v.user || v.renwulist[0].name}</div>
                    <div class="list_source ellipsis">${v.source || '来源机构：'+v.jigoulist[0].name}</div>
                </a>
                <div class="list_tags">
                   ${
                     (v.tags || v.biaoqianlist).map(item=>{
                          return `<a href="./tagList.html?id=${item.id}&title=${item.title}" class="list_tags_item">${item.title || item.name}</a>`
                      }).toString().replaceAll(",", "")
                    }
                </div>
             </div>
            `
        })
    }

    header(title = "",rightHtml = "") {
        $("body").innerHTML += `
            <div class="pub_header">
                <div class="left">
                    <i class="iconfont icon-back1"></i>
                    <span class="ellipsis">${title}</span>
                </div>
                ${rightHtml}
            </div>
        `

        $(".icon-back1").onclick = () => {
            history.back();
        }
    }

    search () {
        $('body') .innerHTML +=` <div class="search">
        <i class="iconfont icon-back1"></i>
        <input type="text">
        <i class="iconfont icon-search"></i>
     </div>`
        
    }
}

var { $, _, footer, item, header, query,search } = new Utils();