<!-- SidePanelItem.vue -->
<template>
  <div class="qgc-side-pannel-item">
    <div class="qgc_title">
      <div class="title_left">
        <span class="texttitle">{{ title }}</span>
        <span v-if="prompt.show" class="title_icon">
          <a-tooltip
            placement="top"
            :title="prompt.value"
            :get-popup-container="getPopupContainer"
          >
            <QuestionCircleOutlined />
          </a-tooltip>
        </span>
        <span v-if="clickprompt.show" class="title_icon">
          <a-tooltip
            placement="top"
            trigger="click"
            :title="clickprompt.value"
            :get-popup-container="getPopupContainer"
          >
            <InfoCircleOutlined />
          </a-tooltip>
        </span>
        <span v-if="iconmap.show" class="title_icon">
          <a-tooltip
            placement="top"
            :title="iconmap.value"
            :get-popup-container="getPopupContainer"
          >
            <span :class="iconmap.icon"></span>
          </a-tooltip>
        </span>
        <!-- 新增的 clickAction 插槽区域 -->
        <span v-if="clickAction.show" class="title_icon">
          <a-tooltip
            placement="top"
            trigger="click"
            :get-popup-container="getPopupContainer"
          >
            <template #title>
              <slot name="click-action-content"></slot>
            </template>
            <InfoCircleOutlined />
          </a-tooltip>
        </span>
      </div>
      <div class="title_right">
        <div v-if="shrink" class="title_shrink" @click="isExpand = !isExpand">
          <img v-if="isExpand" src="@/assets/components/arrow-up.png" alt="" />
          <img v-else src="@/assets/components/arrow-down.png" alt="" />
        </div>
        <div v-if="moreSelect.show">
          <a-tree-select
            v-model:value="moreSelectValue"
            v-model:tree-expanded-keys="treeExpandedKeys"
            show-search
            :size="'small'"
            style="width: 110px"
            :dropdown-style="{
              maxHeight: '400px',
              overflow: 'auto',
              minWidth: '200px'
            }"
            placeholder=" "
            :tree-data="processedMoreSelectOptions"
            :field-names="{
              label: 'title',
              value: 'value',
              children: 'children'
            }"
            tree-node-filter-prop="title"
            popup-class-name="no-wrap-tree-select"
            @select="handleTreeSelect"
            @expand="handleTreeExpand"
          >
          </a-tree-select>
        </div>
        <div v-if="select.show">
          <a-select
            v-model:value="selectValue"
            show-search
            placeholder="请选择"
            :size="'small'"
            :style="{ width: select.width || '80px' }"
            :dropdown-style="{
              maxHeight: '400px',
              overflow: 'auto',
              minWidth: select.minWidth ? select.minWidth : '200px'
            }"
            :options="select.options"
            :filter-option="filterOption"
            @focus="handleFocus"
            @blur="handleBlur"
            @change="handleChange"
            @select="handleTreeSelect1"
          ></a-select>
        </div>
        <div v-if="datetimePicker.show">
          <!-- 添加 locale 属性来设置语言 -->
          <a-date-picker
            v-model:value="datetimeValue"
            :show-time="timePickerConfig"
            :style="{
              width:
                datetimePicker.picker === 'year'
                  ? '80px'
                  : datetimePicker.picker === 'month'
                  ? '90px'
                  : '130px'
            }"
            :format="
              datetimePicker.format !== null ? datetimePicker.format : undefined
            "
            :picker="datetimePicker.picker"
            :allowClear="false"
            placeholder=" "
            @change="handleDateTimeChange"
            :size="'small'"
            :disabledDate="createDisabledDateFn(datetimePicker.picker)"
            :disabledTime="disabledTimeForSinglePicker"
          />
          <!-- 修改为 locale 变量 -->
        </div>
        <div v-if="scopeDate.show" class="title_scopeDate">
          <a-range-picker
            v-model:value="scopeDateValue"
            :picker="scopeDate.picker"
            :allowClear="false"
            :style="{
              width:
                scopeDate.picker === 'year'
                  ? '80px'
                  : scopeDate.picker === 'month'
                  ? '180px'
                  : ''
            }"
            :format="scopeDate.format"
            :range-separator="' 至 '"
            :size="'small'"
            :presets="computedScopeDatePresets"
            :disabledDate="createDisabledDateFn(scopeDate.picker)"
          />
        </div>
        <div v-if="tabs.show" class="typeOne">
          <div
            @click="handleTabClick('one')"
            :class="tabsValue == 'one' ? 'typezhong' : ''"
          >
            图片
          </div>
          <div
            @click="handleTabClick('two')"
            :class="tabsValue == 'two' ? 'typezhong' : ''"
          >
            视频
          </div>
        </div>
      </div>
    </div>
    <div class="body">
      <slot v-if="isExpand" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted, watch, computed, nextTick } from 'vue';
