xugu_license/static/license_info/script.js

// 全局变量定义
let page = 11; // 初始页码为1，代表从第1条数据开始获取
let pageSize = 20; // 初始每次固定获取10条数据
let total = 0; // 数据总量（从接口获取）
let loadedItems = 0; // 已加载的数据条目数量
let isLoading = false; // 防止多次加载
const timeoutDuration = 10000; // 超时时间10秒
const preLoadDistance = 300; // 距离底部300px时提前加载

// 假设 Authorization 值存储在 localStorage 中，key 为 "authToken"
const authToken = localStorage.getItem("Authorization");


//获取  主内容区域
const license_info_mainElement = document.querySelector('main'); // 主内容区域

//模态框
const license_info_modal = document.getElementById('license-info-modal'); // 模态框容器
const license_info_modalContent = document.querySelector('.license-info-modal-content'); // 模态框内容区域
const license_info_modalDescription = document.getElementById('license-info-modal-description'); // 模态框描述
const license_info_modalPrice = document.getElementById('license-info-modal-price'); // 模态框产品信息
const license_info_modalRating = document.getElementById('license-info-modal-rating'); // 模态框MAC地址
const license_info_closeModal = document.querySelector('.license-info-close'); // 模态框关闭按钮
const license_info_loadingIndicator = document.getElementById('loading-indicator'); // 加载提示元素

//存储
let LicApplicationData = []; // 用于存储从接口获取的数据

// 获取数据函数
async function fetchLicenseData(page, pageSize) {
    try {
        const response = await fetch(`http://127.0.0.1:8080/api/admin/GetAllLicenseInfo?page=${page}&pageSize=${pageSize}`, {
            method: 'GET',
            headers: {
                'Authorization': `Bearer ${authToken}`,
                'Content-Type': 'application/json'
            }
        });
        
        const result = await response.json();
        
        // 设置总量，如果第一次加载，获取total字段
        if (total === 0 && result.total) {
            total = result.total;
        }
   
           // 使用 concat 方法将新数据与之前的数据进行累加
           LicApplicationData = LicApplicationData.concat(result.data || []);
        console.log("LicApplicationData： ",LicApplicationData);
        return result.data || [];

    } catch (error) {
        console.error("加载数据失败", error);
        return []; // 返回空数组，防止后续操作出错
    }
}


// 渲染 license_info 卡片数据函数
function renderLicenseCards(data, clearContainer = false) {
    console.log("-----------渲染次数");
    // 获取与 license_info 相关的 HTML 元素
    const license_info_container = document.getElementById('license-info-restaurant-list'); // 卡片列表容器
    

    if (clearContainer) {
        license_info_container.innerHTML = ''; // 清空容器内容
        isLoading = false; // 重置加载状态
        loadedItems = 0; // 重置已加载项数
        page = 11; // 每次请求后，page 增加10，表示从下一组数据开始
        pageSize = 20; // pageSize 每次递增10
        console.log("-----------渲染清除");
    }
    console.log("-----------data：",data);
    data.forEach(group => {
        const firstItem = group[0]; // 获取该组的第一个数据项

        let statusClass = '';
        if (firstItem.LicenseFlage === '已生成') {
            statusClass = 'license-status-green';
        } else if (firstItem.LicenseFlage === '未生成') {
            statusClass = 'license-status-yellow';
        } else if (firstItem.LicenseFlage === '已失效') {
            statusClass = 'license-status-red';
        }

        const card = document.createElement('div');
        card.className = 'license-info-card';
         
        // 在卡片的第一行显示申请时间
        card.innerHTML = `
            <div class="license-info-card-header">
                <h3 class="card-title">${firstItem.GlxmName}</h3>
            </div>
            <div class="license-info-card-content">
                <p class="card-text">${firstItem.ApplicationDate} ${firstItem.ApplicationTime}</p> <!-- 显示日期和时间 -->
                <p class="card-text">创建者：${firstItem.Creator}</p>
                <p class="card-text">公司：${firstItem.Company}</p>
                <p class="card-text ${statusClass}">许可证状态：${firstItem.LicenseFlage}</p>
                 <p class="card-text">oa_request_id：${firstItem.oa_request_id}</p>
            </div>
        `;


     // 给卡片添加点击事件，点击后显示模态框
     card.addEventListener('click', () => {
        showModalForCard(group); // 传递当前卡片的详细数据到模态框
    });
  

    // 将卡片添加到容器中
    license_info_container.appendChild(card); 



    });

    
}


