// 分页
const prevBtn = document.getElementById('prev-page');
const nextBtn = document.getElementById('next-page');
const pageInfo = document.getElementById('page-info');
const resourceList = document.getElementById('resource-list');
const Page = document.getElementById('page-info');

const totalPages = parseInt(Page.textContent.slice(5,6));
const pageSize = 3; // 每页显示3个资源
let currentPage = 1; // 起始页

const content = [
    // 第一页内容
    {
        img: "images/内蒙古工业大学夜晚.jpg",
        alt: "开源项目模板1",
        name: "SpringBoot+Vue3开源项目模板",
        desc: "集成权限管理、日志记录、接口文档等基础功能的全栈项目模板，可直接用于快速搭建企业级应用，已开源至Gitee。",
        leader: "张三（后端组负责人）"
    },

    {
        img: "images/内蒙古工业大学白天.jpg",
        alt: "开源项目模板2",
        name: "SpringBoot+Vue3开源项目模板",
        desc: "集成权限管理、日志记录、接口文档等基础功能的全栈项目模板，可直接用于快速搭建企业级应用，已开源至Gitee。",
        leader: "李四（后端组负责人）"
    },

    {
        img: "images/内蒙古工业大学夜晚.jpg",
        alt: "开源项目模板3",
        name: "SpringBoot+Vue3开源项目模板",
        desc: "集成权限管理、日志记录、接口文档等基础功能的全栈项目模板，可直接用于快速搭建企业级应用，已开源至Gitee。",
        leader: "王五（后端组负责人）"
    },

    // 第二页
    {
        img: "images/内蒙古工业大学夜晚.jpg",
        alt: "JavaWeb1",
        name: "JavaWeb1",
        desc: "集成权限管理、日志记录、接口文档等基础功能的全栈项目模板，可直接用于快速搭建企业级应用，已开源至Gitee。",
        leader: "张三（后端组负责人）"
    },

    {
        img: "images/内蒙古工业大学白天.jpg",
        alt: "JavaWeb2",
        name: "JavaWeb2",
        desc: "集成权限管理、日志记录、接口文档等基础功能的全栈项目模板，可直接用于快速搭建企业级应用，已开源至Gitee。",
        leader: "李四（后端组负责人）"
    },

    {
        img: "images/内蒙古工业大学夜晚.jpg",
        alt: "JavaWeb3",
        name: "JavaWeb3",
        desc: "集成权限管理、日志记录、接口文档等基础功能的全栈项目模板，可直接用于快速搭建企业级应用，已开源至Gitee。",
        leader: "王五（后端组负责人）"
    }
];

changeContent(currentPage);

function changeContent(currentPage){
    // 1.去除资源列表的所有内容
        resourceList.innerHTML = '';
    console.log(currentPage);
    
    // 2.获取资源的索引 
    // 0 1 2  1
    // 3 4 5  2
    // 6 7 8  3
    let start_index = (currentPage-1) * pageSize;
    let end_index = (pageSize*currentPage)-1;
    let pageContent = content.slice(start_index,end_index+1);
    console.log(pageContent);
    // console.log(pageContent[0].name);
    
    // 3. 保证每一页只保留三个资源内容
    pageContent.forEach(items=>{
    // console.log(items.name);   
        const resouse_content =  document.createElement('div');
        resouse_content.className = 'resource-card';
        resouse_content.innerHTML = 
        `
        <div class="resource-img">
            <img src="${items.img}" alt="全栈开发教程文档">
        </div>
        <div class="resource-info">
            <p class='name'>名称：${items.name}</p>
            <p>摘要：${items.desc}</p>
            <p>负责人：${items.leader}</p>
        </div>`
        // 4.生成一个添加一个
        resourceList.appendChild(resouse_content);
    });
    
}
changeContent(currentPage);
// console.log(content.slice(0,content.length));

//下一页
nextBtn.addEventListener('click',function(){
    if(currentPage < totalPages){
        currentPage++;
        prevBtn.removeAttribute('disabled');
        pageInfo.textContent = `第${currentPage}页/共${totalPages}页`;
        changeContent(currentPage);
    }else{
        alert("已达到最大页码");
        nextBtn.setAttribute('disabled','disabled');
    }
});

//上一页
prevBtn.addEventListener('click',function(){
    if(currentPage > 1){
        currentPage--;
        nextBtn.removeAttribute('disabled');
        pageInfo.textContent = `第${currentPage}页/共${totalPages}页`;
        changeContent(currentPage);
    }else{
        alert("已达到最小页码");
        prevBtn.setAttribute('disabled','disabled');
    }
});