<template>
    <div class="chart-container">
        <div id="mainzftdj" class="chart" ref="chartRef"></div>
        <div v-if="loading" class="loading-overlay">
            <div class="loading-spinner"></div>
            <span>加载中...</span>
        </div>
    </div>
</template>

<script>
import * as echarts from "echarts";
import { getdjZft } from "@/api/optimization/initialization";
import { text } from "d3";

export default {
    name: "HistogramGraph",
    props: {
        jh: {
            type: String,
            default: "",
        },
        jhs: {
            type: String,
            default: ''
        },
        // 美化配置选项
        theme: {
            type: String,
            default: "modern", // modern, elegant, vibrant
            validator: value => ["modern", "elegant", "vibrant"].includes(value)
        }
    },
    data() {
        return {
            mockData: {},
            myChart: null,
            initRetryCount: 0,
            maxRetryCount: 5,
            resizeObserver: null,
            loading: false,
            debounceTimer: null,
            lastStackedAreas: null,
            lastChartConfig: null,
            lastXAxisLabels: null,
            lastDepthIntervals: null,
            currentGraphicElements: [],
        };
    },
    computed: {
        // 根据主题获取颜色配置
        colorScheme() {
            const schemes = {
                modern: {
                    primary: "#3B82F6",
                    secondary: "#10B981",
                    accent: "#F59E0B",
                    background: "#F8FAFC",
                    text: "#1F2937",
                    border: "#E5E7EB",
                    gradient: {
                        start: "#3B82F6",
                        end: "#1D4ED8"
                    }
                },
                elegant: {
                    primary: "#6366F1",
                    secondary: "#8B5CF6",
                    accent: "#EC4899",
                    background: "#FAFAFA",
                    text: "#374151",
                    border: "#D1D5DB",
                    gradient: {
                        start: "#6366F1",
                        end: "#4F46E5"
                    }
                },
                vibrant: {
                    primary: "#EF4444",
                    secondary: "#06B6D4",
                    accent: "#F97316",
                    background: "#FEFEFE",
                    text: "#111827",
                    border: "#F3F4F6",
                    gradient: {
                        start: "#EF4444",
                        end: "#DC2626"
                    }
                }
            };
            return schemes[this.theme];
        }
    },
    watch: {
        jh: {
            handler(newVal) {
                // 不自动刷新，等待父级触发 loadData
            },
            immediate: false
        }
    },
    mounted() {
        // 初始化空图表，不拉数据；等待父组件触发 loadData
        this.initChart();
        this.setupEventListeners();
    },
    beforeDestroy() {
        this.cleanup();
    },
    methods: {
        // 初始化图表
        async initChart() {
            try {
                this.loading = true;

                const chartDom = this.$refs.chartRef;
                if (!chartDom) {
                    throw new Error("未找到图表容器 DOM");
                }

                this.setChartDimensions(chartDom);

                // 重试机制优化
                if (this.shouldRetry()) {
                    this.scheduleRetry();
                    return;
                }

                this.resetRetryCount();
                this.disposeChart();
                this.createChart(chartDom);

                const mockData = await this.getList();
                if (!this.hasValidData(mockData)) {
                    this.renderEmpty(chartDom);
                    return;
                }

                await this.renderRealData(mockData);

            } catch (error) {
                console.error("图表初始化失败:", error);
                this.handleError(error);
            } finally {
                this.loading = false;
            }
        },

        // 设置图表尺寸
        setChartDimensions(chartDom) {
            const viewportWidth = window.innerWidth;
            const viewportHeight = window.innerHeight;
            const availableHeight = viewportHeight - 120;
            const availableWidth = viewportWidth - 80;

            chartDom.style.width = `${availableWidth}px`;
            chartDom.style.height = `${availableHeight}px`;
            chartDom.offsetHeight; // 强制重排
        },

        // 检查是否需要重试
        shouldRetry() {
            const viewportWidth = window.innerWidth;
            const viewportHeight = window.innerHeight;
            const availableHeight = viewportHeight - 120;
            const availableWidth = viewportWidth - 80;
            return (availableWidth <= 0 || availableHeight <= 0) && this.initRetryCount < this.maxRetryCount;
        },

        // 安排重试
        scheduleRetry() {
            this.initRetryCount++;
            setTimeout(() => this.initChart(), 500);
        },

        // 重置重试计数
        resetRetryCount() {
            this.initRetryCount = 0;
        },

        // 销毁图表
        disposeChart() {
            if (this.myChart) {
                this.myChart.dispose();
            }
        },

        // 创建图表实例
        createChart(chartDom) {
            this.myChart = echarts.init(chartDom, null, {
                renderer: 'canvas',
                useDirtyRect: true
            });
        },

        // 检查数据有效性
        hasValidData(mockData) {
            return mockData &&
                mockData.wellData &&
                mockData.wellData.depthLine &&
                mockData.wellData.depthLine.length > 0;
        },

        // 设置事件监听器
        setupEventListeners() {
            window.addEventListener("resize", this.handleResize);
            this.observeParentResize();
        },

        // 清理资源
        cleanup() {
            window.removeEventListener("resize", this.handleResize);
            if (this.myChart) {
                this.myChart.dispose();
            }
            if (this.resizeObserver) {
                this.resizeObserver.disconnect();
            }
            if (this.debounceTimer) {
                clearTimeout(this.debounceTimer);
            }
        },

        // 观察父容器大小变化
        observeParentResize() {
            const parentDom = this.$refs.chartRef?.parentElement;
            if (parentDom && window.ResizeObserver) {
                this.resizeObserver = new ResizeObserver(() => {
                    this.debouncedResize();
                });
                this.resizeObserver.observe(parentDom);
            }
        },

        // 获取数据
        async getList() {
            try {
                const res = await getdjZft({
                    jhs: `${this.jh},${this.jhs}`
                });
                this.mockData = res?.mockData || {};
                return this.mockData;
            } catch (error) {
                console.error("获取数据失败:", error);
                throw error;
            }
        },
        // 供父组件在切换到本tab时调用
        async loadData() {
            await this.initChart();
        },

        // 处理窗口大小变化
        handleResize() {
            this.debouncedResize();
        },

        // 防抖处理resize
        debouncedResize() {
            if (this.debounceTimer) {
                clearTimeout(this.debounceTimer);
            }
            this.debounceTimer = setTimeout(() => {
                this.performResize();
            }, 200);
        },

        // 执行resize操作
        performResize() {
            if (this.myChart) {
                const chartDom = this.$refs.chartRef;
                if (chartDom) {
                    this.setChartDimensions(chartDom);
                }
                this.myChart.resize();
                if (this.lastStackedAreas && this.lastChartConfig && this.lastXAxisLabels) {
                    this.drawStratumLabels(this.lastStackedAreas, this.lastChartConfig, this.lastXAxisLabels);
                }
                if (this.lastDepthIntervals && this.lastXAxisLabels && this.lastChartConfig) {
                    this.drawJhSeparators(this.lastDepthIntervals, this.lastXAxisLabels, this.lastChartConfig);
                }
            }
        },

        // 刷新图表
        async refreshChart() {
            if (this.myChart) {
                await this.initChart();
            }
        },

        // 渲染真实数据
        async renderRealData(mockData) {
            try {
                const { wellData } = mockData;
                console.log(wellData, 'wellData');
                const xAxisLabels = wellData.depthLine.map((point) => point.x);

                // 优化区域系列处理
                const areaSeries = await this.processAreaSeries(wellData, xAxisLabels);

                const option = {
                    ...this.getDefaultChartOption(),
                    xAxis: this.createXAxis(xAxisLabels),
                    yAxis: this.createYAxis(mockData.chartConfig),
                    series: this.createSeries(wellData, areaSeries)
                };

                this.myChart.setOption(option, true);

                // 确保图表完全渲染后再resize
                this.$nextTick(() => {
                    this.myChart.resize();
                    this.lastStackedAreas = wellData.stackedAreas;
                    this.lastChartConfig = mockData.chartConfig;
                    this.lastXAxisLabels = xAxisLabels;
                    this.drawStratumLabels(this.lastStackedAreas, this.lastChartConfig, this.lastXAxisLabels);
                    this.lastDepthIntervals = wellData.depthIntervals || [];
                    this.drawJhSeparators(this.lastDepthIntervals, this.lastXAxisLabels, this.lastChartConfig);
                });

            } catch (error) {
                console.error("渲染数据失败:", error);
                this.handleError(error);
            }
        },

        // 获取默认图表配置
        getDefaultChartOption() {
            const colors = this.colorScheme;
            return {
                title: { text: "", subtext: "" },
                aria: { enabled: false },
                backgroundColor: colors.background,
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "cross",
                        label: { backgroundColor: colors.primary },
                        crossStyle: { color: colors.border }
                    },
                    backgroundColor: 'rgba(255,255,255,0.95)',
                    borderColor: colors.border,
                    borderWidth: 1,
                    textStyle: { color: colors.text },
                    extraCssText: 'box-shadow: 0 4px 12px rgba(0,0,0,0.15); border-radius: 8px;',
                    formatter: (params) => {
                        if (!params || params.length === 0) return '';

                        const dataIndex = params[0].dataIndex;
                        const depthInterval = this.mockData?.wellData?.depthIntervals?.[dataIndex];

                        if (!depthInterval) {
                            // 如果没有depthInterval数据，使用默认格式
                            let result = `<div style="font-weight: 600; margin-bottom: 8px; color: ${colors.primary};">${params[0].axisValue}</div>`;
                            params.forEach(param => {
                                const color = param.color;
                                result += `<div style="margin: 4px 0;">
                                    <span style="display: inline-block; width: 10px; height: 10px; background-color: ${color}; border-radius: 50%; margin-right: 8px;"></span>
                                    <span style="font-weight: 500;">${param.seriesName}:</span>
                                    <span style="margin-left: 8px; font-weight: 600;">${param.value}</span>
                                </div>`;
                            });
                            return result;
                        }

                        // 显示井号信息
                        let result = `<div style="font-weight: 600; margin-bottom: 8px; color: ${colors.primary};">${depthInterval.jh || depthInterval.x}</div>`;

                        // 显示详细信息
                        result += `<div style="margin: 4px 0; padding: 4px 0; border-top: 1px solid ${colors.border};">
                            <div style="margin: 2px 0;"><span style="font-weight: 500;">型号:</span> <span style="margin-left: 8px; font-weight: 600;">${depthInterval.x || '-'}</span></div>
                            <div style="margin: 2px 0;"><span style="font-weight: 500;">尺寸:</span> <span style="margin-left: 8px; font-weight: 600;">${depthInterval.ztcc || '-'}</span></div>
                            <div style="margin: 2px 0;"><span style="font-weight: 500;">进尺:</span> <span style="margin-left: 8px; font-weight: 600;">${depthInterval.jc || '-'}</span></div>
                            <div style="margin: 2px 0;"><span style="font-weight: 500;">深度区间:</span> <span style="margin-left: 8px; font-weight: 600;">${depthInterval.interval || '-'}</span></div>
                        </div>`;

                        // 只显示非地层信息的系列数据（过滤掉地层相关的系列）
                        // params.forEach(param => {
                        //     // 过滤掉地层相关的系列名称
                        //     if (param.seriesName && !param.seriesName.includes('地层') && param.seriesName !== '占位') {
                        //         const color = param.color;
                        //         result += `<div style="margin: 4px 0;">
                        //             <span style="display: inline-block; width: 10px; height: 10px; background-color: ${color}; border-radius: 50%; margin-right: 8px;"></span>
                        //             <span style="font-weight: 500;">${param.seriesName}:</span>
                        //             <span style="margin-left: 8px; font-weight: 600;">${param.value}</span>
                        //         </div>`;
                        //     }
                        // });

                        return result;
                    }
                },
                grid: {
                    top: 10,
                    left: "4%",
                    right: "4%",
                    bottom: "10%",
                    containLabel: true,
                    show: false,
                },
                animation: true,
                animationDuration: 1500,
                animationEasing: 'cubicOut',
                animationDelay: function (idx) {
                    return idx * 100;
                }
            };
        },

        // 处理区域系列
        async processAreaSeries(wellData, xAxisLabels) {
            const stackedAreas = wellData?.stackedAreas || [];

            // 兼容旧格式：数组（所有井已按全局顺序平铺）
            if (Array.isArray(stackedAreas)) {
                return await Promise.all(
                    stackedAreas
                        .filter(area => area.svg !== null)
                        .map(async (area) => {
                            let areaStyle = { opacity: 0.6 };
                            if (area.svg) {
                                try {
                                    const svgImage = await this.createSvgImage(area.svg);
                                    areaStyle.color = { image: svgImage, repeat: "repeat" };
                                } catch (error) {
                                    console.error('SVG转换失败:', error);
                                }
                            }
                            return {
                                name: area.name,
                                type: "line",
                                xAxisIndex: 1,
                                z: -1,
                                stack: "总量",
                                symbol: "none",
                                showSymbol: false,
                                areaStyle: areaStyle,
                                lineStyle: { width: 0 },
                                data: area.points.map((point) => (point && point.y2 != null) ? point.y2 : point.y),
                            };
                        })
                );
            }

            // 新格式：对象，key 为井号，每口井内是该井的地层数组
            const depthIntervals = wellData?.depthIntervals || [];
            const totalLen = Array.isArray(xAxisLabels) ? xAxisLabels.length : 0;

            // 计算每口井在全局 x 轴中的起止索引（与 drawJhSeparators 相同的分段逻辑）
            const segments = [];
            let currentJh = null;
            let currentMin = Infinity;
            let currentMax = -Infinity;
            let started = false;
            for (let i = 0; i < depthIntervals.length; i++) {
                const { jh } = depthIntervals[i] || {};
                const idx = i;
                if (!started) {
                    currentJh = jh;
                    currentMin = currentMax = idx;
                    started = true;
                    continue;
                }
                if (jh === currentJh) {
                    currentMin = Math.min(currentMin, idx);
                    currentMax = Math.max(currentMax, idx);
                } else {
                    segments.push({ jh: currentJh, startIdx: Math.min(currentMin, currentMax), endIdx: Math.max(currentMin, currentMax) });
                    currentJh = jh;
                    currentMin = currentMax = idx;
                }
            }
            if (started) {
                segments.push({ jh: currentJh, startIdx: Math.min(currentMin, currentMax), endIdx: Math.max(currentMin, currentMax) });
            }

            const buildNullArray = (len) => Array.from({ length: len }, () => null);

            const results = [];
            for (const [jh, layers] of Object.entries(stackedAreas)) {
                const seg = segments.find(s => s.jh === jh);
                if (!seg) continue;
                const segLen = seg.endIdx - seg.startIdx + 1;

                for (const area of (layers || [])) {
                    if (area == null) continue;
                    let areaStyle = { opacity: 0.6 };
                    if (area.svg) {
                        try {
                            const svgImage = await this.createSvgImage(area.svg);
                            areaStyle.color = { image: svgImage, repeat: "repeat" };
                        } catch (error) {
                            console.error('SVG转换失败:', error);
                        }
                    }

                    const data = buildNullArray(totalLen);
                    const ys = (area.points || []).map(p => (p && p.y2 != null) ? p.y2 : p.y);
                    for (let i = 0; i < segLen && i < ys.length; i++) {
                        data[seg.startIdx + i] = ys[i];
                    }

                    results.push({
                        name: area.name,
                        type: "line",
                        xAxisIndex: 1,
                        z: -1,
                        stack: "总量",
                        symbol: "none",
                        showSymbol: false,
                        areaStyle: areaStyle,
                        lineStyle: { width: 0 },
                        data
                    });
                }
            }

            return results;
        },

        // 创建X轴配置
        createXAxis(xAxisLabels) {
            const colors = this.colorScheme;
            return [
                {
                    type: "category",
                    boundaryGap: true,
                    position: "top",
                    data: xAxisLabels,
                    axisLabel: {
                        interval: 0,
                        rotate: 0,
                        margin: 12,
                        align: "center",
                        fontSize: 13,
                        color: colors.text,
                        fontWeight: 500
                    },
                    axisTick: {
                        alignWithLabel: true,
                        length: 6,
                        lineStyle: { color: colors.border }
                    },
                    splitLine: { show: false },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: colors.border,
                            width: 2
                        }
                    }
                },
                {
                    type: "category",
                    boundaryGap: false,
                    position: "top",
                    show: false,
                    data: xAxisLabels
                },
            ];
        },

        // 创建Y轴配置
        createYAxis(chartConfig) {
            const colors = this.colorScheme;
            return [
                {
                    type: "value",
                    name: "井深(m)",
                    nameTextStyle: {
                        color: colors.text,
                        fontSize: 13,
                        fontWeight: 600,
                        padding: [0, 0, 0, 8]
                    },
                    min: chartConfig.yAxis.min,
                    max: chartConfig.yAxis.max,
                    interval: chartConfig.yAxis.interval,
                    inverse: true,
                    axisLabel: {
                        formatter: "{value}",
                        fontSize: 12,
                        color: colors.text,
                        fontWeight: 500
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: colors.border,
                            type: 'dashed',
                            opacity: 0.3
                        }
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: colors.border,
                            width: 2
                        }
                    },
                    axisTick: {
                        show: true,
                        lineStyle: { color: colors.border }
                    }
                },
                {
                    type: "value",
                    name: "深度(m)",
                    nameTextStyle: {
                        color: colors.text,
                        fontSize: 13,
                        fontWeight: 600,
                        padding: [0, 8, 0, 0]
                    },
                    min: chartConfig.yAxis2.min,
                    max: chartConfig.yAxis2.max,
                    interval: chartConfig.yAxis2.interval,
                    position: "right",
                    axisLabel: {
                        formatter: "{value}",
                        fontSize: 12,
                        color: colors.text,
                        fontWeight: 500
                    },
                    splitLine: { show: false },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: colors.border,
                            width: 2
                        }
                    },
                    axisTick: {
                        show: true,
                        lineStyle: { color: colors.border }
                    }
                },
            ];
        },

        // 创建系列配置
        createSeries(wellData, areaSeries) {
            const colors = this.colorScheme;
            return [
                {
                    name: "井深数据",
                    type: "line",
                    yAxisIndex: 1,
                    symbol: "circle",
                    symbolSize: 10,
                    itemStyle: {
                        color: colors.accent,
                        borderColor: '#fff',
                        borderWidth: 3,
                        shadowColor: 'rgba(0,0,0,0.2)',
                        shadowBlur: 8
                    },
                    lineStyle: {
                        color: colors.accent,
                        width: 3,
                        type: 'solid',
                        shadowColor: 'rgba(0,0,0,0.1)',
                        shadowBlur: 4
                    },
                    label: {
                        show: true,
                        position: "top",
                        formatter: "{c}",
                        fontSize: 13,
                        fontWeight: 600,
                        color: colors.accent,
                        backgroundColor: "rgba(255,255,255,0.95)",
                        padding: [6, 8],
                        borderRadius: 6,
                        borderColor: colors.accent,
                        borderWidth: 2,
                        shadowColor: 'rgba(0,0,0,0.1)',
                        shadowBlur: 4
                    },
                    data: wellData.depthLine.map((point) => point.y),
                },
                {
                    name: "占位",
                    type: "bar",
                    stack: "total",
                    silent: true,
                    barWidth: "8%",
                    itemStyle: {
                        borderColor: "transparent",
                        color: "transparent"
                    },
                    emphasis: {
                        itemStyle: {
                            borderColor: "transparent",
                            color: "transparent"
                        }
                    },
                    data: wellData.depthIntervals.map((item) => item.placeholder),
                },
                {
                    name: "深度区间",
                    type: "bar",
                    stack: "total",
                    barWidth: "6%",
                    label: {
                        show: true,
                        position: 'insideTop',
                        color: '#fff',
                        fontSize: 11,
                        fontWeight: 600,
                        backgroundColor: 'rgba(0,0,0,0.1)',
                        padding: [2, 3],
                        borderRadius: 4,
                        borderColor: 'rgba(255,255,255,0.3)',
                        borderWidth: 1,
                        formatter: (params) => {
                            const di = wellData.depthIntervals[params.dataIndex];
                            return di && di.ztcc !== undefined ? di.ztcc : params.data;
                        }
                    },
                    itemStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                { offset: 0, color: colors.gradient.start },
                                { offset: 1, color: colors.gradient.end }
                            ]
                        },
                        borderRadius: [4, 4, 0, 0],
                        shadowColor: 'rgba(0,0,0,0.2)',
                        shadowBlur: 8,
                        shadowOffsetY: 2
                    },
                    emphasis: {
                        itemStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    { offset: 0, color: this.adjustColor(colors.gradient.start, 1.2) },
                                    { offset: 1, color: this.adjustColor(colors.gradient.end, 1.2) }
                                ]
                            },
                            shadowBlur: 12,
                            shadowOffsetY: 4
                        }
                    },
                    data: wellData.depthIntervals.map((item) => item.interval),
                },
                // 底部显示 interval 数值的透明条，用于放置底部标签
                {
                    name: '深度区间-底部标签',
                    type: 'bar',
                    // 与主柱重叠以便把标签放在柱底部区域内
                    barGap: '-100%',
                    barWidth: '6%',
                    itemStyle: {
                        color: 'transparent',
                        borderColor: 'transparent'
                    },
                    emphasis: { itemStyle: { color: 'transparent', borderColor: 'transparent' } },
                    label: {
                        show: true,
                        position: 'insideBottom',
                        color: '#fff',
                        fontSize: 11,
                        fontWeight: 600,
                        backgroundColor: 'rgba(0,0,0,0.1)',
                        padding: [2, 3],
                        borderRadius: 4,
                        borderColor: 'rgba(255,255,255,0.3)',
                        borderWidth: 1,
                        distance: 0,
                        formatter: (params) => {
                            const di = wellData.depthIntervals[params.dataIndex];
                            return di && di.interval !== undefined ? di.interval : params.data;
                        }
                    },
                    data: wellData.depthIntervals.map((item) => item.interval)
                },
                ...areaSeries,
            ];
        },

        // 颜色调整工具方法
        adjustColor(color, factor) {
            if (color.startsWith('#')) {
                const r = parseInt(color.slice(1, 3), 16);
                const g = parseInt(color.slice(3, 5), 16);
                const b = parseInt(color.slice(5, 7), 16);
                const newR = Math.min(255, Math.round(r * factor));
                const newG = Math.min(255, Math.round(g * factor));
                const newB = Math.min(255, Math.round(b * factor));
                return `rgb(${newR}, ${newG}, ${newB})`;
            }
            return color;
        },

        // 渲染空状态
        renderEmpty(chartDom) {
            const colors = this.colorScheme;
            chartDom.innerHTML = `
                <div class="empty-state" style="
                    width: 100%; 
                    height: 100%; 
                    display: flex; 
                    flex-direction: column;
                    align-items: center; 
                    justify-content: center; 
                    color: ${colors.text};
                    font-size: 16px;
                    background: ${colors.background};
                    border-radius: 12px;
                    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
                ">
                    <div style="
                        font-size: 48px; 
                        margin-bottom: 16px; 
                        opacity: 0.6;
                        color: ${colors.primary};
                    ">📊</div>
                    <div style="
                        font-size: 18px; 
                        color: ${colors.text};
                        font-weight: 500;
                    ">暂无数据</div>
                    <div style="
                        font-size: 14px; 
                        color: ${colors.text};
                        opacity: 0.6;
                        margin-top: 8px;
                    ">请检查数据配置</div>
                </div>
            `;
        },

        // 处理错误
        handleError(error) {
            console.error("图表错误:", error);
        },

        // 创建SVG图片
        createSvgImage(svgString) {
            return new Promise((resolve, reject) => {
                const svgBlob = new Blob([svgString], { type: 'image/svg+xml;charset=utf-8' });
                const svgUrl = URL.createObjectURL(svgBlob);
                const img = new Image();
                img.onload = () => {
                    URL.revokeObjectURL(svgUrl);
                    resolve(img);
                };
                img.onerror = (e) => {
                    URL.revokeObjectURL(svgUrl);
                    reject(e);
                };
                img.src = svgUrl;
            });
        },

        // 使用像素坐标绘制地层标签（透明背景）
        drawStratumLabels(stackedAreas, chartConfig, xAxisLabels) {
            if (!this.myChart || !stackedAreas) return;

            // 兼容两种格式：数组 or 按井号分组的对象
            const areasArray = Array.isArray(stackedAreas)
                ? stackedAreas
                : (Object.values(stackedAreas)[0] || []);
            if (!areasArray || areasArray.length === 0) return;

            const totalDepth = chartConfig.yAxis.max - chartConfig.yAxis.min;
            let currentDepth = chartConfig.yAxis.min;

            this.myChart.setOption({ graphic: { elements: [] } });

            const graphics = [];
            const lastXIndex = Math.max(0, (xAxisLabels?.length || 1) - 1);
            const xOffset = 16;

            areasArray.forEach((area) => {
                if (!area.points || area.points.length === 0) return;
                const thickness = (area.sjdjsd != null && area.sjhd != null)
                    ? (area.sjdjsd - area.sjhd)
                    : ((area.points[0].y2 != null) ? area.points[0].y2 : area.points[0].y);
                const centerDepth = currentDepth + thickness / 2;
                const pixelRight = this.myChart.convertToPixel({ xAxisIndex: 0, yAxisIndex: 0 }, [lastXIndex, centerDepth]);
                if (!pixelRight || !Array.isArray(pixelRight) || pixelRight.length < 2) {
                    console.warn('convertToPixel 返回无效值:', pixelRight);
                    return;
                }
                const [pxRight, py] = pixelRight;

                graphics.push({
                    type: 'text',
                    position: [pxRight + xOffset, py],
                    style: {
                        text: area.name,
                        fontSize: 12,
                        fontWeight: 600,
                        fill: '#333',
                        backgroundColor: 'transparent',
                        padding: [0, 0],
                        borderRadius: 0,
                        lineWidth: 0,
                        stroke: 'transparent',
                        align: 'left',
                        verticalAlign: 'middle'
                    },
                    origin: [0, 0],
                    z: 10,
                    bounding: 'raw',
                    silent: true
                });

                currentDepth += thickness;
            });

            this.currentGraphicElements = graphics;
            this.myChart.setOption({ graphic: { elements: graphics } });
        },

        // 根据 depthIntervals 的顺序按 jh 分段，绘制虚线与顶部井号
        drawJhSeparators(depthIntervals, xAxisLabels, chartConfig) {
            if (!this.myChart || !depthIntervals || depthIntervals.length === 0) return;

            // 扫描 depthIntervals 顺序，形成段
            const segments = [];
            let currentJh = null;
            let currentMin = Infinity;
            let currentMax = -Infinity;
            let started = false;
            for (let i = 0; i < depthIntervals.length; i++) {
                // 直接使用在 depthIntervals 中的顺序索引作为 x 轴位置，
                // 以避免相同 x 标签造成的覆盖与错位
                const { jh } = depthIntervals[i];
                const idx = i;
                if (!started) {
                    currentJh = jh;
                    currentMin = currentMax = idx;
                    started = true;
                    continue;
                }
                if (jh === currentJh) {
                    currentMin = Math.min(currentMin, idx);
                    currentMax = Math.max(currentMax, idx);
                } else {
                    segments.push({ jh: currentJh, startIdx: Math.min(currentMin, currentMax), endIdx: Math.max(currentMin, currentMax) });
                    // 开始新段
                    currentJh = jh;
                    currentMin = currentMax = idx;
                }
            }
            if (started) {
                segments.push({ jh: currentJh, startIdx: Math.min(currentMin, currentMax), endIdx: Math.max(currentMin, currentMax) });
            }

            const graphics = [];
            // 垂直范围（像素）——考虑 y 轴 inverse，取像素最小为顶部、最大为底部
            const yMinPx = this.myChart.convertToPixel({ yAxisIndex: 0 }, chartConfig.yAxis.min);
            const yMaxPx = this.myChart.convertToPixel({ yAxisIndex: 0 }, chartConfig.yAxis.max);
            if (yMinPx === null || yMaxPx === null) {
                console.warn('convertToPixel 返回 null 值，跳过绘制井号分隔符');
                return;
            }
            const yTopPx = Math.min(yMinPx, yMaxPx);
            const yBottomPx = Math.max(yMinPx, yMaxPx);

            // 边界虚线（段与段之间），黑色虚线
            for (let i = 0; i < segments.length - 1; i++) {
                const leftEnd = segments[i].endIdx;
                const rightStart = segments[i + 1].startIdx;
                const pxLeft = this.myChart.convertToPixel({ xAxisIndex: 0 }, leftEnd);
                const pxRight = this.myChart.convertToPixel({ xAxisIndex: 0 }, rightStart);
                if (pxLeft === null || pxRight === null) {
                    console.warn('convertToPixel 返回 null 值，跳过绘制边界虚线');
                    continue;
                }
                const midX = (pxLeft + pxRight) / 2;
                graphics.push({
                    type: 'line',
                    shape: { x1: midX, y1: yTopPx, x2: midX, y2: yBottomPx },
                    style: { stroke: '#111', lineDash: [8, 6], lineWidth: 2 },
                    silent: true,
                    z: 100,
                    zlevel: 10
                });
            }

            // 每段顶部显示 jh（居中），带背景标签并做简单防重叠处理
            let lastLabelRight = -Infinity;
            let rowShift = 0; // 逐行上移避免覆盖
            segments.forEach((seg, idx) => {
                if (!seg.jh) return;
                const pxStart = this.myChart.convertToPixel({ xAxisIndex: 0 }, seg.startIdx);
                const pxEnd = this.myChart.convertToPixel({ xAxisIndex: 0 }, seg.endIdx);
                if (pxStart === null || pxEnd === null) {
                    console.warn('convertToPixel 返回 null 值，跳过绘制井号标签');
                    return;
                }
                const midX = (pxStart + pxEnd) / 2;
                let topY = yTopPx - 30; // 再上移，避免遮挡

                // 估算标签宽度用于避免与上一个重叠
                const fontSize = 12;
                const paddingH = 6;
                const estimatedWidth = seg.jh.length * fontSize * 0.6 + paddingH * 2 + 10;
                const labelLeft = midX - estimatedWidth / 2;
                const labelRight = midX + estimatedWidth / 2;
                if (labelLeft < lastLabelRight) {
                    rowShift += 18; // 叠一行
                } else {
                    rowShift = 0;
                }
                lastLabelRight = Math.max(lastLabelRight, labelRight);
                topY -= rowShift;
                const labelWidth = Math.max(estimatedWidth, 80);
                const labelHeight = 22;
                const pointerSize = 6;

                graphics.push({
                    type: 'group',
                    x: midX - labelWidth / 2,
                    y: topY - labelHeight,
                    z: 101,
                    zlevel: 10,
                    silent: true,
                    children: [
                        {
                            type: 'rect',
                            shape: { x: 0, y: 0, width: labelWidth, height: labelHeight, r: 8 },
                            style: {
                                fill: '#2563eb',
                                stroke: '#1e40af',
                                lineWidth: 1.5,
                                shadowBlur: 6,
                                shadowColor: 'rgba(37,99,235,0.35)'
                            }
                        },
                        {
                            type: 'polygon',
                            shape: {
                                points: [
                                    [labelWidth / 2 - pointerSize, labelHeight],
                                    [labelWidth / 2 + pointerSize, labelHeight],
                                    [labelWidth / 2, labelHeight + pointerSize]
                                ]
                            },
                            style: { fill: '#2563eb', stroke: '#1e40af' }
                        },
                        {
                            type: 'text',
                            style: {
                                x: labelWidth / 2,
                                y: labelHeight / 2,
                                text: seg.jh,
                                fill: '#fff',
                                fontSize: fontSize + 1,
                                fontWeight: 700,
                                align: 'center',
                                verticalAlign: 'middle'
                            }
                        }
                    ]
                });
            });

            // 叠加到现有 graphic 上（保留原有 graphic）
            const prevElements = Array.isArray(this.currentGraphicElements) ? this.currentGraphicElements : [];
            const merged = prevElements.concat(graphics);
            this.currentGraphicElements = merged;
            this.myChart.setOption({ graphic: { elements: merged } });
        }
    },
};
</script>

