document.addEventListener('DOMContentLoaded', function() {
    // 市场趋势图表
    const marketTrendChart = echarts.init(document.getElementById('marketTrendChart'));
    marketTrendChart.setOption({
        title: {
            text: '数据要素市场规模趋势',
            left: 'center'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            bottom: '5%'
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '15%',
            top: '15%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: ['2020', '2021', '2022', '2023', '2024E']
        },
        yAxis: {
            type: 'value',
            name: '亿元'
        },
        series: [
            {
                name: '数据交易规模',
                type: 'bar',
                data: [200, 400, 600, 800, 1000],
                itemStyle: {
                    color: '#0d6efd'
                }
            },
            {
                name: '数据融资规模',
                type: 'line',
                data: [2, 4, 6, 8, 10],
                itemStyle: {
                    color: '#198754'
                }
            }
        ]
    });

    // 监听窗口大小变化
    window.addEventListener('resize', function() {
        marketTrendChart.resize();
    });

    // 展示类型切换
    const displayTabs = document.querySelectorAll('.display-tab');
    const displayContents = document.querySelectorAll('.display-content > div');
    
    displayTabs.forEach((tab, index) => {
        tab.addEventListener('click', () => {
            // 更新标签状态
            document.querySelector('.display-tab.active').classList.remove('active');
            tab.classList.add('active');
            
            // 更新内容显示
            document.querySelector('.display-content > div.active').classList.remove('active');
            displayContents[index].classList.add('active');
        });
    });

    // 图片放大功能
    const archImage = document.querySelector('.arch-image');
    const imageModal = document.querySelector('.image-modal');
    const modalImage = imageModal.querySelector('img');
    const modalClose = imageModal.querySelector('.image-modal-close');

    if (archImage) {
        archImage.addEventListener('click', () => {
            const imgSrc = archImage.querySelector('img').src;
            modalImage.src = imgSrc;
            imageModal.classList.add('show');
            document.body.style.overflow = 'hidden';  // 防止背景滚动
        });
    }

    // 点击关闭按钮关闭
    if (modalClose) {
        modalClose.addEventListener('click', () => {
            imageModal.classList.remove('show');
            document.body.style.overflow = '';
        });
    }

    // 点击背景关闭
    if (imageModal) {
        imageModal.addEventListener('click', (e) => {
            if (e.target === imageModal) {
                modalClose.click();
            }
        });
    }

    // ESC键关闭
    document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape' && imageModal.classList.contains('show')) {
            modalClose.click();
        }
    });
});