document.querySelector(".header_menu_left").style.width = defaultNavList.length * 80 + 'px'
function renderNavList() {
    defaultNavList.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(defaultNavList[index].type)
        };  
    })
}

renderNavList()

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) {
            // alert(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">
                    <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>
                </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">
                    <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}">
                </li>
            `
        }
        
    })
}

getData('top')

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