<template>
    <div class="water-temp-compare-modal">
        <!-- 搜索区域 -->
        <a-row>
            <a-col>
                <a-form-item label="测站选择">
                    <a-tree-select 
                        v-model:value="selectValue" 
                        v-model:tree-expanded-keys="treeExpandedKeys"
                        :tree-data="processedSelectOptions" 
                        placeholder="请选择测站"
                        style="width: 200px;margin-right: 10px;" 
                        :loading="loading" 
                        @change="handleSelectChange"
                        :field-names="{ label: 'title', value: 'value', children: 'children' }"
                        tree-node-filter-prop="title"
                        show-search
                        popup-class-name="no-wrap-tree-select"
                        @select="handleTreeSelect" />
                </a-form-item>
            </a-col>
            <a-col>
                <a-form-item label="日期选择">
                    <a-month-picker 
                        v-model:value="dateValue" 
                        format="YYYY-MM" 
                        placeholder="请选择月份" 
                        style="width: 200px;margin-right: 10px;"
                        @change="handleDateChange"
                        :disabled-date="disabledMonthDate" />
                </a-form-item>
            </a-col>
            <a-col>
                <a-button type="primary" @click="handleSearch" :loading="loading">
                    查询
                </a-button>
                <a-button style="margin-left: 8px" @click="handleReset">
                    重置
                </a-button>
            </a-col>
        </a-row>
        <!-- 图表区域 -->
        <a-spin :spinning="loading" tip="加载中...">
            <div v-show="!loading && showChart" class="water-temp-compare-chart" ref="chartRef"></div>
            <div v-show="!loading && !showChart" class="water-temp-compare-chart">
                <a-empty description="暂无数据" />
            </div>
        </a-spin>

        <!-- 数据点详情弹框 -->
        <a-modal v-model:open="detailModalVisible" :title="'月均水温对比'" width="1536px" :footer="null" @cancel="handleDetailModalClose">
            <div v-if="detailModalData" >
                <MonthlyAverage
                    :tm="detailModalData.date ? dayjs(detailModalData.date).format('YYYY-MM') + '-01 00:00:00' : dayjs().format('YYYY-MM') + '-01 23:59:59'"
                    :dataDimensionVal="detailModalData.baseid" 
                    :rvcd="detailModalData.rvcd" 
                    :stcd="detailModalData.stcd" 
                    :jdList="JidiSelectEventStore.jidiData" />
            </div>
        </a-modal>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, watch, computed, nextTick } from 'vue'
import * as echarts from 'echarts'
import { wbsbGetKendoList, avgMonGetKendoListCust } from "@/api/sw";
import { useJidiSelectEventStore } from "@/store/modules/jidiSelectEvent";
import dayjs from 'dayjs';
import { ZoomInOutlined } from '@ant-design/icons-vue';
import type { Dayjs } from 'dayjs';
import MonthlyAverage from '../monthlyAverage.vue';

defineOptions({
    name: 'MonthlyAverageMaxModal'
});

// Props 定义 - 双向绑定模式
const props = defineProps<{
    modelValue?: {
        selectValue: string;
        dateValue: string | Dayjs;
    }
    visible?: boolean;  // 弹框可见状态
}>();

const emit = defineEmits(['update:modelValue']);

const JidiSelectEventStore = useJidiSelectEventStore();
const chartRef = ref<HTMLElement | null>(null)
let chartInstance: echarts.ECharts | null = null

const unit = '°C'
const baseid: any = ref(null);
const loading = ref(false);
const showChart = ref(true);

// 详情弹框相关状态
const detailModalVisible = ref(false);
const detailModalData = ref<any>(null);
// 选择器相关 - 内部状态管理
const selectValue = ref('');
const selectOptions = ref<any[]>([]);

// 树形选择器展开状态管理
const treeExpandedKeys = ref<string[]>([])
const nodeMap = new Map<string, { node: any; parentKey: string | null }>()

/**
 * 递归处理树数据，为父节点添加 selectable: false
 * @param data 原始树数据
 * @returns 处理后的树数据
 */
