// 使用 jQuery 初始化图表
var populationChart = echarts.init($('#populationChart')[0]);
var urbanizationChart = echarts.init($('#urbanizationChart')[0]);

// 显示加载中
function showLoading(chart, messageElement) {
    chart.showLoading();
}

// 隐藏加载中
function hideLoading(chart) {
    chart.hideLoading();
}

// 显示错误信息
function showError(messageElement, message) {
    $(messageElement).text('错误: ' + message);
    console.error(message);
}

// 加载人口数据图表
function loadPopulationChartData() {
    showLoading(populationChart, $('#populationMessage')[0]);
    var year = $('#yearSelect').val();
    $.getJSON('/bigscreen/population/chart/' + year)
        .done(function(data) {
            populationChart.setOption(data);
        })
        .fail(function(jqXHR, textStatus, errorThrown) {
            showError($('#populationMessage')[0], errorThrown || '网络响应异常');
        })
        .always(function() {
            hideLoading(populationChart);
        });
}

// 加载城镇化率图表
function loadUrbanizationRateChartData() {
    showLoading(urbanizationChart, $('#urbanizationMessage')[0]);
    $.getJSON('/bigscreen/population/urbanization')
        .done(function(data) {
            urbanizationChart.setOption(data);
        })
        .fail(function(jqXHR, textStatus, errorThrown) {
            showError($('#urbanizationMessage')[0], errorThrown || '网络响应异常');
        })
        .always(function() {
            hideLoading(urbanizationChart);
        });
}

// 页面加载完成后自动加载图表
$(document).ready(function() {
    // 绑定标签页切换事件
    $('.tab').on('click', function() {
        $('.tab').removeClass('active');
        $('.tab-content').removeClass('active');
        $(this).addClass('active');
        $('#' + $(this).data('tab') + '-tab').addClass('active');
        populationChart.resize();
        urbanizationChart.resize();
    });

    // 绑定按钮点击事件
    $('#loadPopulationChart').on('click', loadPopulationChartData);
    $('#loadUrbanizationChart').on('click', loadUrbanizationRateChartData);

    // 添加年份选择器变化事件监听
    $('#yearSelect').on('change', loadPopulationChartData);

    // 自动加载图表
    loadPopulationChartData();
    loadUrbanizationRateChartData();
});

// 窗口大小变化时调整图表
$(window).on('resize', function() {
    populationChart.resize();
    urbanizationChart.resize();
});