document.addEventListener('DOMContentLoaded', function() {
    const resizeHandle = document.querySelector('.resize-handle');
    const visualizationContainer = document.querySelector('.visualization-container');
    const measureDetails = document.querySelector('.measure-details');
    const mainContent = document.querySelector('.main-content');
    
    let isResizing = false;
    let startX;
    let startWidth;
    let startFlex;
    
    resizeHandle.addEventListener('mousedown', function(e) {
        isResizing = true;
        startX = e.pageX;
        startWidth = visualizationContainer.offsetWidth;
        startFlex = parseFloat(getComputedStyle(visualizationContainer).flex);
        
        document.body.style.cursor = 'ew-resize';
        document.body.style.userSelect = 'none';
    });
    
    document.addEventListener('mousemove', function(e) {
        if (!isResizing) return;
        
        const deltaX = e.pageX - startX;
        const containerWidth = mainContent.offsetWidth;
        const newWidth = startWidth + deltaX;
        const widthPercent = (newWidth / containerWidth) * 100;
        
        // 确保宽度在限制范围内
        if (widthPercent >= 60 && widthPercent <= 80) {
            visualizationContainer.style.flex = 'none';
            visualizationContainer.style.width = `${widthPercent}%`;
            measureDetails.style.width = `${100 - widthPercent}%`;
        }
    });
    
    document.addEventListener('mouseup', function() {
        isResizing = false;
        document.body.style.cursor = '';
        document.body.style.userSelect = '';
        
        // 保存当前宽度比例到 localStorage
        const widthPercent = (visualizationContainer.offsetWidth / mainContent.offsetWidth) * 100;
        localStorage.setItem('visualizationWidth', widthPercent);
    });
    
    // 恢复保存的宽度比例
    const savedWidth = localStorage.getItem('visualizationWidth');
    if (savedWidth) {
        const widthPercent = parseFloat(savedWidth);
        if (widthPercent >= 60 && widthPercent <= 80) {
            visualizationContainer.style.flex = 'none';
            visualizationContainer.style.width = `${widthPercent}%`;
            measureDetails.style.width = `${100 - widthPercent}%`;
        }
    }
});