// 检查页面是否填满，如果没有则继续加载更多数据
function checkContentHeight() {
    const documentHeight = document.documentElement.scrollHeight;
    const windowHeight = window.innerHeight;

    if (documentHeight <= windowHeight) {
        console.log("页面内容不足，继续加载更多数据");
        loadMoreData(); // 当内容高度不足时，继续加载更多数据
    }
}

// 检查是否滚动到底部并触发加载
async function checkAndLoadMore(scrollHeight, scrollTop, clientHeight) {
    if (isLoading || loadedItems >= total) return; // 如果正在加载或已加载完所有数据则退出

  //  console.log(`Scroll Info - scrollHeight: ${scrollHeight}, scrollTop: ${scrollTop}, clientHeight: ${clientHeight}`);

    if (scrollTop + clientHeight >= scrollHeight - preLoadDistance) {
        console.log(`触发加载更多数据：page=${page}, pageSize=${pageSize}`); // 每次触发时打印输出
        await loadMoreData();
    }
}

// 加载更多数据函数
async function loadMoreData() {
    if (isLoading) return; // 防止重复加载

    isLoading = true;
    console.log('开始加载更多数据');

    // 显示加载提示
    // license_info_loadingIndicator.style.display = 'block'; // 显示提示
    // license_info_loadingIndicator.innerText = '正在加载...'; // 重置加载提示
    
    // 设置超时处理
    const timeout = setTimeout(() => {
        license_info_loadingIndicator.innerText = '加载超时，请重试'; // 修改提示语为超时提示
        isLoading = false;
        license_info_loadingIndicator.style.display = 'none'; // 超时后隐藏加载提示
    }, timeoutDuration);

    // 获取数据
    const data = await fetchLicenseData(page, pageSize);
    console.log(`加载的新数据 data`,data); // 每次触发时打印输出
    // 清除超时定时器
    clearTimeout(timeout);

    if (data.length > 0) {
      

        // 更新 page 和 pageSize，下一次请求从新的位置开始
        page += 10; // 每次请求后，page 增加10，表示从下一组数据开始
        pageSize += 10; // pageSize 每次递增10

        // 更新已加载的条目数
        loadedItems += data.length;

          // 渲染数据到页面
          renderLicenseCards(data);

        console.log('数据加载完成，更新页面');
    }

    // 隐藏加载提示
    //license_info_loadingIndicator.style.display = 'none'; // 加载完成后隐藏提示
    isLoading = false; // 请求完成，允许下次请求

    // 检查内容高度，必要时继续加载
    checkContentHeight();
}


//--------------------------监听 window 滚动---监听 main 容器的滚动-----------------------------------------------


// // 监听 window 滚动
// window.addEventListener('scroll', () => {
//     checkAndLoadMore(document.body.scrollHeight, window.scrollY, window.innerHeight);
// });

// // 监听 main 容器的滚动
// license_info_mainElement.addEventListener('scroll', () => {
//     checkAndLoadMore(license_info_mainElement.scrollHeight, license_info_mainElement.scrollTop, license_info_mainElement.clientHeight);
// });
function initializeScrollListeners() {
    // 监听 window 滚动
    window.addEventListener('scroll', handleWindowScroll);
    // 监听 main 容器的滚动
    license_info_mainElement.addEventListener('scroll', handleMainScroll);
  //  console.log('滚动监听已初始化');
}

function removeScrollListeners() {
    // 移除 window 滚动监听
    window.removeEventListener('scroll', handleWindowScroll);

    // 移除 main 容器的滚动监听
    license_info_mainElement.removeEventListener('scroll', handleMainScroll);
}

function handleWindowScroll() {
  //  console.log('handleWindowScroll',document.body.scrollHeight, window.scrollY, window.innerHeight);
    checkAndLoadMore(document.body.scrollHeight, window.scrollY, window.innerHeight);
}

function handleMainScroll() {
//    console.log('handleMainScroll',license_info_mainElement.scrollHeight, license_info_mainElement.scrollTop, license_info_mainElement.clientHeight);
    checkAndLoadMore(license_info_mainElement.scrollHeight, license_info_mainElement.scrollTop, license_info_mainElement.clientHeight);
}


//-----------------------------------------------------------------------------------------



// 初始化加载第一页
(async function() {
    const data = await fetchLicenseData(1, 10);
    if (data.length > 0) {
        renderLicenseCards(data); // 渲染数据到页面
        loadedItems += data.length; // 更新已加载的条目数
    }
    //license_info_loadingIndicator.style.display = 'none'; // 初始化后隐藏加载提示

    // 检查内容高度
    checkContentHeight();
})();
initializeScrollListeners()
//-----------点击卡片弹出模态框------------------------------------------------------