const processTreeData = (data: any[]): any[] => {
    if (!data || !Array.isArray(data)) return [];

    return data.map(item => {
        const newItem = { ...item };

        // 如果有子项，标记为不可选中
        if (newItem.children && newItem.children.length > 0) {
            newItem.selectable = false;
            // 递归处理子项
            newItem.children = processTreeData(newItem.children);
        } else {
            // 叶子节点默认可选中（显式声明更清晰）
            newItem.selectable = true;
        }

        return newItem;
    });
};

// 计算属性：处理后的树数据
const processedSelectOptions = computed(() => {
    return processTreeData(selectOptions.value || []);
});

/**
 * 构建树节点映射（建立父子关系）
 * @param treeData 树形数据
 * @param parentKey 父节点key
 */
const buildNodeMap = (treeData: any[], parentKey: string | null = null) => {
    if (!treeData || !Array.isArray(treeData)) return

    treeData.forEach(node => {
        // 存储当前节点及其父节点信息
        nodeMap.set(node.value, {
            node,
            parentKey
        })

        // 递归处理子节点
        if (node.children && node.children.length > 0) {
            buildNodeMap(node.children, node.value)
        }
    })
}

/**
 * 获取目标节点的所有父节点keys
 * @param targetValue 目标节点value
 * @returns 父节点keys数组（从根到直接父节点）
 */
const getParentKeys = (targetValue: string): string[] => {
    const parentKeys: string[] = []
    let currentKey: string | null = targetValue

    // 向上追溯所有父节点
    while (currentKey !== null && currentKey !== undefined) {
        const nodeInfo = nodeMap.get(currentKey)

        // 如果节点不存在或已到达根节点，停止追溯
        if (!nodeInfo || nodeInfo.parentKey === null || nodeInfo.parentKey === undefined) {
            break
        }

        // 将父节点插入到数组开头（保持从根到叶的顺序）
        parentKeys.unshift(nodeInfo.parentKey)
        currentKey = nodeInfo.parentKey
    }

    return parentKeys
}

// 日期选择器相关 - 内部状态管理（Dayjs 对象）
const dateValue = ref<Dayjs | null>(null);

/**
 * 禁用未来月份
 * @param current 当前日期对象
 * @returns 是否禁用
 */
const disabledMonthDate = (current: Dayjs) => {
    if (!current) return false
    const now = dayjs()
    // 禁用大于当前年月的日期
    return current.isAfter(now, 'month')
}

/**
 * 处理树节点选择事件
 * @param selectedKeys 选中的键值
 * @param info 节点信息
 */
const handleTreeSelect = (selectedKeys: string | string[], info: any) => {
    let selectedValue: string;

    if (typeof selectedKeys === 'string') {
        selectedValue = selectedKeys;
    } else if (Array.isArray(selectedKeys)) {
        selectedValue = selectedKeys[0];
    } else {
        selectedValue = info?.value || '';
    }

    selectValue.value = selectedValue;
};

const filterSelectOptions = (selectOptions: any) => {
    if (selectOptions?.length === 1 && selectOptions?.[0]?.children?.length === 1) {
        return [{ ...selectOptions?.[0]?.children?.[0], isLeaf: true }]
    } else if (selectOptions.length) {
        return selectOptions.map((e) => {
            if (e?.children?.length > 1) {
                return { ...e, isLeaf: false, selectable: true, children: e.children.map((item) => ({ ...item, isLeaf: true })) }
            } else {
                return { ...e.children[0], isLeaf: true }
            }
        })
    }
    return []
}

// 监听 props.modelValue 变化，同步到内部状态
watch(
    () => props.modelValue,
    (newVal) => {
        if (newVal) {
            // 同步 selectValue
            if (newVal.selectValue !== undefined && newVal.selectValue !== selectValue.value) {
                selectValue.value = newVal.selectValue;
            }
            
            // 同步 dateValue（兼容 string 和 Dayjs 类型）
            if (newVal.dateValue !== undefined) {
                const newDateValue = typeof newVal.dateValue === 'string' 
                    ? dayjs(newVal.dateValue, 'YYYY-MM')
                    : newVal.dateValue;
                
                if (!dateValue.value || !newDateValue.isSame(dateValue.value)) {
                    dateValue.value = newDateValue;
                }
            }
        }
    },
    { deep: true, immediate: true }
);

