function renderNavList() {
    ChannelList.forEach(function(val,index){
        $(".header_menu_left").innerHTML+=`<li class="${index ==0?'active': ''}">${val.title}</li>`
    });

    BindClickLi()
}

function BindClickLi() {
    var li = document.querySelectorAll(".header_menu_left li");
    li.forEach((val,index)=> {
        val.onclick = function () {
            li.forEach(vas=>vas.className = "");
            val.className = "active";
            getData(ChannelList[index].type)
        };  
    })
}


function getData(type) {
    http({
        method: 'GET',
        url: 'http://127.0.0.1/mcf/news.php',
        data: {
            type: type
        },
        success: function(res) {
            RenderPage(res.result.data)

            console.log(res.result.data)
        },
        error: function(err) {
        }
    });
}

function RenderPage(data) {
    $(".list_item").innerHTML = ""
    data.forEach((val,index)=> {
        if (val.hasOwnProperty("thumbnail_pic_s03") || val.hasOwnProperty("thumbnail_pic_s02")){
            $(".list_item").innerHTML += `
                <li class="item three">
                    <a href="${val.url}">
                        <h2>${val.title}</h2>
                        <ul>
                            <li>
                                <img src="${val.thumbnail_pic_s}" alt="">
                            </li>
                            <li>
                                <img src="${val.thumbnail_pic_s02}" alt="">
                            </li>
                            <li>
                                <img src="${val.thumbnail_pic_s03 ? val.thumbnail_pic_s03 : ''}" alt="">
                            </li>
                        </ul>
                        <span>
                            ${val.author_name} ${val.category} ${val.date}
                        </span>
                    </a>
                </li>
            `
         } else if (Math.random() > 0.5){
                $(".list_item").innerHTML += `
                <li class="item one">
                    <a href="${val.url}">
                        <h2>${val.title}</h2>
                        <img src="${val.thumbnail_pic_s}" alt="${val.title}">
                        <div class="mes">
                            <span>${val.author_name}</span>
                            <span>${val.date}</span>
                            <span>${val.category}</span>
                        </div>
                    </a>
                </li>
            `
        } else {
            $(".list_item").innerHTML += `
            <li class="item two">
                <a href="${val.url}">
                    <div class="item_message">
                        <h2>${val.title}</h2>
                        <span>${val.author_name}</span>
                        <span>${val.date}</span>
                        <span>${val.category}</span>
                    </div>
                    <img src="${val.thumbnail_pic_s}" alt="${val.title}">
                </a>
            </li>
        `
         }
    })
}



getData('top')
renderNavList()
function $(className){
    return document.querySelector(className)
}