// 模态框显示函数
// 模态框显示函数
function showModalForCard(item) {
    const modal = document.getElementById('license-info-modal');
    const modalContent = document.querySelector('.license-info-modal-content');
    const modalBody = document.getElementById('license-info-modal-body'); // 获取下半部分容器

    // 设置分页相关的变量
    let currentPage = 1;
    const itemsPerPage = 2; // 每页显示两组

    // 对 item 数组按 oa_id 进行升序排序
    const sortedItem = item.sort((a, b) => a.oa_id - b.oa_id);

    const totalPages = Math.ceil(sortedItem.length / itemsPerPage); // 计算总页数

    // 获取分页容器
    const paginationContainer = document.querySelector('.license-info-modal-pagination');

    // 清空分页容器，避免重复创建元素
    paginationContainer.innerHTML = '';

    // 创建"上一页"按钮
    const prevButton = document.createElement('button');
    prevButton.classList.add('prev-page');
    prevButton.innerText = '上一页';
    paginationContainer.appendChild(prevButton);

    // 创建下拉框
    const selectPageDropdown = document.createElement('select');
    paginationContainer.appendChild(selectPageDropdown);

    // 创建"下一页"按钮
    const nextButton = document.createElement('button');
    nextButton.classList.add('next-page');
    nextButton.innerText = '下一页';
    paginationContainer.appendChild(nextButton);

 
   // 初始化上半部分内容（Company, Creator, ApplicationDate, ApplicationTime 和两个按钮）
function initializeHeaderContent(firstItem) {
    // 清空上半部分内容
    const modalHeader = document.querySelector('.license-info-modal-header');
    modalHeader.innerHTML = ''; // 确保不会重复创建

    // 创建动态字段
    const companyDiv = document.createElement('div');
    companyDiv.classList.add('license-info-company');
    companyDiv.innerHTML = `<strong>Company: </strong> ${firstItem.Company}`;

    const creatorDiv = document.createElement('div');
    creatorDiv.classList.add('license-info-creator');
    creatorDiv.innerHTML = `<strong>Creator: </strong> ${firstItem.Creator}`;

    const applicationDateDiv = document.createElement('div');
    applicationDateDiv.classList.add('license-info-application-date');
    applicationDateDiv.innerHTML = `<strong>Application Date: </strong> ${firstItem.ApplicationDate}`;

    const applicationTimeDiv = document.createElement('div');
    applicationTimeDiv.classList.add('license-info-application-time');
    applicationTimeDiv.innerHTML = `<strong>Application Time: </strong> ${firstItem.ApplicationTime}`;

    // 创建两个按钮
    const button1 = document.createElement('button');
    button1.classList.add('license-info-modal-button');
    button1.innerText = '按钮1';
    button1.addEventListener('click', () => {
        alert('按钮1被点击');
    });

    const button2 = document.createElement('button');
    button2.classList.add('license-info-modal-button');
    button2.innerText = '按钮2';
    button2.addEventListener('click', () => {
        alert('按钮2被点击');
    });

    // 将这些 div 和按钮插入到模态框的上半部分
    modalHeader.appendChild(companyDiv);
    modalHeader.appendChild(creatorDiv);
    modalHeader.appendChild(applicationDateDiv);
    modalHeader.appendChild(applicationTimeDiv);
    modalHeader.appendChild(button1);
    modalHeader.appendChild(button2);
}


    // 初始化下拉框的页码选项
    function initializeDropdown() {
        selectPageDropdown.innerHTML = ''; // 清空下拉框中的选项
        for (let page = 1; page <= totalPages; page++) {
            const option = document.createElement('option');
            option.value = page;
            option.innerText = `第 ${page} 页`;
            selectPageDropdown.appendChild(option);
        }
        selectPageDropdown.value = currentPage; // 设置默认选项为当前页
    }

    // 渲染当前页内容
    function renderPage(page) {
        modalBody.innerHTML = ''; // 清空之前的内容

        // 计算当前页的起始和结束索引
        const startIndex = (page - 1) * itemsPerPage;
        const endIndex = Math.min(startIndex + itemsPerPage, sortedItem.length);

        // 更新上半部分的字段内容 (以第一个元素为例)
        const firstItem = sortedItem[0];
        initializeHeaderContent(firstItem); // 动态生成上半部分内容

        // 遍历当前页的数据
        for (let i = startIndex; i < endIndex; i++) {
            const group = sortedItem[i];
            const groupBox = document.createElement('div');
            groupBox.classList.add('license-info-group-box');

            // 动态生成组内容，显示编号为 i+1（表示组1, 组2...）
            groupBox.innerHTML = `
                <div class="license-info-group-title">组 ${i + 1}</div>
                <p><strong>UniqueID:</strong> ${group.UniqueID}</p>
                <p><strong>oa_id:</strong> ${group.oa_id}</p>
                <p><strong>oa_request_id:</strong> ${group.oa_request_id}</p>
                <p><strong>Creator:</strong> ${group.Creator}</p>
                <p><strong>oa_request_name_new:</strong> ${group.oa_request_name_new}</p>
            `;

            // 将生成的组内容加入到 modalBody
            modalBody.appendChild(groupBox);
        }

        // 更新下拉框的值
        selectPageDropdown.value = page;

        // 更新按钮状态
        prevButton.disabled = (page === 1);
        nextButton.disabled = (page === totalPages);
    }

    // 下拉框页码选择事件
    selectPageDropdown.addEventListener('change', function() {
        currentPage = parseInt(this.value);
        renderPage(currentPage); // 根据选择的页码渲染对应页面
    });

    // 上一页按钮点击事件
    prevButton.addEventListener('click', function() {
        if (currentPage > 1) {
            currentPage--;
            renderPage(currentPage);
        }
    });

    // 下一页按钮点击事件
    nextButton.addEventListener('click', function() {
        if (currentPage < totalPages) {
            currentPage++;
            renderPage(currentPage);
        }
    });

    // 显示或隐藏分页相关控件
    function togglePaginationVisibility() {
        if (totalPages <= 1) {
            // 隐藏下拉框和分页容器
            paginationContainer.style.display = 'none';
        } else {
            // 显示下拉框和分页容器
            paginationContainer.style.display = 'flex';
        }
    }

    // 初始化下拉框并渲染第一页
    initializeDropdown();
    renderPage(currentPage);

    // 根据页数决定是否显示分页控件
    togglePaginationVisibility();

    // 显示模态框
    modal.style.display = 'flex'; // 显示模态框背景
    setTimeout(() => {
        modalContent.classList.add('show'); // 添加动画效果
    }, 10); // 延时确保动画生效

    // 关闭模态框逻辑
    const closeModal = document.querySelector('.license-info-close');
    closeModal.addEventListener('click', () => {
        modalContent.classList.remove('show'); // 移除动画类
        setTimeout(() => {
            modal.style.display = 'none'; // 完全隐藏模态框
        }, 500); // 等待动画结束后再隐藏
    });

    // 点击模态框外部关闭模态框
    window.addEventListener('click', (event) => {
        if (event.target === modal) {
            modalContent.classList.remove('show');
            setTimeout(() => {
                modal.style.display = 'none'; // 完全隐藏模态框
            }, 500); // 等待动画结束后再隐藏
        }
    });
}