// 监听内部状态变化，emit 给父组件（添加防循环机制）
watch(selectValue, (newVal) => {
    // 只有当父组件传入的值与当前值不同时才 emit
    if (props.modelValue?.selectValue !== newVal) {
        emit('update:modelValue', {
            selectValue: newVal,
            dateValue: dateValue.value ? dateValue.value.format('YYYY-MM') : ''
        });
    }
});

watch(dateValue, (newVal) => {
    const formattedDate = newVal ? newVal.format('YYYY-MM') : '';
    // 只有当父组件传入的值与当前值不同时才 emit
    if (props.modelValue?.dateValue !== formattedDate) {
        emit('update:modelValue', {
            selectValue: selectValue.value,
            dateValue: formattedDate
        });
    }
});

// 监听弹框 visible 状态变化，每次打开时重新查询数据
watch(
    () => props.visible,
    (newVal) => {
        if (newVal === true) {
            // 弹框打开时，确保使用最新的父组件传入值
            console.log('弹框打开，重新查询数据');
            
            // 优先使用父组件传入的值进行查询
            const querySelectValue = props.modelValue?.selectValue || selectValue.value;
            const queryDateValue = props.modelValue?.dateValue || dateValue.value;
            
            console.log('查询参数 - selectValue:', querySelectValue, 'dateValue:', queryDateValue);
            
            // 如果父组件传入了新值，先同步到内部状态
            if (props.modelValue?.selectValue && props.modelValue.selectValue !== selectValue.value) {
                selectValue.value = props.modelValue.selectValue;
            }
            if (props.modelValue?.dateValue) {
                const newDateValue = typeof props.modelValue.dateValue === 'string' 
                    ? dayjs(props.modelValue.dateValue, 'YYYY-MM')
                    : props.modelValue.dateValue;
                if (!dateValue.value || !newDateValue.isSame(dateValue.value)) {
                    dateValue.value = newDateValue;
                }
            }
            
            // 使用同步后的值查询数据
            getEchartsData();
        }
    }
);