<style lang="scss" scoped>
/* 容器样式优化 */
.chart-container {
    width: 100%;
    height: 100vh;
    padding: 0 20px;
    margin: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* 井号显示样式 */
.well-number-display {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 5;
    background: transparent;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    transition: all 0.3s ease;
    opacity: 0.9;
}

.well-number-display:hover {
    opacity: 1;
}

.well-label {
    color: #6b7280;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

.well-number {
    color: #3b82f6;
    font-size: 14px;
    font-weight: 600;
}

/* 图表容器样式 */
.chart {
    flex: 1;
    width: 100%;
    height: 100%;
    min-height: 400px;
    display: block;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.chart:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    /* transform: translateY(-2px); */
}

/* 加载状态样式 */
.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: 16px;
    backdrop-filter: blur(10px);
}

.loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid #f3f4f6;
    border-top: 4px solid #3b82f6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 16px;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* 响应式优化 */
@media (max-width: 768px) {
    .chart-container {
        padding: 0 10px;
    }

    .chart {
        min-height: 300px;
        border-radius: 12px;
    }
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
    .chart {
        /* background: linear-gradient(135deg, #1f2937 0%, #111827 100%); */
        /* box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); */
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    /*     
    .chart:hover {
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    } */

    .loading-overlay {
        background: rgba(17, 24, 39, 0.95);
    }
}

/* 动画效果 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.chart-container {
    animation: fadeIn 0.6s ease-out;
}
</style>