class Utils {


    footer() {
        var footerArr = [
            { title: '首页', icon: 'icon-home', href: 'index.html' },
            { title: '机构', icon: 'icon-jigou', href: 'mechanism.html' },
            { title: '模特', icon: 'icon-me', href: 'model.html' },
            { title: '我的', icon: 'icon-wo', href: 'my.html' },
        ];
        // 用户当前正在访问的页面地址
        // http://localhost:63342/page/mechanism.html
        var currentPath = location.href;
        $("body").innerHTML += `
            <ul class="footer">
            ${ 
              footerArr.map((v,index) => {
                  return `
                      <li class="${currentPath.includes(v.href) ? 'footer_active' : ''}">
                        <a href="./${v.href}">
                          <i class="iconfont ${v.icon}"></i>
                          <p>${v.title}</p>
                        </a>
                      </li>
                  `
              }) .toString().replaceAll(",", "")
            }
            </ul>
        `
    }

    header(title, action = "") {
        $("body").innerHTML = `
         <div class="pub_header">
            <div class="pub_header_left">
              <i class="iconfont icon-back1"></i>
              <span>${title}</span>
            </div>
            <div class="pub_header_action">
              ${action}
            </div>
          </div>
        ` + $("body").innerHTML;

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

    item(el, data) {
        data.forEach((v,i) => {
            el.innerHTML += `
                <li>
                  <a href="./info.html?id=${v.id}">
                    <div class="pic_item_top">
                      <img src="${v.preview}" alt="">
                      <span>${v.total}套</span>
                    </div>
                    <div class="pic_item_title ellipsis">${v.title}</div>
                    <div class="pic_item_source">${v.user}</div>
                    ${
                        v.source.length != 0
                        ? `<div class="pic_item_source">${v.source}</div>`
                        : ''
                     }
                  </a>
                  <div class="pic_item_tags">
                    ${
                        v.tags.map((item,index) => {
                            return `
                             <a href="./list.html?id=${item.id}&t=${item.title || item.name}&type=tag" class="pic_item_tags_item">${item.title || item.name}</a>
                            `
                        }).toString().replaceAll(",", '')
                     }
                  </div>
                </li>
            `
        })

    }

    model(el, data) {
        data.forEach((v,i) => {
            $(el).innerHTML += `
            <li>
              <a href="./modelInfo.html?id=${v.id}&t=${v.title}">
                  <div class="top">
                      <img src="${v.preview}" alt="">
                      <span class="nums">${v.total}</span>
                  </div>
                  <span class="title ellipsis">${v.title}</span>
              </a>
            </li>
            `
        });
    }

    query(variable) {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i=0;i<vars.length;i++) {
            var pair = vars[i].split("=");
            if(pair[0] == variable){
                return decodeURI(pair[1]);
            }
        }
        return(false);
    }

    loadMore(el, callback) {
        el.addEventListener('scroll', function () {
            console.log("111")
            if (Math.ceil(el.scrollHeight - el.scrollTop) == el.clientHeight) {
                callback()
            }
        })
    }

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

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

// 对象的解构赋值
var {
    footer, $, _,
    item, model,
    query, header,
    loadMore
} = new Utils()
// var utils = new Utils()