//获取选择器配置参数
const getSelectConfig = async () => {
    loading.value = true;

    try {
        let obj: any = {}
        if (baseid.value === 'all') {
            obj = { rstcdStepSort: 'asc', siteStepSort: 'asc' }
        } else {
            obj = { siteStepSort: 'asc' }
        }
        const filters = [
            {
                field: 'wbsType',
                operator: 'eq',
                value: 'PSB_RVCD'
            }
        ]
        if (baseid.value && baseid.value !== 'all') {
            filters.push({
                field: 'objId',
                operator: 'eq',
                value: baseid.value
            })
        }
        let data: any = {
            filter: {
                logic: 'and',
                filters
            }
        }

        if (obj) {
            data.sort = [obj]
        } else {
            data = {
                ...data,
                group: [
                    { dir: 'asc', field: 'orderIndex' },
                    { dir: 'asc', field: 'wbsCode' },
                    { dir: 'asc', field: 'wbsName' },
                    { dir: 'asc', field: 'objid' },
                ],
                groupResultFlat: true
            }
        }
        let res = await wbsbGetKendoList(data)
        let dataOne = res?.data?.data || res?.data

        if (dataOne.length > 0) {
            let dataMapNameMap: any = {}
            let jiDiListMap: any = {}
            JidiSelectEventStore.jidiData.forEach((item: any) => {
                jiDiListMap[item.wbsCode] = item.wbsName
            })

            dataOne.map((item: any, index: number) => {
                const { stcd, stnm, objId } = item
                if (dataMapNameMap[objId]) {
                    dataMapNameMap[objId].push({ ...item, baseName: jiDiListMap[objId], baseId: objId })
                } else {
                    dataMapNameMap[objId] = [{ ...item, baseName: jiDiListMap[objId], baseId: objId }]
                }
                return { label: item.wbsName, value: item.wbsCode, baseId: objId, baseName: jiDiListMap[objId] }
            })

            let dataMapNameArr: any = []

            Object.keys(dataMapNameMap).forEach((item: any) => {
                dataMapNameArr.push({
                    title: dataMapNameMap[item]?.[0]?.baseName,
                    value: item,
                    selectable: false,
                    children: dataMapNameMap[item].map((item2: any) => {
                        return {
                            title: item2.wbsName,
                            value: item2.wbsCode
                        }
                    })
                })
            })
            dataMapNameArr = dataMapNameArr.sort((a: any, b: any) => {
                const indexA = JidiSelectEventStore.jidiData.findIndex(item => item.wbsCode === a.value);
                const indexB = JidiSelectEventStore.jidiData.findIndex(item => item.wbsCode === b.value);
                return indexA - indexB;
            })
            
            // 构建树节点映射，用于自动展开
            buildNodeMap(dataMapNameArr)
            
            // 先设置原始数据
            selectOptions.value = filterSelectOptions(dataMapNameArr)
            
            // 保存父组件传入的值（如果有）
            const parentSelectValue = props.modelValue?.selectValue;
            
            // 确定最终要选中的值
            // 只在没有外部传入值时才设置默认值
            if (!parentSelectValue) {
                if (baseid.value === 'all') {
                    selectValue.value = 'SJLY176'
                } else if (selectOptions.value[0]?.children) {
                    selectValue.value = selectOptions.value[0]?.children[0]?.value
                } else if (selectOptions.value[0]?.value) {
                    selectValue.value = selectOptions.value[0]?.value
                } else {
                    selectValue.value = ''
                }
            } else {
                // 如果有父组件传入的值，使用父组件的值
                selectValue.value = parentSelectValue;
            }
            
            // 自动展开选中节点的父节点
            if (selectValue.value) {
                nextTick(() => {
                    const parentKeys = getParentKeys(selectValue.value);
                    treeExpandedKeys.value = parentKeys;
                });
            }
        }
        
        // 只在没有外部传入日期值时才设置默认值
        if (!props.modelValue?.dateValue) {
            const now = new Date();
            const year = now.getFullYear();
            const month = String(now.getMonth() + 1).padStart(2, '0');
            dateValue.value = dayjs(`${year}-${month}`, 'YYYY-MM');
        } else {
            // 如果有父组件传入的日期值，使用父组件的值
            const newDateValue = typeof props.modelValue.dateValue === 'string' 
                ? dayjs(props.modelValue.dateValue, 'YYYY-MM')
                : props.modelValue.dateValue;
            dateValue.value = newDateValue;
        }
        
        // 不在这里调用 getEchartsData()，等待弹框打开时再查询
        // 但如果是在 onMounted 或 Store watch 首次加载时，且弹框已经打开，则需要查询
        if (props.visible) {
            // 如果弹框已经是打开状态，立即查询数据
            setTimeout(() => {
                getEchartsData();
            }, 50);
        }
    } catch (error) {
        console.error('选择器配置加载失败:', error);
    } finally {
        loading.value = false;
    }
}

