// http_server_management_console/frontend/js/chart.js
export default {
    methods: {
        initCharts() {
            // 初始化请求图表
            const requestCtx = document.getElementById('request-chart').getContext('2d');
            this.requestChart = new Chart(requestCtx, {
                type: 'line',
                data: {
                    labels: Array.from({length: 12}, (_, i) => `${i*5}秒`),
                    datasets: [{
                        label: '访问量',
                        data: Array.from({length: 12}, () => Math.floor(Math.random() * 100) + 50),
                        borderColor: 'rgba(58, 134, 255, 0.8)',
                        backgroundColor: 'rgba(58, 134, 255, 0.1)',
                        borderWidth: 2,
                        tension: 0.4,
                        fill: true,
                        pointRadius: 0
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        }
                    },
                    scales: {
                        x: {
                            display: false,
                            grid: {
                                display: false
                            }
                        },
                        y: {
                            display: false,
                            grid: {
                                display: false
                            }
                        }
                    }
                }
            });

            // 初始化Goroutine图表
            const goroutineCtx = document.getElementById('goroutine-chart').getContext('2d');
            this.goroutineChart = new Chart(goroutineCtx, {
                type: 'line',
                data: {
                    labels: Array.from({length: 12}, (_, i) => `${i*5}秒`),
                    datasets: [{
                        label: 'Goroutines',
                        data: Array.from({length: 12}, () => Math.floor(Math.random() * 20) + 10),
                        borderColor: 'rgba(131, 56, 236, 0.8)',
                        backgroundColor: 'rgba(131, 56, 236, 0.1)',
                        borderWidth: 2,
                        tension: 0.4,
                        fill: true,
                        pointRadius: 0
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        }
                    },
                    scales: {
                        x: {
                            display: false,
                            grid: {
                                display: false
                            }
                        },
                        y: {
                            display: false,
                            grid: {
                                display: false
                            }
                        }
                    }
                }
            });

            // 模拟实时数据更新
            this.chartInterval = setInterval(() => {
                // 更新请求图表数据
                const requestData = this.requestChart.data.datasets[0].data;
                requestData.shift();
                requestData.push(Math.floor(Math.random() * 30) + requestData[requestData.length - 1] - 15);
                this.requestChart.update();

                // 更新Goroutine图表数据
                const goroutineData = this.goroutineChart.data.datasets[0].data;
                goroutineData.shift();
                goroutineData.push(Math.floor(Math.random() * 5) + goroutineData[goroutineData.length - 1] - 2);
                this.goroutineChart.update();
            }, 5000);
        },
        updateChartColors(theme) {
            let requestColor, goroutineColor;
            
            switch(theme) {
                case 'theme-tech':
                    requestColor = 'rgba(0, 247, 255, 0.8)';
                    goroutineColor = 'rgba(0, 200, 255, 0.8)';
                    break;
                case 'theme-light':
                    requestColor = 'rgba(0, 102, 255, 0.8)';
                    goroutineColor = 'rgba(98, 0, 238, 0.8)';
                    break;
                default: // dark theme
                    requestColor = 'rgba(58, 134, 255, 0.8)';
                    goroutineColor = 'rgba(131, 56, 236, 0.8)';
            }

            this.requestChart.data.datasets[0].borderColor = requestColor;
            this.requestChart.data.datasets[0].backgroundColor = requestColor.replace('0.8', '0.1');
            this.requestChart.update();

            this.goroutineChart.data.datasets[0].borderColor = goroutineColor;
            this.goroutineChart.data.datasets[0].backgroundColor = goroutineColor.replace('0.8', '0.1');
            this.goroutineChart.update();
        }
    },
    mounted() {
        this.initCharts();
    },
    beforeDestroy() {
        if (this.chartInterval) {
            clearInterval(this.chartInterval);
        }
    }
}