class Utils {

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

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


    footer() {
        var currentPath = location.href;
        var footerHtml = `
        <ul class="footer">
         ${config.footerArr.map((v, i) => {
            return `
                    <li class="${currentPath.includes(v.path) ? 'footer_active' : ''}">
                        <a href="${v.path}">
                            <i class="iconfont ${v.icon}"></i>
                            <span>${v.title}</span>
                        </a>
                    </li>
                `
        }).toString().replaceAll(",", "")
            }
         </ul>
        `;

        $("body").insertAdjacentHTML("beforeend", footerHtml)
    }

    item(arr, father) {
        var html = `
        <ul>
        ${arr.map((v, i) => {
            return `
              <li>
                    <div class="newest_img">
                        <a href="./info.html?id=${v.id}">
                            <img  src="${v.preview || v.img_src}"
                                alt="${v.title}">
                        </a>
                        <span>${v.total || v.shuliang}P</span>
                    </div>
                    <div class="newest_text">
                        <a href="./info.html?id=${v.id}">
                            <p class="t">${v.title}</p>
                            ${
                                v.hasOwnProperty("source")
                                ? `<p class="source">${v.source}</p>`
                                : ''
                            }
                        </a>
                            ${v.hasOwnProperty("tags")
                            ? `<div class="tags">
                            ${v.tags.map(item => {
                                return `
                                            <div class="tags_item">
                                        <a href="./tag_list.html?id=${item.id}&title=${item.title}">${item.title}</a>
                                        </div>
                                         `
                            }).toString().replaceAll(",", "")
                                }
                            </div>`
                            : ''
                            }
                    </div>
                </li>
              `;
        }).toString().replaceAll(",", "")
            }
        </ul>
        `;
        father.innerHTML += html;
    }

    mechanismList(arr, father){
        var html = `
        <ul class="mechanism_list">
        ${arr.map((v, i) => {
            return `
            <li>
            <a href="./mechanism_info.html?id=${v.id}&t=${v.title}">
                <p>${v.title}</p>
                <span>${v.quantity}</span>
            </a>
        </li>
              `;
        }).toString().replaceAll(",", "")
            }
        </ul>
        `;
        father.innerHTML += html;
    }


    // model(arr, father, test = "") {
    //     var html = `
    //     <div class="similar item_list padding_30">
    //     ${arr.map((v, i) => {
    //         return `
    //         <div class="title">${test}</div>
    //         <div class="item">
    //                 <div class="top">
    //                     <img src="${v.preview}" alt="${v.title}">
    //                     <span>${v.total}</span>
    //                 </div>
    //                 <p>${v.title}</p>
    //             </div>
    //     `;
    //       }).toString().replaceAll(",", "")
    //    }
    //    </div>
    //    `;
    //     father.innerHTML += html;
    // }

    header(title, icon = "") {
        var html = `
        <div class="header_theme1 theme_color">
            <div class="header_theme1_left">
                <i class="iconfont icon-back1"></i>
                <span>${title}</span>
            </div>
            <div class="header_theme1_right">
                ${icon}
            </div>
        </div>
        `;
        $("body").innerHTML = html + $("body").innerHTML;

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

    $_GET(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 pair[1]; }
        }
        return (false);
    }
}

// 解构赋值
var { $, footer, _, item, $_GET, header, mechanismList,model} = new Utils()