//----------------------------------------
//获取用户管理和 License 信息按钮
const userManagementLink = document.getElementById('user-management-link');
const licenseInfoLink = document.getElementById('license-info-link');


// 监听用户管理按钮的点击事件
userManagementLink.addEventListener('click', function(event) {
    event.preventDefault(); // 阻止默认的跳转行为
    removeScrollListeners(); // 移除滚动监听器
    // 使用 fetch 来加载 user_management.html 的内容
    fetch('user_management.html')
        .then(response => response.text())
        .then(data => {
            // 将 user_management.html 的内容插入到主内容区域
            license_info_mainElement.innerHTML = data;
    
            
        })
        .catch(error => console.error('加载用户管理页面失败:', error));
});

// 监听 License 信息按钮的点击事件
licenseInfoLink.addEventListener('click', function(event) {
    event.preventDefault(); // 阻止默认的跳转行为

    // 将瀑布流的 License 信息内容恢复到主内容区域
    const licenseInfoHtml = `
            <div class="license-info-container" id="license-info-restaurant-list">   </div>
    `; // 这是原来的 License 信息区域 HTML

    //mainContainer.innerHTML = licenseInfoHtml;
    license_info_mainElement.innerHTML  = licenseInfoHtml;
          //清楚lic信息组的数据
          LicApplicationData = [];
          initializeScrollListeners(); // 重新初始化滚动监听器
    // 再次加载 License 信息数据并渲染卡片
    (async function() {
        const data = await fetchLicenseData(1, 10);
        if (data.length > 0) {
            console.log('加载的数据：', data); // 检查是否成功获取数据
            renderLicenseCards(data, true); // 渲染数据到页面并清空之前的内容
      
        } else {
            console.error('未加载到数据');
        }
    })();
});


//----------------------------------------


// 获取用户管理模态框元素