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>
                            <p>${v.title}</p>
                        </a>
                    </li>
                `
        }).toString().replaceAll(",", "")
            }
         </ul>
        `;

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

    /**
     * 公共的头部
     * @param {*} title 头部的中文标题 
     * @param {*} icon  左边的图标 传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()
    }

    /**
  * 搜索
  * @param {*} title 中文内容
  */
    screahtop(title) {
        var html = `
        <div class="header_screah">
            <div class="header_screahtop">
                <a class="header_screahcon">
                    <span class="iconfont icon-search"></span>
                    ${title}
                </a>
            </div>
        </div>
        `;
        $("body").append(html);
    }
    /**
     *   
     *  /**
     * 详情搜索
     * @param {*} title 中文内容
     */
    screahinfo() {
        var html = `
        <div class="header_screah">
            <div class="header_screahtop">
                <span class="iconfont icon-search"></span>
                <input type="text" placeholder="搜索百万免费菜谱">
            </div>
        </div>
        `;
        $("body").append(html);
    }
    /**
     * 
     * @param {*} res ajax请求的返回值
     * @param {*} father 父容器
     * 
     * 例 ：
     * async do(){
     *     var res = await indexServe.videoList();
     *     FoodList(res,$('.had'))  
     * }
     *
     */
    FoodList(res, father) {
        var html = `
        ${(Array.isArray(res)) ?
                res.map((vv) => {
                    return `
                <div class="wf-father swiper-slide">
                ${vv.content.map((vvv) => {
                        return `
                        <div class="wf-item">
                        <a class="wf-itemw" href="${vvv.url}">
                            <div class="wf-item-top">
                                <img class="img-one" src="${vvv.img}" alt="">
                            </div>
                            <div class="wf-item-content">
                                <div class="wf-title">${vvv.title}</div>
                                    <div class="wf-des">
                                        <div class="t">养</div>
                                        <div class="wf-des-rel">${vvv.des}</div>
                                    </div>
                            </div>
                        </a>
                    </div>
                        `;
                    }).toString().replaceAll(",", "")
                        }
                </div>
                `;
                }).toString().replaceAll(",", "")
                : `
            <div class="wf-father">
            ${res.items.map((v) => {
                    return `
                    <div class="wf-item">
                        <a class="wf-itemw" href="${v.path || v.href}">
                            <div class="wf-item-top">
                                ${v.type == 5 ?
                            `<div class="img-four">
                                    ${v.img.map(item => {
                                return `<img src="${item}" alt="">`
                            }).toString().replaceAll(",", "")}
                                    </div>
                                    <div class="mount">${v.total_amount}菜</div>
                                    `
                            : `<img class="img-one" src="${v.img || v.bd_photo}" alt="">`}
                                ${v.type == 7 || v.hasOwnProperty("intro") ?
                            `<div class="vicon"></div>`
                            : ``
                        }
                            </div>
                            <div class="wf-item-content">
                                <div class="wf-title">${v.title}</div>
                                ${v.type == 5 ? ``
                            :
                            ` 
                                    ${('label' in v && v.label != null) ?
                                `<div class="wf-des">
                                            <div class="t">养</div>
                                            <div class="wf-des-rel">${v.label.desc}</div>
                                        </div>`
                                : ``
                            }
                                    <div class="wf-item-content-bottom">
                                        <div class="wf-item-bottom-left">
                                            <img src="${('intro' in v) ? `https://st-cn.meishij.net/user/162/221/ns117912_142372157780527.jpg` : v.author.avatar_url}" alt="">
                                            <span>${('intro' in v) ? `美食杰` : v.author.nickname}</span>
                                        </div>
                                        <div class="wf-item-bottom-right">
                                            <div class="wf-item-bottom-right-i"></div>
                                            <span>${v.click_num || v.viewed_amount}</span>
                                        </div>
                                    </div>
                                    `
                        }
                            </div>
                        </a>
                    </div>`;
                }).toString().replaceAll(",", "")
                }`

            }
        `;
        father.append(html);
        // $('.wf-father').masonry({
        //     // options
        //     itemSelector: '.wf-item',
        //     columnWidth: 200
        //   });
    }

    $_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, $_GET, header, FoodList, screahtop, screahinfo } = new Utils()