import {
  QuestionCircleOutlined,
  InfoCircleOutlined
} from '@ant-design/icons-vue';
import type { SelectProps } from 'ant-design-vue';
// 导入 dayjs
import dayjs, { Dayjs } from 'dayjs';

// 定义类型接口
interface PromptConfig {
  show: boolean;
  value: string;
  icon?: string;
}

interface SelectConfig {
  picker?: any;
  format?: any;
  show?: boolean;
  value?: string | undefined;
  options?: SelectProps['options'];
  width?: string;
  minWidth?: string;
}

// 定义组件名（便于调试和递归）
defineOptions({
  name: 'SidePanelItem'
});

// 定义props
const props = defineProps({
  title: {
    // 标题
    type: String,
    default: ''
  },
  shrink: {
    // 是否显示收缩
    type: Boolean,
    default: false
  },
  prompt: {
    // 浮动提示
    type: Object as () => PromptConfig,
    default: () => ({
      show: false,
      value: ''
    })
  },
  clickprompt: {
    // 点击提示
    type: Object as () => PromptConfig,
    default: () => ({
      show: false,
      value: ''
    })
  },
  iconmap: {
    //自定义图标浮动
    type: Object as () => PromptConfig,
    default: () => ({
      show: false,
      value: '',
      icon: 'iconfont icon-time'
    })
  },
  clickAction: {
    // 新增：用于控制带交互的提示插槽
    type: Object as () => { show: boolean },
    default: () => ({
      show: false
    })
  },
  select: {
    // 选择框
    type: Object as () => SelectConfig,
    default: () => ({
      show: false,
      value: undefined,
      options: [],
      width: '',
      minWidth: ''
    })
  },
  moreSelect: {
    //树选择框
    type: Object as () => SelectConfig,
    default: () => ({
      show: false,
      value: undefined,
      options: []
    })
  },
  datetimePicker: {
    // 时间选择框
    type: Object as () => SelectConfig & {
      timeFormat?: string; // 新增：时间选择器的格式（控制选择粒度）
    },
    default: () => ({
      show: false,
      value: undefined,
      format: null, //YYYY-MM-DD HH
      picker: 'date', //date | week | month | quarter | year
      timeFormat: 'HH:mm:ss' // 默认值：显示时分秒选择器
    })
  },
  scopeDate: {
    // 时间选择框
    type: Object as () => SelectConfig,
    default: () => ({
      show: false,
      value: undefined,
      format: null, //YYYY-MM-DD HH
      picker: 'month' //date | week | month | quarter | year
    })
  },
  tabs: {
    type: Object,
    default: () => ({
      show: false,
      value: 'one'
    })
  }
});
const emit = defineEmits(['tab-change', 'update-values']);
const isExpand = ref(true);
const selectValue = ref(props.select.value);
const moreSelectValue = ref(props.moreSelect.value);
const datetimeValue = ref<Dayjs | null>(
  props.datetimePicker.value ? dayjs(props.datetimePicker.value) : null
);
const scopeDateValue = ref<[Dayjs, Dayjs] | undefined>(
  props.scopeDate.value && Array.isArray(props.scopeDate.value)
    ? [dayjs(props.scopeDate.value[0]), dayjs(props.scopeDate.value[1])]
    : undefined
);
const tabsValue = ref(props.tabs.value);

// 保存选中树节点的额外属性（如 lgtd、lttd 等）
const selectedNodeExtra = ref<{ lgtd?: any; lttd?: any }>({});

// 保存最后一次选择的月份值（用于从year切换回month时恢复月份）
const lastMonthValue = ref<string | null>(null);

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

/**
 * 创建针对不同 picker 类型的日期禁用函数
 * @param pickerType - 选择器类型: year | month | quarter | week | date
 * @returns disabledDate 回调函数
 */