//获取图表配置
const getEchartsData = async () => {
    if (loading.value) return; // 防止重复请求

    loading.value = true;

    try {
        // 根据 dateValue 解析年月
        const dateValueStr = dateValue.value ? dateValue.value.format('YYYY-MM') : '';
        if (!dateValueStr || !selectValue.value) {
            showChart.value = false;
            loading.value = false;
            return;
        }
        
        const [yearStr, monthStr] = dateValueStr.split('-');
        const year = parseInt(yearStr);
        const month = parseInt(monthStr);

        // 计算该月的第一天和最后一天
        const firstDay = `${dateValueStr}-01 00:00:00`;
        // 创建下个月1号，然后减去1天得到本月最后一天
        const nextMonth = month === 12 ? 1 : month + 1;
        const nextYear = month === 12 ? year + 1 : year;
        const lastDate = new Date(nextYear, nextMonth - 1, 1);
        lastDate.setDate(lastDate.getDate() - 1);
        const lastDay = `${year}-${String(month).padStart(2, '0')}-${String(lastDate.getDate()).padStart(2, '0')} 23:59:59`;

        const params = {
            "filter": {
                "logic": "and",
                "filters": [
                    {
                        "field": "rvcd",
                        "operator": "eq",
                        "dataType": "string",
                        "value": selectValue.value
                    },
                    {
                        "field": "tm",
                        "operator": "gte",
                        "dataType": "date",
                        "value": firstDay
                    },
                    {
                        "field": "tm",
                        "operator": "lte",
                        "dataType": "date",
                        "value": lastDay
                    },
                    {
                        "field": "year",
                        "operator": "eq",
                        "dataType": "string",
                        "value": year
                    },
                    {
                        "field": "month",
                        "operator": "eq",
                        "dataType": "string",
                        "value": month
                    }
                ]
            }
        }

        let res = await avgMonGetKendoListCust(params)
        console.log('接口返回数据:', res)
        let data = res?.data?.data || res?.data || []

        if (data.length === 0) {
            showChart.value = false
            return
        }

        showChart.value = true

        // 筛选 sttp === "1" 的数据作为 X 轴站点名称
        const stationData = data.filter((item: any) => item.sttp === "1")
        const xData = stationData.map((item: any) => ({
            value: item.stnm,
            stnm: item.stnm,
            stcd: item.stcd  // 保留站点编码用于点击事件
        }))

        // 筛选 sttp === "2" 的数据作为图表系列数据
        const tempData = data.filter((item: any) => item.sttp === "2")

        // 按照站点顺序提取三个系列的数据，包装为对象格式以保留元信息
        const actualData = tempData.map((item: any) => ({
            value: item.actualTemp,
            stcd: item.stcd,
            stnm: item.stnm
        }))
        const lastData = tempData.map((item: any) => ({
            value: item.lastTemp,
            stcd: item.stcd,
            stnm: item.stnm
        }))
        const naturalData = stationData.map((item: any) => ({
            value: item.naturalTemp,
            stcd: item.stcd,
            stnm: item.stnm
        }))

        console.log('X轴数据:', xData)
        console.log('实测值:', actualData)
        console.log('去年同期:', lastData)
        console.log('天然值:', naturalData)

        // 初始化或更新图表 - 每次都重新初始化以避免显示异常
        setTimeout(() => {
            // 总是调用 initChart 重新创建图表实例，避免旧实例残留导致的双重显示问题
            initChart(xData, actualData, lastData, naturalData)
            
            // 强制重绘，确保尺寸正确
            setTimeout(() => {
                chartInstance?.resize()
            }, 100)
        }, 50)
    } catch (error) {
        console.error('图表数据加载失败:', error)
        showChart.value = false
    } finally {
        loading.value = false;
    }
}

