xugu_license/static/license_info/license_info.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 currentUserInfo  = fetchUsername(); // 获取当前用户登录信息
let currentUserPermissions; // 用于存储用户权限信息

//获取  主内容区域
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 = []; // 用于存储从接口获取的数据


// 统一的打开模态框函数
function openModal(modalId) {
    const modal = document.getElementById(modalId);
    if (modal) {
        modal.style.display = "block"; // 显示模态框
    } else {
        console.error('模态框不存在，ID:', modalId);
    }
}

// 统一的关闭模态框函数
function closeModal(modalId) {
    const modal = document.getElementById(modalId);
    if (modal) {
        modal.style.display = "none"; // 隐藏模态框
    } else {
        console.error('模态框不存在，ID:', modalId);
    }
}


//-----------侧边栏----------------------------

// 获取所有菜单项
const menuItems = document.querySelectorAll('nav ul li a');

// 为每个菜单项添加点击事件监听器
menuItems.forEach(item => {
    item.addEventListener('click', function() {
        // 移除其他项的 active 类
        menuItems.forEach(i => i.classList.remove('active'));
        
        // 为当前点击的项添加 active 类
        this.classList.add('active');
    });
});

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

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

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

    // 将瀑布流的 License 信息内容恢复到主内容区域
    const licenseInfoHtml = `
        <!-- 包裹搜索框、下拉框、时间选择框和确定按钮的 div -->
         <div class="search-container">
            <!-- License 状态下拉框 -->
            <select id="license-status-filter" aria-label="选择 License 状态">
                <option value="">License 状态</option>
                <option value="已生成">已生成</option>
                <option value="未生成">未生成</option>
                <option value="已失效">已失效</option>
            </select>
        
            <!-- 开始时间选择框，类型改为 date -->
            <input type="date" id="start-date" placeholder="开始时间" />
        
            <!-- 结束时间选择框，类型改为 date -->
            <input type="date" id="end-date" placeholder="结束时间" />
        
            <!-- 搜索框 -->
            <input type="text" id="search-bar" placeholder="搜索..." />
        
            <!-- 确定按钮 -->
            <button id="submit-button">确定</button>
        </div>
            <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('未加载到数据');
        }
    })();
});

roleManagementLink.addEventListener('click', function(event) {
    event.preventDefault(); // 阻止默认的跳转行为
    removeScrollListeners(); // 移除滚动监听器
    // 使用 fetch 来加载 user_management.html 的内容
    fetch('../role/role.html')
        .then(response => response.text())
        .then(data => {
            // 将 user_management.html 的内容插入到主内容区域
            license_info_mainElement.innerHTML = data;
         // 动态引入 user.js 文件
         const script = document.createElement('script');
         script.src = '../role/role.js';
         document.body.appendChild(script);
            
        })
        .catch(error => console.error('加载用户管理页面失败:', error));
});

//-------license数据显示------------------------------------------------------

// 获取数据函数
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]; // 获取该组的第一个数据项
       // 获取子行的数量
       const childRowCount = group.length;
        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';
           // 给卡片添加一个唯一标识符的 data 属性
        card.setAttribute('data-oa-request-id', firstItem.oa_request_id);

        // 在卡片的第一行显示申请时间
        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">集群：${childRowCount} 套  共计：${firstItem.TotalNodes} 节点</p>
                <p class="card-text license-status ${statusClass}">许可证状态：${firstItem.LicenseFlage}</p>
                <p class="card-text">oa_request_id：${firstItem.oa_request_id}</p>
            </div>
        `;


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

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



    });

    
}




// 检查是否滚动到底部并触发加载
// 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();
    checkAndLoadMore();
}


//--------------------------监听 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() {
    // 只监听 main 容器的滚动
    license_info_mainElement.addEventListener('scroll', handleMainScroll);
    // console.log('滚动监听已初始化');
}

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

// 新增一个重启滑动监听功能函数，当用户清空搜索条件时调用
function restartScrollListeners() {
    // 重新绑定滑动监听器
    initializeScrollListeners();
}

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

    // 检查内容高度
   // checkContentHeight();
   checkAndLoadMore()
})();
//初始化监听滚动条
initializeScrollListeners()

//-----------点击卡片弹出模态框------------------------------------------------------

