// 拖动浮动窗口功能
const floatingWindow = document.getElementById('floatingWindow');
const header = document.querySelector('.header');
const draggable = document.querySelector('.draggable');

let isDragging = false;
let offsetX, offsetY;

// 开始拖动
draggable.addEventListener('mousedown', (e) => {
    isDragging = true;
    offsetX = e.clientX - floatingWindow.getBoundingClientRect().left;
    offsetY = e.clientY - floatingWindow.getBoundingClientRect().top;
    document.addEventListener('mousemove', onMouseMove);
    document.addEventListener('mouseup', () => {
        isDragging = false;
        document.removeEventListener('mousemove', onMouseMove);
    });
});

// 拖动中
function onMouseMove(e) {
    if (isDragging) {
        floatingWindow.style.left = e.clientX - offsetX + 'px';
        floatingWindow.style.top = e.clientY - offsetY + 'px';
    }
}

// 动态生成新条目
function createEntry(nodeName) {
    const entry = document.createElement('div');
    entry.classList.add('entry');

    const statusDot = document.createElement('div');
    statusDot.classList.add('status-dot');

    const nodeNameElement = document.createElement('div');
    nodeNameElement.classList.add('node-name');
    nodeNameElement.textContent = nodeName;

    const statusData = document.createElement('div');
    statusData.classList.add('status-data');
    statusData.textContent = '流式数据...';

    entry.appendChild(statusDot);
    entry.appendChild(nodeNameElement);
    entry.appendChild(statusData);

    return entry;
}
function cleanString(str) {
    // 去除所有空白字符（包括中间的）
    return str.replace(/\s+/g, '');
}
// 更新条目内容
function updateEntry(nodeName, statusData) {
    const contentDiv = document.getElementById('entry-content');
    const entries = [...contentDiv.children];
    entries.forEach(entry => {
        entry.style.display = 'none';
    });
    // 只显示前8个条目
    const displayEntries = entries.slice(0, 8);
    displayEntries.forEach(entry => {
        entry.style.display = ''; // 恢复默认显示
    });
    // 查找对应的条目
    for (let entry of entries) {
        const nodeNameElement = entry.querySelector('.node-name');
        if (nodeNameElement.textContent === nodeName) {
            let statusDataElement = entry.querySelector('.status-data');
            // 如果内容和要更新的内容一样,跳过
            if (!statusData)return;
            if (cleanString(statusData) === cleanString(statusDataElement.textContent)) {
                return;
            }

            // 将元素滚动到最底部
            const parent = entry.parentElement; // 获取条目所在的父容器
            parent.appendChild(entry); // 移动到父容器末尾（自动移除原有位置）
            const statusDot = entry.querySelector('.status-dot');
            statusDataElement = entry.querySelector('.status-data');
            // 更新状态圆点颜色（根据状态来决定颜色，可以根据后端发送的状态修改）
            statusDot.style.backgroundColor = 'green';  // 假设状态是正常的，暂时设置为绿色

            // 更新流式数据
            statusDataElement.textContent = statusData;
            statusDataElement.scrollLeft = statusDataElement.scrollWidth - statusDataElement.clientWidth
            contentDiv.scrollTop = contentDiv.scrollHeight;
            return;  // 找到对应的条目后退出
        }
    }


    // 如果没有找到对应条目，创建一个新的条目并添加到页面
    contentDiv.appendChild(createEntry(nodeName));
    updateEntry(nodeName, statusData); // 立即更新新条目
}

// 模拟后端数据流
// const socket = new WebSocket('ws://localhost:8080');  // 连接后端 WebSocket