// main.js

// 当整个页面的HTML内容加载完成后，执行此函数
document.addEventListener('DOMContentLoaded', () => {
    // 获取页面上的关键元素
    const textInput = document.getElementById('text-input');
    const generateBtn = document.getElementById('generate-btn');
    const qrcodeContainer = document.getElementById('qrcode-container');

    // 为“生成二维码”按钮添加点击事件监听器
    generateBtn.addEventListener('click', () => {
        // 获取输入框中的文本，并用 trim() 清除前后的空白字符
        const text = textInput.value.trim();

        // 在生成新的二维码之前，清空之前可能存在的旧二维码
        qrcodeContainer.innerHTML = '';

        // 如果文本为空，则不执行任何操作
        if (!text) {
            console.log('输入内容为空，已中止生成。');
            return;
        }

        // 定义每个二维码的最大字符数
        const chunkSize = 1000;
        // 计算需要生成多少个二维码
        const totalChunks = Math.ceil(text.length / chunkSize);

        console.log(`总字符数: ${text.length}，将生成 ${totalChunks} 个二维码。`);

        // 循环处理每一块文本
        for (let i = 0; i < totalChunks; i++) {
            // 计算当前块的起始和结束位置
            const start = i * chunkSize;
            const end = start + chunkSize;
            // 从总文本中截取当前块的文本
            const chunk = text.substring(start, end);

            // --- 创建包裹单个二维码及其标签的容器 ---
            const itemDiv = document.createElement('div');
            itemDiv.className = 'qrcode-item';

            // --- 创建并添加序号标签 ---
            const label = document.createElement('p');
            label.className = 'qrcode-label';
            // 如果总数大于1，则显示 "二维码 x/y"，否则只显示 "二维码"
            label.textContent = totalChunks > 1 ? `二维码 ${i + 1}/${totalChunks}` : '二维码';
            itemDiv.appendChild(label);

            // --- 创建用于生成二维码的占位符元素 ---
            const qrcodeDiv = document.createElement('div');
            // 给这个div一个唯一的ID，虽然qrcodejs也可以直接接收元素对象
            qrcodeDiv.id = `qrcode-${i}`;
            itemDiv.appendChild(qrcodeDiv);

            // --- 将完整的二维码项（标签+占位符）添加到主容器中 ---
            qrcodeContainer.appendChild(itemDiv);

            // --- 使用 qrcode.js 库生成二维码 ---
            // 实例化 QRCode 对象
            // 第一个参数是二维码要渲染到的DOM元素
            // 第二个参数是配置对象
            new QRCode(qrcodeDiv, {
                text: chunk, // 当前块的文本内容
                width: 400, // 二维码宽度
                height: 400, // 二维码高度
                colorDark: '#000000', // 二维码颜色
                colorLight: '#ffffff', // 二维码背景色
                correctLevel: QRCode.CorrectLevel.H, // 纠错级别，H是最高级
            });

            console.log(`已为第 ${i + 1} 块内容生成二维码。`);
        }
    });
});