// 模态框显示函数
// 模态框显示函数
function showModalForCard(item,oaRequestId) {
    const modal = document.getElementById('license-info-modal');
    const modalContent = document.querySelector('.license-info-modal-content');
    const modalBody = document.getElementById('license-info-modal-body'); // 获取下半部分容器
    console.log(`当前点击的卡片 ID: ${oaRequestId}`);
    
    // 设置分页相关的变量
    let currentPage = 1;
    const itemsPerPage = 3; // 每页显示两组

    // 对 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,sortedItem) {
    console.log("initializeHeaderContent");  // 检查是否找到按钮
    // 清空上半部分内容
    const modalHeader = document.querySelector('.license-info-modal-header');
    modalHeader.innerHTML = ''; // 确保不会重复创建

    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 hasGeneratePermission = currentUserPermissions.includes('generate_license');
   const hasDispatchPermission = currentUserPermissions.includes('dispat_license');

console.log(`当前用户是否有生成权限: ${hasGeneratePermission}, ${hasDispatchPermission}`);
    // 设置卡片内容
    modalHeader.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.Company}</p>
        <p class="card-text">${firstItem.Project}</p>
        <p class="card-text">创建者：${firstItem.Creator}</p>
        <p class="card-text license-status ${statusClass}">许可证状态：${firstItem.LicenseFlage}</p>
        <div class="license-info-card-buttons">
            ${
            firstItem.LicenseFlage === '已生成' && hasDispatchPermission
                ? `<button class="license-info-modal-button" id="generateOrDistribute">分发</button>`
                : firstItem.LicenseFlage !== '已生成' && hasGeneratePermission
                ? `<button class="license-info-modal-button" id="generateOrDistribute">生成</button>`
                : ''
            }
            <button class="license-info-modal-button" id="downloadAllLicenses-button">打包下载所有license.dat</button>
            <button id="viewDistributionHistory-button">查看分发历史</button>
        </div>
    </div>
    `;

        // 绑定 button1 的点击事件（如果按钮存在）
        const generateOrDistribute = modalHeader.querySelector('#generateOrDistribute');
        console.log("generateOrDistribute",generateOrDistribute);  // 检查是否找到按钮
        if (generateOrDistribute) {
            generateOrDistribute.addEventListener('click', () => {
                if (firstItem.LicenseFlage === '已生成') {
                    // 执行分发逻辑
                    showDistributeModal(firstItem);
                
                } else {
                    // 执行生成逻辑
                    const oaRequestID = parseInt(firstItem.oa_request_id, 10);  // 10 表示10进制
                 generateLicense(oaRequestID, true);
                }
                console.log('Button 1 clicked');
            });
        }
;
            
          

        // 绑定 "打包下载所有license.dat" 按钮的点击事件
        const downloadButton = modalHeader.querySelector('#downloadAllLicenses-button');

        // 如果 LicenseFlage 是 "未生成" 或 "已失效"，按钮变灰且不可点击
        if (firstItem.LicenseFlage === '未生成' || firstItem.LicenseFlage === '已失效') {
            downloadButton.disabled = true;
            downloadButton.style.backgroundColor = '#ccc'; // 设置为灰色
            downloadButton.style.cursor = 'not-allowed'; // 修改鼠标样式
        } else {
            // 只有当 LicenseFlage 是 "已生成" 时，才能点击下载按钮
            downloadButton.addEventListener('click', () => {
                downloadAllLicenses(sortedItem);
            });
        }
   // 在初始化完成后绑定 "查看分发历史" 按钮的点击事件
   const viewDistributionHistoryButton = document.getElementById('viewDistributionHistory-button');
   if (viewDistributionHistoryButton) {
       viewDistributionHistoryButton.addEventListener('click', () => {
           showDistributionHistory(firstItem);
       });
   }

    }


    // 初始化下拉框的页码选项
    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 ModalForCardRenderPage(page) {
            modalBody.innerHTML = ''; // 清空之前的内容

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

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

            // 遍历当前页的数据
            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>节点数:</strong> ${group.NodeCount}</p>
                    <p><strong>数据库版本: </strong> ${group.ProductName}${group.ProductVersion}</p>
                    <p><strong>CPU 型号:</strong> ${group.oa_cpu}</p>
                    <p><strong>操作系统环境:</strong> ${group.oa_operating_system}</p>
                    <p><strong>以下为测试显示:</strong> </p>
                    <p><strong>oa_id:</strong> ${group.oa_id}</p>
                    <p><strong>oa_request_id:</strong> ${group.oa_request_id}</p>
                `;

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

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

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

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

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

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

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

    // 初始化下拉框并渲染第一页
    initializeDropdown();
    // 渲染模态框内容
    ModalForCardRenderPage(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); // 等待动画结束后再隐藏
            }
        });
}

