const content = [
    // <div class="product-card" data-page="1">
    //   <div class="product-card-img">
    //     <img src="images/内蒙古工业大学白天.jpg" alt="JavaWeb产品">
    //   </div>
    //   <div class="product-card-info">
    //     <h3>JavaWeb</h3>
    //     <p>轻量级企业级Web应用开发框架</p>
    //     <a href="product_detail.html?type=JavaWeb" class="product-card-btn">查看详情</a>
    //   </div>
    // </div>
    // 第一页
{
    img:"images/内蒙古工业大学白天.jpg",
    product_name:"JavaWeb",
    desc:"轻量级企业级Web应用开发框架",
},

{
    img:"images/内蒙古工业大学白天.jpg",
    product_name:"实验室SaS",
    desc:"云原生实验室全流程数字化管理",
},

{
    img:"images/内蒙古工业大学白天.jpg",
    product_name:"坤班官网",
    desc:"响应式企业官网定制开发",
},

{
    img:"images/内蒙古工业大学白天.jpg",
    product_name:"UE5",
    desc:"虚幻引擎5 3D场景定制开发",
},
// 第二页
{
    img:"images/内蒙古工业大学白天.jpg",
    product_name:"其他",
    desc:"产品描述1",
},

{
    img:"images/内蒙古工业大学白天.jpg",
    product_name:"其他",
    desc:"产品描述2",
},

{
    img:"images/内蒙古工业大学白天.jpg",
    product_name:"其他",
    desc:"产品描述3",
},

{
    img:"images/内蒙古工业大学白天.jpg",
    product_name:"其他",
    desc:"产品描述4",
},
];

 const up_btn = document.querySelector('#prevPage');
 const next_btn = document.querySelector('#nextPage');
 const Page = document.querySelector('.product-pagination #pageInfo');
  let currentPage = Page.textContent.slice(1,2);
  let totalPage = Page.textContent.slice(5,6);
  const PageSize = 4;

  // <div class="product-card-list" id="productCardList"></div>
  const ProductList = document.querySelector('.product-card-list');
  // console.log(ProductList);
  
  // console.log(totalPage);
  // console.log(currentPage);
  // 0 1 2 3 1
  // 4 5 6 7 2
  // 8 9 10 11
  changePage(currentPage);
  function changePage(currentPage){
      ProductList.innerHTML = '';
      let start_index = (currentPage-1)*PageSize;
      let end_index = (currentPage*PageSize)-1;
      const pageContent = content.slice(start_index,end_index+1);
      pageContent.forEach((item, index)=>{
        const product_card = document.createElement('div');
        product_card.classList = 'product-card';
        if(item.product_name=='其他'){
          product_card.innerHTML = 
        `
          <div class="product-card-img">
            <img src="${item.img}" alt="${item.product_name}产品">
          </div>
          <div class="product-card-info">
            <h3>${item.product_name}${index+1}</h3>
            <p>${item.desc}</p>
            <a href="product_detail.html?type=${item.product_name}${index+1}" class="product-card-btn">查看详情</a>
          </div>
        `;
        ProductList.appendChild(product_card);
        }else{
        product_card.innerHTML = 
        `
          <div class="product-card-img">
            <img src="${item.img}" alt="${item.product_name}产品">
          </div>
          <div class="product-card-info">
            <h3>${item.product_name}</h3>
            <p>${item.desc}</p>
            <a href="product_detail.html?type=${item.product_name}" class="product-card-btn">查看详情</a>
          </div>
        `;
        ProductList.appendChild(product_card);
        }
        
      });

      // 上一页
      up_btn.addEventListener('click',function(){
            if(currentPage>1){
              currentPage--;
              Page.textContent = `第${currentPage}页/共${totalPage}页`;
              next_btn.removeAttribute('disabled');
              changePage(currentPage);
            }else{
              alert("已经达到最小页");
              up_btn.setAttribute('disabled','disabled');
            }

      });

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

      });
  };