inquiryMachine-booklist-1080/js/index2.js

let sBoxID = ''
let sSortmark = ''
let page = 0
let pageSize = 36
let hasNextPage = true
let searchKeyWord = ''  // 搜索keyword
let isSearch = false

// 默认初始化会有限制选择图书借阅的数量的值
// public string getReader()
// 读者信息 {"Barcode":"700008","Name":"测试卡","nMaxNum":2}
let lendNum = 0

setInterval(function() {
  $('.lending-btn img').css('animation-duration', '1s').addClass('animate__animated animate__tada');
  setTimeout(function() {
    $('.lending-btn img').removeClass('animate__animated animate__tada');
  }, 1000);
}, 5000);

getBaseInfoReader()
function getBaseInfoReader(){
  let readerJson = JSON.parse(boundObject.getReader())
  console.log('readerJson',readerJson)
  console.log('readerJson-Barcode',readerJson.Barcode)
  console.log('readerJson-Name',readerJson.Name)
  console.log('readerJson-nMaxNum',readerJson.nMaxNum)
  lendNum = readerJson.nMaxNum
}

// 假设书籍数据
let books = [];

// 动态生成左侧分类的项
createHtmlLeftNav();
function createHtmlLeftNav() {
  let LeftLocaltionJSON = boundObject.getBoxs('1')
  let locations  = JSON.parse(LeftLocaltionJSON)
  console.log('LeftLocaltionJSON',LeftLocaltionJSON)

  let LeftCategoriesJSON = boundObject.getSortmarks('2')
  let categories  = JSON.parse(LeftCategoriesJSON)
  console.log('LeftCategoriesJSON',LeftCategoriesJSON)

  // 图书位置
  let locationsHtml = '<div class="left-item"><h4>图书位置</h4><ul class="left-filter filter-location">';
  locations.forEach((location, index) => {
      let activeClass = index === 0 ? 'class="active"' : '';
      locationsHtml += `<li ${activeClass} data-id=${location.BoxID}>${location.BoxName}</li>`;
  });
  locationsHtml += '</ul></div>';
  
  // 图书分类
  let categoriesHtml = '<div class="left-item"><h4>图书分类</h4><ul class="left-filter filter-sort">';
  categories.forEach(category => {
      categoriesHtml += `<li data-id=${category.SortIndex}>${category.SortName}</li>`;
  });
  categoriesHtml += '</ul></div>';

  document.getElementById('lib-book-left').innerHTML = `${locationsHtml}${categoriesHtml}`
}

// 为图书位置和分类的每个li元素添加点击事件
document.querySelectorAll('.left-filter li').forEach(item => {
  item.addEventListener('click', function(event) {
    document.querySelectorAll('.left-filter li').forEach(li => {
        li.classList.remove('active');
    });
    const clickedLi = event.target;
    const dataId = clickedLi.getAttribute('data-id');
    
    // 判断点击的是图书位置还是分类，并分别处理
    if (clickedLi.closest('.filter-location')) {
      if(dataId === '*'){
        sBoxID = '';
      }else{
        sBoxID = dataId;
      }
      sSortmark = ''
    } else if (clickedLi.closest('.filter-sort')) {
      sSortmark = dataId;
      sBoxID = ''
    }
    this.classList.add('active');

    page = 0
    hasNextPage = true
    document.querySelector('input[name="keyword"]').value = ''
    searchKeyWord = ''
    isSearch = false

    document.querySelector('.rack-content').scrollTop = 0
    document.querySelector('.rack-content').innerHTML = ''
    createInitRackBooklist();
  });
});

let scrollTimeout = null;

function debouncedOnScroll() {
  if (scrollTimeout !== null) {
    clearTimeout(scrollTimeout);
  }
  scrollTimeout = setTimeout(onScroll, 200); // 延迟1秒执行onScroll
}

// 滚动事件处理函数
function onScroll() {
  const element = document.querySelector('.rack-content')
  if (element.scrollTop  + element.offsetHeight > element.scrollHeight - 100) {
    FetchRightBookList();
  }
}
document.querySelector('.rack-content').addEventListener('scroll', debouncedOnScroll);

// 使用事件委托为所有list-item图书添加点击事件
function addClickEventToItems() {
  const rackContent = document.querySelector('.rack-content');
  rackContent.addEventListener('click', function(event) {
    const listItem = event.target.closest('.list-item');
    if (listItem) {
      listItem.classList.toggle('active');
    }
  });
}
window.addEventListener('DOMContentLoaded', () => {
  addClickEventToItems();
});