//-------下载全部licstr按钮
// 下载许可证功能
function downloadAllLicenses(sortedApplicationArray) {
    const zip = new JSZip();
    console.log("传进来的 sortedApplicationArray:", sortedApplicationArray);

    // 初始化计数器，从1开始
    let idCounter = 1;
    let Project = sortedApplicationArray[0].Project;
    console.log("Project", Project);

    // 遍历 sortedApplicationArray，下载 lic1 和 lic2 数据
    sortedApplicationArray.forEach(row => {
        if (row.LicenseFlage === "已生成") {
            // 替换 oa_main_mac 和 oa_second_mac 中的冒号为点
            const mainMac = row.oa_main_mac.replace(/:/g, '.');
            const secondMac = row.oa_second_mac.replace(/:/g, '.');

            // 使用递增的 idCounter 替换 row.oa_id
            if (row.lic1) {
                const filename1 = `${idCounter}_license.dat_1_${mainMac}`;
                zip.file(filename1, row.lic1);
            }
            if (row.lic2) {
                const filename2 = `${idCounter}_license.dat_2_${secondMac}`;
                zip.file(filename2, row.lic2);
            }

            // 每次循环后递增计数器
            idCounter++;
        }
    });

    // 生成 ZIP 文件并触发下载
    zip.generateAsync({ type: "blob" }).then(content => {
        const link = document.createElement('a');
        link.href = URL.createObjectURL(content);
        link.download = `${Project}_license.zip`;
        link.click();
    });
}

//分发
let userMap = {};