const initChart = (xData: any[], actualData: any[], lastData: any[], naturalData: any[]) => {
    if (!chartRef.value) return

    // 如果图表实例已存在，先销毁再重新创建，避免重复绑定事件和显示异常
    if (chartInstance) {
        chartInstance.dispose();
        chartInstance = null;
    }

    chartInstance = echarts.init(chartRef.value)

    const legendData = ['实测值', '去年同期', '天然']

    // 计算Y轴范围：最小值向下取整，最大值向上取整
    const allData = [...actualData, ...lastData, ...naturalData].map(item => item.value).filter(val => val !== null && val !== undefined)
    const dataMin = allData.length > 0 ? Math.min(...allData) : 0
    const dataMax = allData.length > 0 ? Math.max(...allData) : 10
    const yAxisMin = Math.floor(dataMin)
    const yAxisMax = Math.ceil(dataMax)

    // 完全按照原始React代码中的options配置
    const options: any = {
        noShowToolbox: true,
        yAxisSplit: 5,
        xData,
        dataZoom: [
            {
                type: 'inside',
                show: false
            },
            {
                type: 'slider',
                show: false
            }
        ],
        tooltip: {
            show: true,
            trigger: 'axis',
            confine: true,
            formatter: (params: any) => {
                const label = xData.filter((item: any) => item.value === params[0].axisValueLabel)?.[0]?.stnm
                let elm = ``
                for (const item of params) {
                    const value = item.data?.value ?? item.value;
                    elm += `
            <div>
            ${item.marker}
            <span>${item.seriesName}:</span>
            <span>${value === null || value === undefined ? '-' : value}${unit}</span>
            </div>
          `
                }
                return `<div>${label}</div>` + elm
            }
        },
        legend: {
            data: legendData
        },
        grid: {
            top: 30,
            bottom: 50,
            right: 15,
            left: 30
        },
        xAxis: {
            axisPointer: {
                type: 'shadow',
                lineStyle: {
                    color: '#007aff1a',
                    width: 1,
                }
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#8f8f8f'
                }
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                color: '#000000',
                fontSize: 12,
                interval: xData.length < 5 ? 0 : 2,
                rotate: 0,
                formatter: (value: any) => {
                    const label = xData.filter((item: any) => item.value === value)?.[0]?.stnm
                    return `{a|${label.substring(0, 6)}}` + (label.length > 6 ? '...\n{b|}' : '\n{b|}')
                },
                rich: {
                    a: {
                        height: 30,
                        align: 'center'
                    },
                    b: {
                        height: 30,
                        align: 'center'
                    }
                }
            },
            data: xData,
            splitLine: {
                show: false
            }
        },
        yAxis: [
            {
                type: 'value',
                name: `水温(${unit})`,
                min: yAxisMin,
                max: yAxisMax,
                nameTextStyle: {
                    fontSize: 12,
                    color: '#000000'
                },
                lineStyle: {
                    color: '#6ca4f7',
                    width: 2
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#bfbfbf'
                    }
                },
                axisTick: {
                    show: true,
                    length: 3,
                    lineStyle: {
                        color: '#8f8f8f'
                    }
                },
                axisLabel: {
                    color: '#333',
                    fontSize: 12
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#bfbfbf',
                        type: 'solid'
                    }
                }
            }
        ],
        series: [
            {
                name: legendData[0],
                data: actualData,
                type: 'line',
                connectNulls: true,
                smooth: true
            },
            {
                name: legendData[1],
                data: lastData,
                type: 'line',
                connectNulls: true,
                smooth: true
            },
            {
                name: legendData[2],
                data: naturalData,
                type: 'line',
                connectNulls: true,
                smooth: true
            }
        ]
    }

    // 颜色配置 - 对应 getColorByCodeAndType(['Other'], ['ACTUALTEMP', 'LASTTEMP', 'NATURALTEMP'])
    // 根据图片：实测值(蓝)、去年同期(紫)、天然(绿)
    options.color = ['#5470c6', '#9b59b6', '#91cc75']

    chartInstance.setOption(options)

    // 绑定点击事件 - 移植自 index.vue，打开详情弹框
    chartInstance.on('click', (params: any) => {
        console.log('图表数据点被点击:', params);

        // 获取点击的数据点信息
        const dataPoint = params.data;
        const stcd = dataPoint?.stcd || '';
        const stnm = dataPoint?.stnm || '';

        // 设置弹框数据
        detailModalData.value = {
            baseid: baseid.value,
            rvcd: selectValue.value,
            date: dateValue.value ? dateValue.value.format('YYYY-MM') : dayjs().format('YYYY-MM'),
            stcd: stcd,
            stnm: stnm
        };

        // 打开详情弹框
        detailModalVisible.value = true;
    });
}

