<template>
    <div :id="chartId" style="width: 100%; height: 100%;"></div>
</template>

<script setup>
import * as echarts from "echarts";
import { ref, defineProps, onMounted, watch, nextTick } from "vue";
import { chartAdaptation } from "@/utils/tools";

const props = defineProps({
    lineData: {
        type: Array,
        default: () => []
    },
    ids: {
        type: String,
        default: ''
    }
});

const chartId = ref(props.ids || `chart-${Math.random().toString(36).substr(2, 9)}`);
let myChart = null;

// 确保DOM渲染完成后再初始化图表
onMounted(() => {
    nextTick(() => {
        initializeChart();
    });
});

// 监听数据变化
watch(() => props.lineData, (newData) => {
    if (myChart && newData && newData.length > 0) {
        updateChart();
    }
}, { deep: true, immediate: true });

const initializeChart = () => {
    const chartDom = document.getElementById(chartId.value);

    if (!chartDom) {
        console.error('图表容器未找到:', chartId.value);
        return;
    }

    try {
        myChart = echarts.init(chartDom);
        updateChart();

        // 自适应
        chartAdaptation(myChart);
        window.addEventListener('resize', () => {
            myChart && myChart.resize();
        });
    } catch (error) {
        console.error('图表初始化失败:', error);
    }
};

const updateChart = () => {
    if (!myChart || !props.lineData || props.lineData.length === 0) {
        console.log('图表或数据未准备好');
        return;
    }

    const option = {
        backgroundColor: "rgba(0,0,0,0)",
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
            formatter: '{b}: {c}%'
        },
        xAxis: {
            type: 'category',
            data: props.lineData.map(item => item.name),
            axisLine: {
                show: false,
                lineStyle: {
                    color: '#999'
                }
            },
            axisLabel: {
                color: '#666',
                // interval: 0, // 显示所有标签
                // rotate: 45 // 如果标签太长可以旋转
            },
            axisTick: {
                alignWithLabel: true
            }
        },
        yAxis: {
            type: 'value',
            min: 0,
            max: 100,
            axisLine: {
                show: false,
                lineStyle: {
                    color: '#999'
                }
            },
            axisLabel: {
                color: '#666',
                formatter: '{value}%'
            },
            splitLine: {
                lineStyle: {
                    color: '#f0f0f0',
                    type: 'dashed'
                }
            }
        },
        series: [
            {
                name: '隐患整改完成率',
                type: 'line',
                data: props.lineData.map(item => item.value),
                smooth: true,
                symbol: 'circle',
                symbolSize: 6,
                itemStyle: {
                    color: '#07c8bd'
                },
                lineStyle: {
                    color: '#07c8bd',
                    width: 3,
                    shadowColor: 'rgba(7, 200, 189, 0.5)',
                    shadowBlur: 10,
                    shadowOffsetY: 5
                },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: 'rgba(7, 200, 189, 0.3)' },
                        { offset: 1, color: 'rgba(7, 200, 189, 0.1)' }
                    ])
                },
                emphasis: {
                    focus: 'series',
                    itemStyle: {
                        borderColor: '#07c8bd',
                        borderWidth: 2,
                        shadowBlur: 10,
                        shadowColor: 'rgba(7, 200, 189, 0.8)'
                    }
                }
            }
        ]
    };

    myChart.setOption(option, true);
    console.log('图表配置已更新');
};
</script>

<style scoped>
/* 确保容器有基本样式 */
#chart-container {
    min-height: 200px;
}
</style>