function FetchRightBookList(){
    if (!hasNextPage) return; // 如果没有下一页，停止加载
    if (isSearch) {
      page = 0
      sBoxID = ''
      sSortmark = ''
      document.querySelector('.rack-content').innerHTML = ''
    }
    page += 1;
    const params = {
      'sName': searchKeyWord,
      'sBoxID': sBoxID,
      'sSortmark': sSortmark,
      'nPageIndex': page,
      'nPageMaxNum': pageSize
    }
    // js传参给 c#端
    console.log('params',params)
    console.log('sName',searchKeyWord)
    console.log('sBoxID',sBoxID)
    console.log('sSortmark',sSortmark)
    console.log('nPageIndex',page)
    console.log('nPageMaxNum',pageSize)

    // ----- ----- ----- js调用c#的函数
    let booksRightJson = boundObject.getBooks(searchKeyWord,sBoxID,sSortmark,page,pageSize)
    var correctedJsonStr = booksRightJson.replace(/"status":\s*"0",\s*/, '');
    // 去除字符串的头尾空白
    correctedJsonStr = correctedJsonStr.trim();
    // 去掉字符串的头花括号
    correctedJsonStr = correctedJsonStr.substring(1);
    books = JSON.parse(correctedJsonStr).data

    const totalPages = JSON.parse(correctedJsonStr).totalPages
    console.log('totalPages',totalPages)
    if (books.length > 0) {
      // books = books.concat(books);
      appendBooksToRackContent(books);
    } else {
      hasNextPage = false; // 更新是否有下一页
    }
    if(page > totalPages){
      hasNextPage = false
    }
}

function appendBooksToRackContent(books) {
  console.log('appendBooks',books.length)
  const groupSize = 12;
  const rackContent = document.querySelector('.rack-content');
  let lastRackBoxList = rackContent.querySelector('.rack-box-list:last-child');
  let lastGroupBooksCount = lastRackBoxList ? lastRackBoxList.querySelectorAll('.list-item').length : 0;

  let currentBooksCount = 0; // 当前正在处理的书籍数量

  // 循环遍历所有书籍，将它们添加到正确的容器中
  books.forEach((book) => {
    // 如果最后一个容器不存在或者书籍数量已经达到groupSize，创建一个新的rack-box-list
    if (!lastRackBoxList || lastGroupBooksCount >= groupSize) {
      lastRackBoxList = document.createElement('div');
      lastRackBoxList.className = 'rack-box-list';
      rackContent.appendChild(lastRackBoxList);
      lastGroupBooksCount = 0; // 重置计数器
    }

    // 追加书籍到这个rack-box-list中
    const authorSpan = (book.Author !== '' && book.Author !== 'NULL') ? `<span class="book-writer">作者：${book.Author}</span>` : '' ;
    const bookElement = `
      <div class="list-item"  data-id="${book.Barcode}">
        <div class="box-txt">
          <span class="book-name">${book.Name}</span>
          ${authorSpan}
        </div>
      </div>
    `;
    lastRackBoxList.innerHTML += bookElement;
    lastGroupBooksCount++;
    currentBooksCount++;

    if (currentBooksCount >= groupSize) {
      return;
    }
  });
}

// 初始化无图书封面的图书列表
createInitRackBooklist();
function createInitRackBooklist() {
  if (isSearch) {
    page = 0
    sBoxID = ''
    sSortmark = ''
    document.querySelector('.rack-content').innerHTML = ''
  }
  const params = {
    'sName': searchKeyWord,
    'sBoxID': sBoxID,
    'sSortmark': sSortmark,
    'nPageIndex': page,
    'nPageMaxNum': pageSize
  }
  // js传参给 c#端
  console.log('初始化params',params)
  console.log('初始化sName',searchKeyWord)
  console.log('初始化sBoxID',sBoxID)
  console.log('初始化sSortmark',sSortmark)
  console.log('初始化nPageIndex',page)
  console.log('初始化nPageMaxNum',pageSize)

  // ----- ----- ----- js调用c#的函数
  let booksRightJson = boundObject.getBooks(searchKeyWord,sBoxID,sSortmark,page,pageSize)
  var correctedJsonStr = booksRightJson.replace(/"status":\s*"0",\s*/, '');
  // 去除字符串的头尾空白
  correctedJsonStr = correctedJsonStr.trim();
  // 去掉字符串的头花括号
  correctedJsonStr = correctedJsonStr.substring(1);
  books = JSON.parse(correctedJsonStr).data
  console.log('初始化Books',books.length)

  if(books.length === 0){
    document.querySelector(".lib-search-result span").innerHTML = 0
    bookListHtml = `
      <div class="empty-book-list">
        <img src="images/empty.png" alt="" />
        <span>暂无相关数据</span>
      </div>
    `;
    document.querySelector('.rack-content').innerHTML = bookListHtml;
    if (bookList) {
      bookList.remove()
    }
  }else{
    const groupSize = 12;
    let html = '';
    for (let i = 0; i < books.length; i += groupSize) {
      html += '<div class="rack-box-list">';
      for (let j = i; j < i + groupSize && j < books.length; j++) {
        const authorSpan = (books[j].Author !== '' && books[j].Author !== 'NULL') ? `<span class="book-writer">作者：${books[j].Author}</span>` : '';
        html += `
          <div class="list-item" data-id="${books[j].Barcode}">
            <div class="box-txt">
              <span class="book-name">${books[j].Name}</span>
              ${authorSpan}
            </div>
          </div>
        `;
      }
      html += '</div>';
    }
    document.querySelector('.rack-content').innerHTML += html
  }

  if(isSearch){
    document.querySelector(".lib-search-result").style.display = 'block'
    document.querySelector(".lib-search-result span").innerHTML = books.length
  }else{
    document.querySelector(".lib-search-result").style.display = 'none'
    document.querySelector(".lib-search-result span").innerHTML = 0
  }
}