// 选择器变化处理
const handleSelectChange = (value: string) => {
    console.log('选择器变化:', value);
    
    // 自动展开父节点
    if (value && nodeMap.size > 0) {
        const parentKeys = getParentKeys(value)
        treeExpandedKeys.value = parentKeys
        console.log('自动展开父节点:', parentKeys)
    } else {
        treeExpandedKeys.value = []
    }
    
    // 自动查询
    getEchartsData();
};

// 日期变化处理
const handleDateChange = (date: Dayjs | null, dateString: string) => {
    console.log('日期变化:', dateString);
    // 自动查询
    getEchartsData();
};

// 详情弹框关闭处理
const handleDetailModalClose = () => {
    detailModalVisible.value = false;
    detailModalData.value = null;
};

// 查询按钮点击
const handleSearch = () => {
    // 手动查询
    getEchartsData();
};

// 重置按钮点击
const handleReset = () => {
    // 恢复到组件内部默认值（根据当前 baseid 重新计算）
    if (baseid.value === 'all') {
        selectValue.value = 'SJLY176';
    } else if (selectOptions.value[0]?.children) {
        selectValue.value = selectOptions.value[0]?.children[0]?.value;
    } else if (selectOptions.value[0]?.value) {
        selectValue.value = selectOptions.value[0]?.value;
    } else {
        selectValue.value = '';
    }
    
    // 重置日期为当前月份
    const now = new Date();
    const year = now.getFullYear();
    const month = String(now.getMonth() + 1).padStart(2, '0');
    dateValue.value = dayjs(`${year}-${month}`, 'YYYY-MM');
    
    // 重新加载数据
    getEchartsData();
};

// 图表放大展示 - 打开弹框
const handleChartZoomIn = () => {
    // TODO: 如果需要进一步放大，可以在此添加逻辑
    console.log('图表放大展示');
};

watch(
    () => JidiSelectEventStore.selectedItem,
    (newVal) => {
        baseid.value = newVal.wbsCode;
        getSelectConfig()
    },
    { deep: true, immediate: true }
);

// 监听树数据变化，重新构建映射
watch(() => processedSelectOptions.value, (newData) => {
    console.log('树数据变化，重新构建映射')

    if (newData && newData.length > 0) {
        // 清空旧映射
        nodeMap.clear()
        // 重新构建映射
        buildNodeMap(newData)

        // 数据加载完成后，如果已有默认值，重新触发一次
        if (selectValue.value) {
            nextTick(() => {
                const parentKeys = getParentKeys(selectValue.value)
                treeExpandedKeys.value = parentKeys
                console.log('数据加载后自动展开父节点:', parentKeys)
            })
        }
    }
}, { deep: true })

// 监听 selectValue 变化（包括默认值和用户选择）
watch(() => selectValue.value, (newValue) => {
    console.log('selectValue 变化:', newValue)

    if (newValue && nodeMap.size > 0) {
        // 只有当 nodeMap 已构建时才执行
        const parentKeys = getParentKeys(newValue)
        treeExpandedKeys.value = parentKeys
        console.log('自动展开父节点:', parentKeys)
    } else {
        treeExpandedKeys.value = []
    }
}, { immediate: true })

onMounted(() => {
    // 延迟初始化，确保容器尺寸已就绪
    setTimeout(() => {
        getSelectConfig()
    }, 100)

    window.addEventListener('resize', () => {
        chartInstance?.resize()
    })
})

onBeforeUnmount(() => {
    chartInstance?.dispose()
    window.removeEventListener('resize', () => {
        chartInstance?.resize()
    })
})
</script>

<style scoped>
.water-temp-compare-modal {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.search-card {
    /* margin-bottom: 16px; */
}

.water-temp-compare-chart {
    width: 100%;
    height: 602px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.water_bottom {
    width: 100%;
    display: flex;
    justify-content: end;
    align-items: center;
    color: #2f6b96;
    cursor: pointer;
    padding: 8px 0;
}

:deep(.ant-spin-nested-loading) {
    flex: 1;
    display: flex;
    flex-direction: column;
}

:deep(.ant-spin-container) {
    flex: 1;
    display: flex;
    flex-direction: column;
}
</style>