const createDisabledDateFn = (pickerType: string) => {
  return (current: Dayjs) => {
    if (!current) return false;

    const now = dayjs();

    switch (pickerType) {
      case 'year':
        // 年份选择器：禁用 > 当前年份
        return current.year() > now.year();

      case 'month':
        // 月份选择器：禁用 > 当前年月
        return current.isAfter(now, 'month');

      case 'quarter':
        // 季度选择器：禁用 > 当前季度
        return current.isAfter(now, 'quarter');

      case 'week':
        // 周选择器：禁用 > 当前周
        return current.isAfter(now, 'week');

      case 'date':
      default:
        // 日期选择器：禁用 > 当前日期
        return current.isAfter(now, 'day');
    }
  };
};

/**
 * 单日期选择器的时间禁用函数（针对 show-time）
 * 精确限制到当前时刻的时分秒
 * @param current - 用户当前悬停或选择的日期（由 Ant Design Vue 自动传入）
 */
const disabledTimeForSinglePicker = (current?: Dayjs) => {
  // 只在 datetimePicker 显示且为 date 类型时生效
  if (!props.datetimePicker.show || props.datetimePicker.picker !== 'date') {
    return undefined;
  }

  const now = dayjs();

  // 关键修复：使用传入的 current 参数，而不是 datetimeValue.value
  // current 是用户当前在面板中操作的日期，会实时响应面板内的日期切换
  const selectedDate = current || datetimeValue.value;

  // 如果未选择日期，或选择的不是今天，则不限制时间
  if (!selectedDate || !selectedDate.isSame(now, 'day')) {
    return {};
  }

  // 辅助函数：生成从 start 到 end-1 的数组
  const range = (start: number, end: number) => {
    const result: number[] = [];
    for (let i = start; i < end; i++) {
      result.push(i);
    }
    return result;
  };

  return {
    // 禁用当前小时之后的所有小时
    disabledHours: () => {
      return range(now.hour() + 1, 24);
    },

    // 禁用当前分钟之后的所有分钟（仅在当前小时）
    disabledMinutes: (selectedHour: number) => {
      if (selectedHour === now.hour()) {
        return range(now.minute() + 1, 60);
      }
      return [];
    },

    // 禁用当前秒数之后的所有秒数（仅在当前小时和分钟）
    disabledSeconds: (selectedHour: number, selectedMinute: number) => {
      if (selectedHour === now.hour() && selectedMinute === now.minute()) {
        return range(now.second() + 1, 60);
      }
      return [];
    }
  };
};

// // 定义 locale 变量
// const locale = zhCN;

// console.log(locale, "zhCN");

/**
 * 递归处理树数据，为父节点添加 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 processedMoreSelectOptions = computed(() => {
  return processTreeData(props.moreSelect.options || []);
});

/**
 * 构建树节点映射（建立父子关系）
 * @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;
};

/**
 * 计算属性：根据 picker 类型动态生成快捷日期选项
 */