// 创建借阅书籍弹框
function createlendDialog(books) {
  // 借阅书籍列表
  const listItems = books.map(function(book,index) {
    return `
      <li class="lib-lending-item">
        <span class="lending-num">${index+1}</span>
        <span class="lending-author">${book.barcode}</span>
        <h4>${book.title}</h4>
      </li>
    `;
  }).join('');

  // 弹框的HTML字符串
  const dialogHTML = `
    <div class="lib-dialog" id="lib-dialog">
      <div class="lib-dialog-mask"></div>
      <div class="lib-dialog-main">
        <div class="lib-dialog-header">
          <div class="lib-dialog-title">图书借阅</div>
        </div>
        <ul class="lib-lending-list">
          ${listItems}
        </ul>
        <div class="lib-dialog-bottom">
          <span class="cancel-btn">取消</span>
          <span class="confirm-btn">确定</span>
        </div>
      </div>
    </div>
  `;

  // 将弹框添加到body
  document.body.insertAdjacentHTML('beforeend', dialogHTML);

  // 获取弹框元素
  const dialog = document.getElementById('lib-dialog');
  const cancelButton = dialog.querySelector('.cancel-btn');
  const confirmButton = dialog.querySelector('.confirm-btn');

  // 取消
  cancelButton.addEventListener('click', function() {
    removeSelected(dialog)
  });
  // 确定
  confirmButton.addEventListener('click', function() {
    // ----- ----- ----- js调用c#的函数 假设需要借阅得书籍id集
    // public string beginLendBooks(string sData)
    const bookBarcodes = books.map(function(book) {
      return book.barcode
    })
    console.log('bookBarcodes',bookBarcodes)
    const params = bookBarcodes.join(',')
    let lendBookComfirmed = boundObject.beginLendBooks(params)
    if(lendBookComfirmed){
      removeSelected(dialog)
    }
  });
}

function removeSelected(dialog){
  const bookListItems = document.querySelectorAll('.list-item');
  bookListItems.forEach(function(item) {
    item.classList.remove('active');
  });
  dialog.remove()
}

// 图书借阅弹框 show
document.querySelector(".lending-btn").addEventListener("click", function() {
  const selectedBooks = [];
  document.querySelectorAll('.list-item.active').forEach(activeLi => {
    const bookData = {
      barcode: activeLi.getAttribute('data-id'),
      title: activeLi.querySelector('.book-name').textContent
    };
    selectedBooks.push(bookData);
  });

  // author: activeLi.querySelector('.book-writer') ? activeLi.querySelector('.book-writer').textContent : ''

  if(selectedBooks.length === 0){
    layer.alert('请先选择需要借阅的图书！');
    return false
  }else if(selectedBooks.length > lendNum){
    layer.alert('最多只可借阅'+lendNum+'本图书!');
    return false
  }{
    createlendDialog(selectedBooks);
  }
});

// 搜索按钮点击搜索
document.querySelector(".search-btn").addEventListener("click", function() {
  isSearch = true
  searchKeyWord = document.querySelector('input[name="keyword"]').value
  if(searchKeyWord === ''){
    layer.alert('请输入关键词进行搜索！');
    return false
  }
  hasNextPage = true
  // document.querySelector('.rack-content').scrollTop = 0
  // document.querySelector('.rack-content').innerHTML = ''
  let bookNoData= document.querySelector('.rack-content').querySelector('.book-noData');
  if(bookNoData){
    bookNoData.remove()
  }
  document.querySelectorAll('.left-filter li').forEach(item => {
    item.classList.remove('active');
  });
  createInitRackBooklist()
});