// 打开分发模态框
function showDistributeModal(firstItem) {
    console.log("showDistributeModal firstItem", firstItem);
    const modal = document.getElementById('distribute-modal');
    const emailInputs = document.getElementById('emailInputs');
    const userInputs = document.getElementById('userInputs');
    let usedUsernames = []; // 存储已选择的用户

    // 清空内容
    emailInputs.innerHTML = '';
    userInputs.innerHTML = '';

    // 动态生成分发邮箱部分
    if (firstItem.SupportEmail) {
        emailInputs.innerHTML += `<div><input type="checkbox" id="supportEmail" value="${firstItem.SupportEmail}"> 运维邮箱: ${firstItem.SupportEmail}</div>`;
    }
    if (firstItem.SalesEmail) {
        emailInputs.innerHTML += `<div><input type="checkbox" id="salesEmail" value="${firstItem.SalesEmail}"> 销售邮箱: ${firstItem.SalesEmail}</div>`;
    }

    // 调用 API 获取用户信息并填充第一个用户输入框
    fetch('http://127.0.0.1:8080/api/admin/distributeLicenseByUserInfo', {
        method: 'GET',
        headers: {
            'Authorization': `Bearer ${authToken}`, // 确保 token 已经定义
            'Content-Type': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        // 初始化 userMap
        userMap = {};
        
        const availableUsers = data.data
            .map(user => {
                // 将用户信息存储在 userMap 中
                userMap[user.Username] = {
                    Account: user.Account,
                    UniqueID: user.UniqueID,
                    Username: user.Username,
                    Email: user.Email,
                    Role: user.Role,
                    Telephone: user.Telephone
                };
                return user.Username;
            })
            .filter(user => user !== 'admin'); // 排除用户名为 "admin"

      //  createUserSelect(userInputs, availableUsers, usedUsernames); // 创建第一个下拉框

        // 创建“添加用户”按钮
        const addButton = document.createElement('button');
        addButton.className = 'distribute-add-user-button';
        addButton.textContent = '添加用户';
        addButton.addEventListener('click', () => {
            createUserSelect(userInputs, availableUsers, usedUsernames); // 添加新的下拉框
        });
        userInputs.appendChild(addButton);
        
        // 创建“确定分发”按钮
        const distributeButton = document.createElement('button');
        distributeButton.className = 'distribute-confirm-button';
        distributeButton.textContent = '确定分发';
        distributeButton.addEventListener('click', () => {
            // 弹出确认框
            if (confirm('确定要分发许可证吗？')) {
                // 获取选中的用户信息
                const selectedUserInputs = Array.from(document.querySelectorAll('select.distribute-user-select'));

                const userIds = selectedUserInputs.map(select => userMap[select.value].UniqueID);
                const userAccounts = selectedUserInputs.map(select => userMap[select.value].Account);
                const userNames = selectedUserInputs.map(select => userMap[select.value].Username);

                // 将提前获取的用户信息传递给 distributeLicenseToUsers 函数
                distributeLicenseToUsers(firstItem, userIds, userAccounts, userNames);
            }
        });
        userInputs.appendChild(distributeButton);
    })
    .catch(error => console.error('获取用户信息失败:', error));

    // 显示模态框
    modal.style.display = 'flex';

    // 关闭按钮事件
    const closeButton = document.querySelector('#distribute-modal .distribute-close');
    closeButton.addEventListener('click', () => {
        modal.style.display = 'none';
    });

    // 点击模态框外部区域时关闭模态框
    window.addEventListener('click', function(event) {
        if (event.target === modal) {
            modal.style.display = 'none';
        }
    });
}


//分发license 到用户
function distributeLicenseToUsers(selectedRowData, userIds, userAccounts, userNames) {
    console.log('Distribute button clicked');
    console.log('userIds', userIds);
    console.log('userAccounts', userAccounts);
    console.log('userNames', userNames);

    // 显示加载进度条并设置动态提示信息
    showLoadingModal('正在分发 License...');

    const operatorUniqueID = userMap[currentUserName].UniqueID;

    if (userIds.length === 0) {
        alert('请至少选择一个用户。');
        hideLoadingModal();
        return;
    }

    const requestData = {
        LicenseUniqueID: selectedRowData.UniqueID,  // 当前选中的 License ID
        Oa_request_id:  selectedRowData.oa_request_id,  // 当前选中的 OA 请求 ID
        UserUniqueIDs: userIds,  // 用户 ID 数组
        UserAccounts: userAccounts,  // 用户账号数组
        UserNames: userNames,  // 用户名数组
        Emails: '',  // 邮箱（可以根据需要添加或删除）
        OperatorUniqueID: operatorUniqueID  // 操作者的唯一 ID
    };

    console.log('requestData:', requestData);

    // 发起 POST 请求到分发 License 的 API
    fetch('http://127.0.0.1:8080/api/admin/DistributeLicenseToUser', {
        method: 'POST',
        headers: {
            'Authorization': `Bearer ${authToken}`,
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(requestData)
    })
    .then(response => response.json())
    .then(data => {
        hideLoadingModal();

        if (data.success) {
            alert('分发成功！');
            closeModal('distribute-modal');  // 关闭模态框
        } else {
            const errorMessage = data.error || '分发失败。';
            alert(`分发失败: ${errorMessage}`);
        }
    })
    .catch(error => {
        hideLoadingModal();
        console.error('Error occurred during license distribution:', error);
        alert('分发失败，请检查网络或后端服务。');
    });
}

// 创建新的下拉框并过滤掉已选择的用户
// 创建新的下拉框并过滤掉已选择的用户
function createUserSelect(container, availableUsers, usedUsernames) {
    // 创建下拉框容器
    const userSelectContainer = document.createElement('div');
    userSelectContainer.className = 'distribute-modal-user-select-container';

    // 创建下拉框
    const userSelect = document.createElement('select');
    userSelect.className = 'distribute-modal-user-select';

    // 过滤掉已经选中的用户
    const filteredUsers = availableUsers.filter(user => !usedUsernames.includes(user));

    // 填充下拉框选项
    filteredUsers.forEach(user => {
        const option = document.createElement('option');
        option.value = user;
        option.textContent = user;
        userSelect.appendChild(option);
    });

    // 创建关闭按钮
    const closeButton = document.createElement('span');
    closeButton.textContent = 'X';
    closeButton.className = 'distribute-modal-close-select'; // 添加类名以便样式化
    closeButton.style.cursor = 'pointer'; // 鼠标样式
    closeButton.style.marginLeft = '10px'; // 与下拉框之间的间距

    // 关闭按钮点击事件，删除下拉框和自身，并从已选择用户名数组中移除
    closeButton.addEventListener('click', function() {
        // 从已选择的用户名中移除
        const selectedValue = userSelect.value;
        const index = usedUsernames.indexOf(selectedValue);
        if (index > -1) {
            usedUsernames.splice(index, 1); // 移除已选择的用户名
        }
        container.removeChild(userSelectContainer); // 删除下拉框容器
    });

    // 将下拉框和关闭按钮添加到容器中
    userSelectContainer.appendChild(userSelect);
    userSelectContainer.appendChild(closeButton);

    // 将下拉框容器添加到父容器中
    container.appendChild(userSelectContainer);

    // 当选择新用户时，将其添加到已选择的用户名数组中
    userSelect.addEventListener('change', function() {
        const previousValue = usedUsernames.find(u => u === this.defaultValue);
        if (previousValue) {
            // 如果之前的值存在且不同于新值，则移除之前的值
            usedUsernames.splice(usedUsernames.indexOf(previousValue), 1);
        }
        usedUsernames.push(this.value); // 添加新选中的用户名
        this.defaultValue = this.value; // 更新默认值
        console.log('已选择的用户:', usedUsernames);
    });
}


// 更新下拉框选项，过滤掉已选择的用户名
function updateUserSelectOptions(availableUsers, usedUsernames, container) {
    const allSelects = container.querySelectorAll('.distribute-modal-user-select');
    
    allSelects.forEach(select => {
        const currentValue = select.value; // 保存当前选中值
        // 清空下拉框
        select.innerHTML = '';

        // 重新填充选项，排除已选中的用户，确保当前选择保留
        availableUsers.forEach(user => {
            if (!usedUsernames.includes(user) || user === currentValue) {
                const option = document.createElement('option');
                option.value = user;
                option.textContent = user;
                if (user === currentValue) {
                    option.selected = true; // 保留当前选中项
                }
                select.appendChild(option);
            }
        });
    });
}





// 刷新数据并滚动到目标卡片的函数
// 刷新数据并滚动到目标卡片，同时重新打开目标卡片的模态框
async function refreshLicenseDataAndScrollAndOpenModal(selfPage,selfPageSize, targetCardId) {
    const data = await fetchLicenseData(selfPage, selfPageSize);
    if (data.length > 0) {
        isLoading = true;
        console.log('加载的数据：', data); // 检查是否成功获取数据
        renderLicenseCards(data, true); // 渲染数据到页面并清空之前的内容
        page = selfPageSize+1;
        pageSize= selfPageSize +10;

        // 滚动到目标卡片
        if (targetCardId) {
            const targetCard = document.querySelector(`[data-oa-request-id="${targetCardId}"]`);
            if (targetCard) {
                targetCard.scrollIntoView({ behavior: 'smooth', block: 'center' });
                
                // 延迟打开模态框，确保页面滚动完成
                setTimeout(() => {
                    targetCard.click(); // 模拟点击卡片，触发模态框
                }, 500); // 延时500ms确保滚动完成
            }
        }

        
         setTimeout(() => {
            isLoading = false;
        }, 2000); 
     
    } else {
        console.error('未加载到数据');
    }
}





function generateLicense(id, isParentRow) {
        // 显示加载进度条并设置动态提示信息
        showLoadingModal('正在生成 License...');
   // const payload = isParentRow ? { oa_request_id: JSON.stringify(id) } : { uniqueID:JSON.stringify(id) };
   const payload = isParentRow 
   ? { oa_request_id: parseInt(id, 10) }  // 将 id 转换为整数
   : { uniqueID: parseInt(id, 10) };  // 将 id 转换为整数

    console.log("generateLicense",payload ,id, isParentRow)
    fetch('http://127.0.0.1:8080/api/admin/GenerateLicense', {
        method: 'POST',
        headers: {
            'Authorization': `Bearer ${authToken}`,
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(payload)
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
          // 隐藏加载进度条
                hideLoadingModal();
                alert('License 生成成功！');
            //刷新页面
                 // 调用封装的更新方法
            //updateCardAndModalStatus(id, isParentRow);
            // 调用刷新函数，传入当前的 page 和 pageSize
            refreshLicenseDataAndScrollAndOpenModal(1,pageSize,id);
            } else {
                    // 请求失败时隐藏加载进度条
                hideLoadingModal();
                alert('License 生成失败：' + data.error);
            }
            
    })
    .catch(error => {
        console.error('生成过程中出现错误Error:', error);
     // 请求失败时隐藏加载进度条
     hideLoadingModal();
        alert('生成过程中出现错误，请稍后再试。',error);
    });
}


//更新卡片样式
function updateCardAndModalStatus(id, isParentRow) {
    // 获取对应的卡片元素，通过 oa_request_id 或 uniqueID 定位
    const cardSelector = isParentRow ? `[data-oa-request-id="${id}"]` : `[data-unique-id="${id}"]`;
    const card = document.querySelector(cardSelector);
    console.log("generateLicense card", cardSelector, card);
    
    if (card) {
        // 1. 更新卡片内许可证状态
        const statusElement = card.querySelector('.license-status');
        console.log("statusElement:", statusElement); // 检查状态元素是否存在
        
        if (statusElement) {
            // 只更新许可证状态部分的文本，而不是整个 p 标签
            statusElement.innerHTML = '许可证状态：已生成';
            
            // 更新状态的 CSS 类
            statusElement.classList.remove('license-status-yellow', 'license-status-red');
            statusElement.classList.add('license-status-green');
        } else {
            console.error('找不到 .license-status 元素');
        }

        // 2. 更新模态框中的状态（如果模态框已经打开）
        const modalStatusElement = document.querySelector('.license-info-modal-header .license-status');
        console.log("modalStatusElement:", modalStatusElement); // 检查状态元素是否存在
        
        if (modalStatusElement) {
            modalStatusElement.textContent = '许可证状态：已生成';
            modalStatusElement.classList.remove('license-status-yellow', 'license-status-red');
            modalStatusElement.classList.add('license-status-green');
        } else {
            console.error('找不到 #license-info-modal-body .license-status 元素');
        }

        // 3. 更新模态框中的按钮为“分发”
        const generateButton = document.getElementById('button1'); // 获取生成按钮
        if (generateButton) {
            generateButton.textContent = '分发'; // 修改按钮文本为“分发”
            generateButton.removeEventListener('click', generateLicense); // 移除生成逻辑
            generateButton.addEventListener('click', () => {
                distributeLicense(id); // 添加分发逻辑
            });
        }

        // 4. 启用 #downloadAllLicenses-button
        const downloadButton = document.getElementById('downloadAllLicenses-button');
        if (downloadButton) {
            downloadButton.disabled = false; // 启用按钮
            downloadButton.style.backgroundColor = '#007aff'; // 恢复正常的背景颜色
            downloadButton.style.cursor = 'pointer'; // 修改鼠标样式为可点击
        }

    } else {
        console.error(`找不到与 ID ${id} 对应的卡片`);
    }
}


///-----------获取登录用户信息----------------------------------------
async function fetchUsername() {
    try {
        const response = await fetch(`http://127.0.0.1:8080/api/admin/userInfo`, {
            method: 'GET',
            headers: {
                'Authorization': `Bearer ${authToken}`,
                'Content-Type': 'application/json'
            }
        });
        
        const data = await response.json();

        currentUserRole = data.data.Role; // 存储当前用户的角色
        currentUserName = data.data.Username;
        
        // 使用获取到的角色，调用获取权限的接口
        await fetchPermissionsByRole(currentUserRole);

        return data.data; // 返回获取到的用户信息数据
    
    } catch (error) {
        console.error('Error fetching user info or permissions:', error);
    }
}

// 将 fetchPermissionsByRole 转换为异步函数
async function fetchPermissionsByRole(role) {
    try {
        const response = await fetch(`http://127.0.0.1:8080/api/admin/GetSelfRoles`, {
            method: 'POST',
            headers: {
                'Authorization': `Bearer ${authToken}`,
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ name: role })
        });

        const data = await response.json();
        currentUserPermissions = data.data.Permissions; // 获取用户的权限数组
        console.log('currentUserPermissions:', currentUserPermissions);
        
        // 定义权限类别
        // const licensePermissions = ['upload_license', 'read_license'];
        // const userPermissionsCheck = ['create_user', 'read_user', 'update_user', 'delete_user'];
        // const rolePermissions = ['create_role', 'delete_role', 'update_role', 'get_role'];

        // const hasLicenseAccess = licensePermissions.some(permission => userPermissions.includes(permission));
        // const hasUserManagementAccess = userPermissionsCheck.some(permission => userPermissions.includes(permission));
        // const hasRoleManagementAccess = rolePermissions.some(permission => userPermissions.includes(permission));

        // 根据权限渲染菜单并显示初始页面
        //renderMenuAndInitialPage(hasLicenseAccess, hasUserManagementAccess, hasRoleManagementAccess);
    } catch (error) {
        console.error('Error fetching permissions:', error);
    }
}


//--------------进度条-------------------------------------------------
// 创建模态框的 DOM 元素并插入到 body 中
function createLoadingModal() {
    const modalHTML = `
        <div id="loadingModal" class="loading-modal" style="display: none;">
            <div class="loading-modal-content">
                <div class="spinner"></div>
                <p id="loadingMessage">加载中...</p>
            </div>
        </div>
    `;
    document.body.insertAdjacentHTML('beforeend', modalHTML);
}

// 显示加载模态框
function showLoadingModal(message = "加载中...") {
    const loadingModal = document.getElementById('loadingModal');
    const loadingMessage = document.getElementById('loadingMessage');
    
    if (loadingModal && loadingMessage) {
        loadingMessage.textContent = message; // 设置显示的消息
        loadingModal.style.display = 'flex'; // 显示模态框
    }
}

// 隐藏加载模态框
function hideLoadingModal() {
    const loadingModal = document.getElementById('loadingModal');
    
    if (loadingModal) {
        loadingModal.style.display = 'none'; // 隐藏模态框
    }
}

// 页面加载时创建模态框
document.addEventListener('DOMContentLoaded', createLoadingModal);

















//-----------搜索栏----------------------------

// 获取搜索框元素
// 获取搜索框、状态下拉框、时间选择框和按钮元素
// 获取搜索框、状态下拉框、时间选择框和按钮元素
const searchBar = document.getElementById('search-bar');
const statusFilter = document.getElementById('license-status-filter');
const startDate = document.getElementById('start-date');
const endDate = document.getElementById('end-date');
const submitButton = document.getElementById('submit-button');
const licenseInfoContainer = document.getElementById('license-info-restaurant-list');


// 过滤功能实现
function filterContent() {
    console.log('过滤功能触发');
        // 移除滚动监听器，停止滚动加载
       // removeScrollListeners();
    // 构建请求体参数
    const requestData = {
        license_flag: statusFilter.value || undefined,
        starting_date: startDate.value || undefined,
        end_date: endDate.value || undefined,
        any_search: searchBar.value || undefined,
    };

    console.log("requestData",requestData);
    // 发送 POST 请求到接口
    fetch('http://127.0.0.1:8080/api/admin/GetConditionalSearch', {
        method: 'POST',
        headers: {
            'Authorization': `Bearer ${authToken}`,
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(requestData),
    })
    .then(response => response.json())
    .then(data => {
        console.log('成功获取数据:', data);
        // 处理返回的数据并更新界面
        displayLicenseInfo(data.data);
    })
    .catch(error => {
        console.error('获取数据时发生错误:', error);
    });
}

// 处理并显示返回的 License 信息
function displayLicenseInfo(data) {
    // 清空之前的结果
    licenseInfoContainer.innerHTML = '';
    LicApplicationData =[];
    // 遍历返回的数据，生成并插入卡片
      // 处理返回的数据并更新界面，使用 renderLicenseCards 方法进行渲染
      renderLicenseCards(data, true);
    
}
// 确定按钮点击事件的修改（停止滚动监听）
submitButton.addEventListener('click', function() {
    // 执行过滤内容功能
    filterContent();

    // 隐藏滚动加载，防止继续加载更多内容
    removeScrollListeners();
});



// 监听返回按钮的点击事件，刷新页面并恢复滚动监听
const resetButton = document.getElementById('reset-button');
resetButton.addEventListener('click', function() {
    // 刷新页面
    location.reload();
});

// 修改当搜索栏没有输入时，重新启动滚动监听
searchBar.addEventListener('input', function() {
    if (!searchBar.value && !statusFilter.value && !startDate.value && !endDate.value) {
        console.log("搜索条件清空，重新启动滚动监听");
        restartScrollListeners();
    }
});