const computedScopeDatePresets = computed(() => {
  const now = dayjs();
  const presets: Array<{ label: string; value: [Dayjs, Dayjs] }> = [];

  // 根据 picker 类型生成对应的快捷选项
  switch (props.scopeDate.picker) {
    case 'year':
      // 年份选择器：只显示今年
      presets.push({
        label: '今年',
        value: [now.startOf('year'), now]
      });
      break;

    case 'month':
      // 月份选择器：显示今天、昨天、最近七天、最近一个月、最近三个月、今年
      presets.push(
        {
          label: '今天',
          value: [now.startOf('day'), now.endOf('day')]
        },
        {
          label: '昨天',
          value: [
            now.subtract(1, 'day').startOf('day'),
            now.subtract(1, 'day').endOf('day')
          ]
        },
        {
          label: '最近七天',
          value: [now.subtract(6, 'day').startOf('day'), now.endOf('day')]
        },
        {
          label: '最近一个月',
          value: [now.subtract(1, 'month').startOf('day'), now.endOf('day')]
        },
        {
          label: '最近三个月',
          value: [now.subtract(3, 'month').startOf('day'), now.endOf('day')]
        },
        {
          label: '今年',
          value: [now.startOf('year'), now.endOf('day')]
        }
      );
      break;

    case 'quarter':
      // 季度选择器：显示最近一季度、今年
      presets.push(
        {
          label: '最近一季度',
          value: [
            now.subtract(1, 'quarter').startOf('quarter'),
            now.endOf('quarter')
          ]
        },
        {
          label: '今年',
          value: [now.startOf('year'), now.endOf('quarter')]
        }
      );
      break;

    case 'week':
      // 周选择器：显示本周、上周、最近四周
      presets.push(
        {
          label: '本周',
          value: [now.startOf('week'), now.endOf('week')]
        },
        {
          label: '上周',
          value: [
            now.subtract(1, 'week').startOf('week'),
            now.subtract(1, 'week').endOf('week')
          ]
        },
        {
          label: '最近四周',
          value: [now.subtract(3, 'week').startOf('week'), now.endOf('week')]
        }
      );
      break;

    case 'date':
    default:
      // 日期选择器：显示所有常用选项
      presets.push(
        {
          label: '今天',
          value: [now.startOf('day'), now.endOf('day')]
        },
        {
          label: '昨天',
          value: [
            now.subtract(1, 'day').startOf('day'),
            now.subtract(1, 'day').endOf('day')
          ]
        },
        {
          label: '最近七天',
          value: [now.subtract(6, 'day').startOf('day'), now.endOf('day')]
        },
        {
          label: '最近一个月',
          value: [now.subtract(1, 'month').startOf('day'), now.endOf('day')]
        },
        {
          label: '最近三个月',
          value: [now.subtract(3, 'month').startOf('day'), now.endOf('day')]
        },
        {
          label: '今年',
          value: [now.startOf('year'), now.endOf('day')]
        }
      );
      break;
  }

  return presets;
});

/**
 * 计算属性：根据 datetimePicker 的 timeFormat 配置生成时间选择器的配置对象
 */
const timePickerConfig = computed(() => {
  if (!props.datetimePicker.show || props.datetimePicker.picker !== 'date') {
    return true; // 默认行为
  }

  // 如果配置了 timeFormat，则使用该格式控制选择粒度
  if (props.datetimePicker.timeFormat) {
    return {
      format: props.datetimePicker.timeFormat,
      hideDisabledOptions: true, // 隐藏禁用的时间选项
      defaultValue: dayjs().startOf('hour') // 默认选中整点
    };
  }

  return true; // 默认行为
});

/**
 * 处理树节点选择事件
 * 由于父节点已设置 selectable: false，这里只会接收到叶子节点
 * @param selectedKeys 选中的键值（可能是字符串或数组）
 * @param info 节点信息对象（本身就是节点，不是包含 node 的对象）
 */
const handleTreeSelect = (selectedKeys: string | string[], info: any) => {
  // selectedKeys 可能是字符串（单选模式）或数组（多选模式）
  let selectedValue: string;

  if (typeof selectedKeys === 'string') {
    // 单选模式：selectedKeys 直接就是字符串
    selectedValue = selectedKeys;
  } else if (Array.isArray(selectedKeys)) {
    // 多选模式：取第一个元素
    selectedValue = selectedKeys[0];
  } else {
    // 兜底：尝试从 info 中获取
    selectedValue = info?.value || '';
  }

  moreSelectValue.value = selectedValue;
  //
  // 保存选中节点的额外属性（如 lgtd、lttd 等）
  if (info && typeof info === 'object') {
    selectedNodeExtra.value = {
      lgtd: info.lgtd,
      lttd: info.lttd
    };
  }
};
const handleTreeSelect1 = (selectedKeys: string | string[], info: any) => {
  // debugger
  // 保存选中节点的额外属性（如 lgtd、lttd 等）
  if (info && typeof info === 'object') {
    selectedNodeExtra.value = {
      lgtd: info.lgtd,
      lttd: info.lttd
    };
  }
};
/**
 * 处理树节点展开/收起事件
 * @param keys 展开的节点键值数组
 */
const handleTreeExpand = (keys: string[]) => {
  // 保留事件处理函数以维持组件接口完整性
};

// 下拉选择框事件处理
const handleChange = (value: string) => {
  // Handle change
};

const handleBlur = () => {
  // Handle blur
};

const handleFocus = () => {
  // Handle focus
};

const filterOption = (
  input: string,
  option?: { label: string; value: string }
) => {
  if (!option) return false;
  const label = option.label?.toLowerCase() || '';
  const value = option.value?.toLowerCase() || '';
  return (
    label.includes(input.toLowerCase()) || value.includes(input.toLowerCase())
  );
};

