<template>
    <div ref="chartDom" class="line-chart"></div>
</template>

<script setup>
import { onMounted, ref, watch, nextTick, onUpdated } from "vue";
import * as echarts from "echarts";
import { barOption } from "./chartOption.js";
import { deepClone } from "@/common/commonFun";

const props = defineProps({
    chartData: {
        type: Object,
        default: () => ({
            categories: [],
            values: [],
        }),
    },
    yAxisFormatter: {
        type: String,
        default: "{value}%", // 默认百分比格式
    },
});

const chartDom = ref(null);
let myChart = null;

const initData = () => {
    const newOption = deepClone(barOption);

    // 如果有传入数据，使用传入的数据
    if (props.chartData && props.chartData.categories && props.chartData.categories.length > 0) {
        newOption.xAxis.data = props.chartData.categories;
        newOption.series[0].data = props.chartData.values;

        const dataLength = props.chartData.categories.length;
        if (dataLength > 6) {
            // 调整 grid 的 bottom，为 dataZoom 留出空间
            newOption.grid.bottom = 20;
            // 使用滚动时，不需要旋转标签
            newOption.xAxis.axisLabel.rotate = 20;

            // 添加 dataZoom 配置，实现 x 轴滚动
            newOption.dataZoom = [
                {
                    type: 'slider',
                    show: true,
                    xAxisIndex: [0],
                    start: 0,
                    end: Math.min(100, (6 / dataLength) * 100), // 初始显示前 6 个或更少
                    height: 0,
                    bottom: 10,
                    showDetail: false,
                },
                {
                    type: 'inside',
                    xAxisIndex: [0],
                    start: 0,
                    end: Math.min(100, (6 / dataLength) * 100),
                },
            ];
        } else {
            // 移除 dataZoom
            delete newOption.dataZoom;
            // 数据项较少时，恢复默认的 bottom 值
            newOption.grid.bottom = 10;
            // 数据项少时，可以旋转标签以避免重叠
            newOption.xAxis.axisLabel.rotate = dataLength >= 6 ? 25 : 0;
        }
    } else {
        // 数据为空时，清空图表
        newOption.xAxis.data = [];
        newOption.series[0].data = [];
        // 恢复默认配置
        newOption.grid.bottom = 10;
        newOption.xAxis.axisLabel.rotate = 0;
        // 移除 dataZoom
        delete newOption.dataZoom;
    }

    // 更新 yAxis 的 formatter
    newOption.yAxis.axisLabel.formatter = props.yAxisFormatter;

    // 使用 notMerge: true 完全替换配置，确保切换时正确更新
    myChart.setOption(newOption, { notMerge: true });
};

// 监听数据变化，更新图表
watch(
    () => [props.chartData, props.yAxisFormatter],
    () => {
        if (myChart) {
            nextTick(() => {
                initData();
                // 确保图表正确渲染
                myChart.resize();
            });
        }
    },
    { deep: true }
);

onMounted(() => {
    myChart = echarts.init(chartDom.value);
    initData();
});

// 组件更新后，确保图表正确渲染
onUpdated(() => {
    if (myChart && chartDom.value) {
        nextTick(() => {
            myChart.resize();
        });
    }
});
</script>

<style lang="scss" scoped>
.line-chart {
    width: 100%;
    height: 100%;
}
</style>
