const member_list = document.querySelector('.member-list');
// console.log(member_list);
const Page = document.querySelector('.pagination span');
let currentPage = Page.textContent.slice(1,2);
// let currentPage = 2;
const totalPages = Page.textContent.slice(5,6);
const PageSize = 4;
     const up_btn =  document.querySelector('#prev-page');
     const next_btn =  document.querySelector('#next-page');
const  user_img = "images/用户头像.jpg";
const member_content = [
    // 第一页
    {
        name:"张三",
        edu:"学历/职位：本科大三 / 前端组组长",
        major:"专业：计算机科学与技术",
        project:"项目经历：坤班活动管理系统前端开发",
    },

    {
        name:"李四",
        edu:"学历/职位：硕士二年级 / 后端组负责人",
        major:"专业：软件工程",
        project:"项目经历：AI工具快速开发平台后端架构",
    },

    {
        name:"王五",
        edu:"学历/职位：本科大四 / UI设计组组长",
        major:"专业：数字媒体技术",
        project:"项目经历：坤班官网视觉设计、硬件设备界面设计",
    },

    {
        name:"赵六",
        edu:"学历/职位：本科大三 / AI组核心成员",
        major:"专业：人工智能",
        project:"项目经历：AI影视人才匹配平台算法开发",        
    },

// 第二页
    {
        name:"张三1",
        edu:"学历/职位：本科大三 / 前端组组长",
        major:"专业：计算机科学与技术",
        project:"项目经历：坤班活动管理系统前端开发",
    },

    {
        name:"李四2",
        edu:"学历/职位：硕士二年级 / 后端组负责人",
        major:"专业：软件工程",
        project:"项目经历：AI工具快速开发平台后端架构",
    },

    {
        name:"王五3",
        edu:"学历/职位：本科大四 / UI设计组组长",
        major:"专业：数字媒体技术",
        project:"项目经历：坤班官网视觉设计、硬件设备界面设计",
    },

    {
        name:"赵六4",
        edu:"学历/职位：本科大三 / AI组核心成员",
        major:"专业：人工智能",
        project:"项目经历：AI影视人才匹配平台算法开发",        
    }

];
updatePagecontent(currentPage);
// 0  1  2  3  1
// 4  5  6  7  2
    // currentPage = 2;
    function updatePagecontent(currentPage){
        member_list.innerHTML = '';
    let start_index = (currentPage-1)*PageSize;
    let end_index = (currentPage*PageSize)-1;
    // const card =  document.querySelector('.member-card');
    // const card = document.createElement('div');
    // card.className = 'member-card';
    const user = member_content.slice(start_index,end_index+1);
     
     user.forEach(member=>{
            // console.log();
    const card = document.createElement('div');
    card.className = 'member-card';
        card.innerHTML = 
    `
                <div class="member-avatar">
                    <img src="${user_img}" alt="成员1">
                </div>
                <div class="member-info">
                    <h3>${member.name}</h3>
                    <p>${member.edu}</p>
                    <p>${member.major}</p>
                    <p>${member.project}</p>
                </div>
                <div class="member-more"><a href="core_member_detail.html">了解更多</a></div>
    `;
            member_list.appendChild(card);
     });
         next_btn.addEventListener('click',function(){
        if(currentPage != totalPages){
            currentPage++;
               Page.textContent = `第${currentPage}页/共${totalPages}页`;
               up_btn.removeAttribute('disabled');
                console.log(currentPage);
        }
    });
}
//上一页
    up_btn.addEventListener('click',function(){
        if(currentPage > 1){
            currentPage--;
               Page.textContent = `第${currentPage}页/共${totalPages}页`;
               next_btn.removeAttribute('disabled');
               updatePagecontent(currentPage);
                console.log(currentPage);
        }else if(currentPage == 1){
            alert("已到达最小页");
            up_btn.setAttribute('disabled','disabled');
        }
    });

// 下一页
    next_btn.addEventListener('click',function(){
        if(currentPage != totalPages){
            currentPage++;
               Page.textContent = `第${currentPage}页/共${totalPages}页`;
               up_btn.removeAttribute('disabled');
               updatePagecontent(currentPage);
                console.log(currentPage);
        }else if(currentPage == totalPages){
            alert("已到达最大页");
            next_btn.setAttribute('disabled','disabled');
        }
    });


        // <div class="pagination">
        //     <!-- <a href="#" class="disabled">上一页</a> -->
        //     <button id="prev-page" disabled>上一页</button>
        //             <span id="page-info">第1页/共2页</span>
        //     <button id="next-page">下一页</button>
        // </div>