// 文字提示容器
const getPopupContainer = (trigger: HTMLElement) => {
  return trigger.parentElement;
};

//时间选择框事件处理
const handleDateTimeChange = (date: any | null, dateString: string) => {
  // 当选择器为 month 时，保存当前选择的月份值
  if (props.datetimePicker.picker === 'month' && date) {
    lastMonthValue.value = dayjs(date).format('YYYY-MM');
  }

  // 如果配置了 timeFormat 为 'HH'（只选择小时），确保分钟和秒为 00
  if (props.datetimePicker.timeFormat === 'HH' && date) {
    const normalizedDate = dayjs(date).minute(0).second(0);
    datetimeValue.value = normalizedDate;
  }
};

const handleTabClick = (value: string) => {
  tabsValue.value = value;
  // 向父组件传递参数
  emit('tab-change', {
    tabValue: value,
    tabLabel: value === 'one' ? '图片' : '视频'
  });
};

// 统一收集并发送所有控件的值
const emitAllValues = () => {
  const payload: any = {
    select: selectValue.value,
    moreSelect: moreSelectValue.value,
    tabs: tabsValue.value,
    selectedNodeExtra: selectedNodeExtra.value
  };

  // 处理单个时间选择器
  if (datetimeValue.value) {
    // 使用传入的 format，如果没有则根据 picker 类型设置默认格式
    const format =
      props.datetimePicker.format ||
      getDefaultFormat(props.datetimePicker.picker);
    payload.datetime = datetimeValue.value.format(format);
  } else {
    payload.datetime = null;
  }
  // 处理单个时间选择器
  if (datetimeValue.value) {
    // 使用传入的 format，如果没有则根据 picker 类型设置默认格式
    const format =
      props.datetimePicker.format ||
      getDefaultFormat(props.datetimePicker.picker);
    payload.datetime = datetimeValue.value.format(format);
  } else {
    payload.datetime = null;
  }

  // 处理时间范围选择器
  if (scopeDateValue.value && Array.isArray(scopeDateValue.value)) {
    // 使用传入的 format，如果没有则根据 picker 类型设置默认格式
    const format =
      props.scopeDate.format || getDefaultFormat(props.scopeDate.picker);
    payload.scopeDate = scopeDateValue.value.map(d =>
      d ? d.format(format) : null
    );
  } else {
    payload.scopeDate = [];
  }
  emit('update-values', payload);
};

// 根据 picker 类型获取默认格式
const getDefaultFormat = (picker: string): string => {
  switch (picker) {
    case 'year':
      return 'YYYY';
    case 'month':
      return 'YYYY-MM';
    case 'quarter':
      return 'YYYY-[Q]Q';
    case 'week':
      return 'YYYY-wo';
    case 'date':
    default:
      return 'YYYY-MM-DD';
  }
};

// 监听各个变量的变化
watch(
  [selectValue, moreSelectValue, datetimeValue, scopeDateValue, tabsValue],
  () => {
    emitAllValues();
  }
);

// 监听 props 变化，实现父子组件数据同步
watch(
  () => props.select.value,
  newVal => {
    if (newVal !== selectValue.value) {
      selectValue.value = newVal;
    }
  }
);

// 监听 moreSelectValue 的变化，移除了自动展开逻辑
watch(
  () => props.moreSelect.value,
  newVal => {
    if (newVal !== moreSelectValue.value) {
      moreSelectValue.value = newVal;
    }
  }
);

watch(
  () => props.datetimePicker.value,
  newVal => {
    const newDayjs = newVal ? dayjs(newVal) : null;
    if (
      !datetimeValue.value ||
      !newDayjs ||
      !datetimeValue.value.isSame(newDayjs)
    ) {
      datetimeValue.value = newDayjs;
    }
  }
);

watch(
  () => props.scopeDate.value,
  newVal => {
    if (newVal && Array.isArray(newVal) && newVal.length === 2) {
      const newRange: [Dayjs, Dayjs] = [dayjs(newVal[0]), dayjs(newVal[1])];
      const currentRange = scopeDateValue.value;

      // 检查是否需要更新（避免不必要的触发）
      if (
        !currentRange ||
        !currentRange[0].isSame(newRange[0]) ||
        !currentRange[1].isSame(newRange[1])
      ) {
        scopeDateValue.value = newRange;
      }
    } else {
      if (scopeDateValue.value) {
        scopeDateValue.value = undefined;
      }
    }
  }
);

