<template>
    <div>
        <div id="main"></div>
    </div>
</template>
<style scoped>
#main {
    width: 1366px;
    height: calc(100vh - 180px);
}
</style>
<script setup>
import { defineProps, ref, watch, onMounted } from 'vue';
import * as echarts from 'echarts';

// 定义props
const props = defineProps({
    CategoryData: {
        type: Array,
        default: []
    }
});

let myChart = null; // 图表实例
const date = ref([]);
const data = ref([]);

// 初始化图表
const initChart = () => {
    // 确保DOM已挂载
    const chartDom = document.getElementById('main');
    if (!chartDom) {
        console.error('图表DOM元素未找到');
        return;
    }
    
    try {
        myChart = echarts.init(chartDom);
        updateChart();
    } catch (error) {
        console.error('图表初始化失败:', error);
    }
};

// 更新图表数据和配置
const updateChart = () => {
    if (!myChart) return;
    
    // 如果没有数据，显示空图表
    if (!Array.isArray(props.CategoryData) || props.CategoryData.length === 0) {
        // 使用空数据配置
        const emptyOption = {
            backgroundColor: 'transparent',
            title: {
                left: 'center',
                text: '暂无数据',
                textStyle: {
                    color: '#fff',
                    fontSize: 16
                }
            },
            xAxis: {
                type: 'category',
                data: [],
                axisLabel: { color: '#fff' }
            },
            yAxis: {
                type: 'value',
                axisLabel: { color: '#fff' }
            },
            series: []
        };
        
        myChart.setOption(emptyOption);
        return;
    }
    
    // 处理实际数据（重点！！）
    date.value = [];
    data.value = [];
    
    props.CategoryData.forEach(v => {
        date.value.push(v.ts);
        data.value.push(v.val);
    });
    
    // 设置图表配置
    const option = {
        tooltip: {
            trigger: 'axis',
            position: function (pt) {
                return [pt[0], '10%'];
            }
        },
        title: {
            left: 'center',
            text: '历史数据图表'
        },
        toolbox: {
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                restore: {},
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: date.value
        },
        yAxis: {
            type: 'value',
            boundaryGap: [0, '100%']
        },
        dataZoom: [
            {
                type: 'inside',
                start: 0,
                end: 10
            },
            {
                start: 0,
                end: 10
            }
        ],
        series: [
            {
                name: '数据值',
                type: 'line',
                symbol: 'none',
                sampling: 'lttb',
                itemStyle: {
                    color: 'rgb(255, 70, 131)'
                },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgb(255, 158, 68)'
                        },
                        {
                            offset: 1,
                            color: 'rgb(255, 70, 131)'
                        }
                    ])
                },
                data: data.value
            }
        ]
    };

    try {
        myChart.setOption(option);
    } catch (error) {
        console.error('图表更新失败:', error);
    }
};

// 监听props变化
watch(
    () => props.CategoryData,
    () => {
        updateChart();
    },
    { deep: true }
);

// 组件挂载后初始化图表
onMounted(() => {
    initChart();
});
</script>