watch(
  () => props.tabs.value,
  newVal => {
    if (newVal !== tabsValue.value) {
      tabsValue.value = newVal;
    }
  }
);

// 监听 datetimePicker.picker 的变化，处理从 year 切换到 month 时的月份恢复
watch(
  () => props.datetimePicker.picker,
  (newPicker, oldPicker) => {
    // 当从 year 切换到 month 时，恢复之前保存的月份
    if (
      oldPicker === 'year' &&
      newPicker === 'month' &&
      lastMonthValue.value &&
      datetimeValue.value
    ) {
      const currentYear = datetimeValue.value.year(); // 获取当前选择的年份
      const lastMonth = dayjs(lastMonthValue.value); // 获取上次保存的月份值
      const lastMonthNum = lastMonth.month(); // 获取月份（0-11）

      // 组合：新选择的年份 + 上次选择的月份
      let newValue = dayjs().year(currentYear).month(lastMonthNum);

      // 检查组合后的时间是否超过当前时间
      const now = dayjs();
      if (newValue.isAfter(now, 'month')) {
        // 超过当前月份，修正为当前月份
        newValue = now.startOf('month');
      }

      datetimeValue.value = newValue;
    }
  }
);

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

    if (newValue && nodeMap.size > 0) {
      // 只有当 nodeMap 已构建时才执行
      const parentKeys = getParentKeys(newValue as string);
      treeExpandedKeys.value = parentKeys;
      console.log('自动展开父节点:', parentKeys);
    } else {
      treeExpandedKeys.value = [];
    }
  },
  { immediate: true }
); // immediate: true 确保默认值也能触发

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

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

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

// 页面加载时执行的逻辑
onMounted(() => {
  // 如果初始 picker 是 month，保存初始月份值
  if (props.datetimePicker.picker === 'month' && datetimeValue.value) {
    lastMonthValue.value = datetimeValue.value.format('YYYY-MM');
  }

  // 初始化时发送一次默认值
  emitAllValues();
});

// 组件卸载时清空状态，避免影响其他页面
onUnmounted(() => {
  // 清空月份记忆，防止组件复用时的状态污染
  lastMonthValue.value = null;
});
</script>

<style lang="scss">
.qgc-side-pannel-item {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-direction: column;

  .qgc_title {
    width: 100%;
    background-color: #e5edf3;
    border-radius: 2px;
    font-size: 16px;
    color: #2f6b98;
    line-height: 36px;
    padding-left: 16px;
    padding-right: 8px;
    display: flex;
    justify-content: space-between;
    position: relative;
    font-weight: 500;

    .title_shrink {
      cursor: pointer;
    }

    .title_left {
      display: flex;
      align-items: center;

      .texttitle {
        display: inline-block;
        //width:180px;
      }

      .title_icon {
        display: inline-block;
        margin-left: 5px;
        cursor: pointer;
      }
    }

    .title_right {
      display: flex;
      align-items: center;

      div {
        margin-right: 2px;
      }
    }

    .typeOne {
      display: flex;
      // width: 84px;
      height: 24px;
      box-sizing: border-box;
      cursor: pointer;

      div {
        width: 38px;
        height: 24px;
        font-size: 14px;
        line-height: 24px;
        text-align: center;
        background: #fff;
        margin: 0px;
        color: rgba(0, 0, 0, 0.85);
      }

      .typezhong {
        background: #40a9ff;
        color: #fff;
      }
    }
  }

  .qgc_title:before {
    position: absolute;
    content: '';
    display: inline-block;
    left: 0;
    width: 2px;
    background-color: #005293;
    top: 2px;
    height: 32px;
    border-radius: 3px;
  }

  .body {
    width: 100%;
    font-size: 14px;
    line-height: 22px;
    padding: 16px 0 0;
    margin-bottom: 16px;
    text-overflow: ellipsis;
    overflow: hidden;
    height: calc(100% - 36px);
    box-sizing: border-box;

    p {
      text-indent: 2em;
    }
  }
}

.title_scopeDate {
  :deep(.ant-picker-range-separator) {
    padding: 0px !important;
  }
}
</style>
