<script setup lang="ts">
import { GridLayout, GridItem } from 'grid-layout-plus'
import * as echarts from 'echarts';
import { PageContainer } from 'antdv-pro-layout';
import { onMounted, reactive, ref, markRaw, nextTick, onUnmounted, watch } from 'vue';
import { RESULT_CODE_ERROR, RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import { SizeType } from 'ant-design-vue/es/config-provider';
import { listKPIData, getKPITitle } from '@/api/perfManage/goldTarget';
import useI18n from '@/hooks/useI18n';
import { parseDateToStr } from '@/utils/date-utils';
import dayjs, { Dayjs } from 'dayjs';
import useNeInfoStore from '@/store/modules/neinfo';
import { message } from 'ant-design-vue';
import { generateColorRGBA } from '@/utils/generate-utils';
import { LineSeriesOption } from 'echarts/charts';
import { SeriesOption } from 'echarts';
import { OptionsType, WS } from '@/plugins/ws-websocket';
import { useDebounceFn } from '@vueuse/core';
import { DownOutlined } from '@ant-design/icons-vue';
import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
const { t, currentLocale } = useI18n();

const neInfoStore = useNeInfoStore();

//WebSocket连接
const ws = ref<WS | null>(null);

//添加实时数据状态
const realTimeEnabled = ref(false);
//实时数据开关
const handleRealTimeSwitch = (checked: any) => {
  fnRealTimeSwitch(!!checked);
};

// 定义所有网元类型
const ALL_NE_TYPES = ['ims', 'amf', 'udm', 'smf', 'pcf','upf','mme','mocngw','smsc','cbc','ausf'] as const;
type AllChartType = typeof ALL_NE_TYPES[number];

// 在 ALL_NE_TYPES 定义之后添加 小写转大写
const neTypeOptions = ALL_NE_TYPES.map(type => ({
  label: type.toUpperCase(),
  value: type
}));

// 使用 ref 来使 networkElementTypes 变为响应式，并使用 ALL_NE_TYPES 初始化
const networkElementTypes = ref<AllChartType[]>([...ALL_NE_TYPES]);

// 选择的网元类型
const selectedNeTypes = ref<AllChartType[]>([]);

// 临时状态 存储最新的选择
const latestSelectedTypes = ref<AllChartType[]>([]);
//手动更新跟踪
const isManuallyUpdating = ref(false);

// watch 监控函数
watch(selectedNeTypes, (newTypes) => {
  //if (isManuallyUpdating.value) return;
  networkElementTypes.value = newTypes;
  latestSelectedTypes.value = newTypes;
  debouncedUpdateCharts();

  // 更新 WebSocket 订阅
  if (realTimeEnabled.value && ws.value) {
    // 关闭现有连接
    ws.value.close();
    // 创建新的连接和更新后的订
    const options: OptionsType = {
      url: '/ws',
      params: {
        subGroupID: newTypes.map(type => `10_${type.toUpperCase()}_001`).join(','),
      },
      onmessage: wsMessage,
      onerror: wsError,
    };
    ws.value.connect(options);
  }
}, { deep: true });

// 防抖函数
const debouncedUpdateCharts = useDebounceFn(() => {
  // 比较当前选择和最新选择
  if (JSON.stringify(latestSelectedTypes.value) !== JSON.stringify(selectedNeTypes.value)) {
    // 如果不一致，以最新选择为准
    selectedNeTypes.value = latestSelectedTypes.value;
  }

  const newTypes = selectedNeTypes.value;

  // 更新 chartOrder
  chartOrder.value = chartOrder.value.filter(item => newTypes.includes(item.i));

  newTypes.forEach((type) => {
    if (!chartOrder.value.some(item => item.i === type)) {
      chartOrder.value.push({
        x: (chartOrder.value.length % 2) * 6,
        y: Math.floor(chartOrder.value.length / 2) * 4,
        w: 6,
        h: 4,
        i: type,
      });
    }
    // 确保 chartStates 包含新的网元类型
    if (!chartStates[type]) {
      chartStates[type] = createChartState();
    }
  });

  // 保存选中的网元类型到本地存储
  localStorage.setItem('selectedNeTypes', JSON.stringify(newTypes));

  // 重新初始化图表
  nextTick(() => {
    initCharts();
  });
}, 300);

// 改变状态时重新初始化图表 数
const initCharts = async () => {
  // 清除不再需要的图表
  Object.keys(chartStates).forEach((key) => {
    if (!networkElementTypes.value.includes(key as AllChartType)) {
      const state = chartStates[key as AllChartType];
      if (state.chart.value) {
        state.chart.value.dispose();
      }
      if (state.observer.value) {
        state.observer.value.disconnect();
      }
      delete chartStates[key as AllChartType];
    }
  });

  // 初始化或更新需要的图表
  for (const type of networkElementTypes.value) {
    if (!chartStates[type]) {
      chartStates[type] = createChartState();
    }
    try {
      await fetchKPITitle(type);
      await nextTick();
      initChart(type);
      await fetchData(type);
    } catch (error) {
      console.error(`Error initializing chart for ${type}:`, error);
    }
  }

  // 不要在这里保存布局，因为这可能会覆盖我们刚刚设置的布局
  // localStorage.setItem('chartOrder', JSON.stringify(chartOrder.value));
};

// 位置类型定义(记录布局）
interface LayoutItem {
  x: number;
  y: number;
  w: number;
  h: number;
  i: AllChartType;
}

type Layout = LayoutItem[];

//构建响应式数组储存图表类型数据
const chartOrder = ref<Layout>(
  JSON.parse(localStorage.getItem('chartOrder') || 'null') ||
  networkElementTypes.value.map((type, index) => ({//系统默认布局
    x: index % 2 * 6,  // 每行两个图表，宽度为6
    y: Math.floor(index / 2) * 4,  // 每个图表据 4 个单位高度
    w: 6,  // 宽度为6单位
    h: 4,  // 高度为4个单位
    i: type,  // 使用网元类型作为唯一标识
  }))
);

// 监听带防抖
const handleLayoutUpdated = useDebounceFn((newLayout: Layout) => {
  if (isManuallyUpdating.value) {
    return;
  }
  const filteredLayout = newLayout.filter(item => networkElementTypes.value.includes(item.i));
  if (JSON.stringify(filteredLayout) !== JSON.stringify(chartOrder.value)) {
    chartOrder.value = filteredLayout;
    localStorage.setItem('chartOrder', JSON.stringify(chartOrder.value));
    nextTick(() => {
      chartOrder.value.forEach((item) => {
        const state = chartStates[item.i];
        if (state?.chart.value) {
          state.chart.value.resize();
          renderChart(item.i);
        }
      });
    });
  } else {
    console.log('No change in layout, skipping update');
  }
}, 200);  // 200ms 的防抖时间

// 监听 chartOrder 的变化
watch(chartOrder, (newOrder, oldOrder) => {
  if (JSON.stringify(newOrder) !== JSON.stringify(oldOrder)) {
    nextTick(() => {
      Object.values(chartStates).forEach(state => {
        if (state.chart.value) {
          state.chart.value.resize();
        }
      });
    });
  }
}, { deep: true });

// 定义表格状态类型
type TableStateType = {
  loading: boolean;
  size: SizeType;
  seached: boolean;
  data: Record<string, any>[];
  selectedRowKeys: (string | number)[];
};

// 创建可复用的状态
const createChartState = () => {
  const chartDom = ref<HTMLElement | null>(null);
  const chart = ref<echarts.ECharts | null>(null);
  const observer = ref<ResizeObserver | null>(null);

  return {
    chartDom,
    chart,
    observer,
    tableColumns: ref<any[]>([]),
    tableState: reactive<TableStateType>({
      loading: false,
      size: 'small',
      seached: true,
      data: [],
      selectedRowKeys: [],
    }),
    chartLegendSelected: {} as Record<string, boolean>,
    chartDataXAxisData: [] as string[],
    chartDataYSeriesData: [] as CustomSeriesOption[],
  };
};

// 图表类型状态
const chartStates: Record<AllChartType, ReturnType<typeof createChartState>> = Object.fromEntries(
  networkElementTypes.value.map(type => [type, createChartState()])
) as Record<AllChartType, ReturnType<typeof createChartState>>;

//日期选择器
interface RangePicker extends Record<AllChartType, [string, string]> {
  placeholder: [string, string];
}

// 日期选择器状态
const rangePicker = reactive<RangePicker>({
  ...Object.fromEntries(networkElementTypes.value.map(type => [
    type,
    [
      dayjs().startOf('hour').valueOf().toString(),  // 当前小时内
      dayjs().endOf('hour').valueOf().toString()
    ]
  ])) as Record<AllChartType, [string, string]>,
  placeholder: [t('views.monitor.monitor.startTime'), t('views.monitor.monitor.endTime')] as [string, string],
});

// 可复用的图表初始化函数
const initChart = (type: AllChartType) => {
  const tryInit = (retries = 3) => {
    nextTick(() => {
      const state = chartStates[type];
      if (!state) {
        console.warn(`Chart state for ${type} not found`);
        return;
      }
      const container = state.chartDom.value;
      if (!container) {
        if (retries > 0) {
          console.warn(`Chart container for ${type} not found, retrying... (${retries} attempts left)`);
          setTimeout(() => tryInit(retries - 1), 100);
        } else {
          console.error(`Chart container for ${type} not found after multiple attempts`);
        }
        return;
      }

      if (state.chart.value) {
        state.chart.value.dispose();
      }

      state.chart.value = markRaw(echarts.init(container));
      const option: echarts.EChartsOption = {
        tooltip: {
          trigger: 'axis',
          position: function(pt: any) {
            return [pt[0], '10%'];
          },
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: state.chartDataXAxisData,
        },
        yAxis: {
          type: 'value',
          boundaryGap: [0, '100%'],
        },
        legend: {
          type: 'scroll',
          orient: 'horizontal',
          top: -5,
          itemWidth: 20,
          textStyle: {
            color: '#646A73',
          },
          icon: 'circle',
          selected: state.chartLegendSelected,
        },
        grid: {
          left: '10%',
          right: '10%',
          bottom: '15%',
        },
        dataZoom: [
          {
            type: 'inside',
            start: 0,
            end: 100,
          },
          {
            start: 0,
            end: 100,
          },
        ],
        series: state.chartDataYSeriesData as SeriesOption[],
      };
      state.chart.value.setOption(option);
      state.chart.value.resize();

      // 创建 ResizeObserver 实例
      if (state.observer.value) {
        state.observer.value.disconnect();
      }
      state.observer.value = new ResizeObserver(() => {
        if (state.chart.value) {
          state.chart.value.resize();
        }
      });

      // 观察图表容器
      state.observer.value.observe(container);
    });
  };

  tryInit();
};

// 可复用的数据获取函数
const fetchData = async (type: AllChartType) => {
  const state = chartStates[type];  // 直使用 type
  const neId = '001';
  state.tableState.loading = true;
  try {
    const dateRange = rangePicker[type] as [string, string];
    const [startTime, endTime] = dateRange;
    const res = await listKPIData({
      neType: type.toUpperCase(),
      neId,
      startTime,
      endTime,
      sortField: 'timeGroup',
      sortOrder: 'desc',
      interval: 5,
    });
    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
      state.tableState.data = res.data;
      await nextTick(() => {
        renderChart(type);
      });
    }
  } catch (error) {
    console.error(error);
    message.error(t('common.getInfoFail'));
  } finally {
    state.tableState.loading = false;
  }
};

//实时数连接开关
function fnRealTimeSwitch(bool: boolean) {
  realTimeEnabled.value = bool;
  if (bool) {
    if(!ws.value) {
      ws.value = new WS();
    }
    // 清空所有图表的现有数据
    Object.values(chartStates).forEach(state => {
      state.tableState.seached = false;
      state.chartDataXAxisData = [];
      state.chartDataYSeriesData.forEach(series => {
        series.data = [];
      });
      if (state.chart.value) {
        state.chart.value.setOption({
          xAxis: { data: [] },
          series: state.chartDataYSeriesData
        });
      }
    });
    const options: OptionsType = {
      url: '/ws',
      params: {
        subGroupID: selectedNeTypes.value.map(type => `10_${type.toUpperCase()}_001`).join(','),
      },
      onmessage: wsMessage,
      onerror: wsError,
    };
    ws.value.connect(options);
  } else if(ws.value) {
    Object.values(chartStates).forEach(state => {
      state.tableState.seached = true;
    });
    ws.value.close();
    ws.value = null;
  }
}

// 接收数据后错误回调
function wsError() {

  message.error(t('common.websocketError'));
}

// 接收数据回调
function wsMessage(res: Record<string, any>) {
  const { code, data } = res;
  if (code === RESULT_CODE_ERROR) {
    console.warn(res.msg);
    return;
  }

  if (!data?.groupId) {
    return;
  }

  const neType = data.groupId.split('_')[1].toLowerCase() as AllChartType;

  const state = chartStates[neType];
  if (!state) {
    console.warn(`No chart state found for ${neType}`);
    return;
  }

  const kpiEvent = data.data;
  if (!kpiEvent) {
    console.warn(`No data found for ${neType}`);
    return;
  }

  const newTime = parseDateToStr(kpiEvent.timeGroup ? +kpiEvent.timeGroup : Date.now());

  // 只有在实时数据模式下才更新图表
  if (realTimeEnabled.value) {
    // 更新X轴数据
    state.chartDataXAxisData.push(newTime);
    if (state.chartDataXAxisData.length > 100) {
      state.chartDataXAxisData.shift();
    }

    // 更新每个系列的数据
    state.chartDataYSeriesData.forEach(series => {
      const kpiKey = series.customKey as string;
      if (kpiEvent[kpiKey] !== undefined) {
        const newValue = +kpiEvent[kpiKey];
        series.data.push([newTime, newValue]);
        if (series.data.length > 100) {
          series.data.shift();
        }
      }
    });

    // 立即更新图表
    if (state.chart.value) {
      state.chart.value.setOption({
        xAxis: { data: state.chartDataXAxisData },
        series: state.chartDataYSeriesData as SeriesOption[]
      });
    }
  }
}

interface CustomSeriesOption extends Omit<LineSeriesOption, 'data'> {
  customKey?: string;
  data: Array<[string, number]>;
}
// 创建可复用的图表渲染函数
const renderChart = (type: AllChartType) => {
  const state = chartStates[type];
  if (state.chart.value == null) {
    return;
  }
  // 置数据
  state.chartLegendSelected = {};
  state.chartDataXAxisData = [];
  state.chartDataYSeriesData = [];

  // 处理数据
  for (const column of state.tableColumns.value) {
    if (['neName', 'startIndex', 'timeGroup'].includes(column.key as string)) continue;
    const color = generateColorRGBA();
    state.chartDataYSeriesData.push({
      name: column.title as string,
      customKey: column.key as string,
      type: 'line',
      symbol: 'none',
      sampling: 'lttb',
      itemStyle: { color },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: color.replace(')', ',0.8)') },
          { offset: 1, color: color.replace(')', ',0.3)') },
        ]),
      },
      data: [],
    } as CustomSeriesOption);
    state.chartLegendSelected[column.title as string] = true;
  }

  const orgData = [...state.tableState.data].reverse();
  for (const item of orgData) {
    state.chartDataXAxisData.push(parseDateToStr(+item.timeGroup));
    for (const series of state.chartDataYSeriesData) {
      series.data.push([parseDateToStr(+item.timeGroup), +item[series.customKey as string]]);
    }
  }

  // 更新图表
  state.chart.value.setOption(
    {
      legend: { selected: state.chartLegendSelected },
      xAxis: {
        data: state.chartDataXAxisData,
        type: 'category',
        boundaryGap: false,
      },
      series: state.chartDataYSeriesData as SeriesOption[],
      dataZoom: [
        {
          type: 'inside',
          start: 0,
          end: 100,
        },
        {
          start: 0,
          end: 100,
        },
      ],
    },
    { replaceMerge: ['xAxis', 'series'] }
  );
};


// 获网元指标数据
const fetchKPITitle = async (type: AllChartType) => {
  const language = currentLocale.value.split('_')[0] === 'zh' ? 'cn' : currentLocale.value.split('_')[0];
  try {
    const res = await getKPITitle(type.toUpperCase());
    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
      chartStates[type].tableColumns.value = res.data.map(item => ({
        title: item[`${language}Title`],
        dataIndex: item.kpiId,
        align: 'left',
        key: item.kpiId,
        resizable: true,
        width: 100,
        minWidth: 150,
        maxWidth: 300,
      }));
    }
  } catch (error) {
    console.error(error);
    message.warning(t('common.getInfoFail'));
  }
};

// 定义默认选择的网元类型
const DEFAULT_NE_TYPES: AllChartType[] = ['udm', 'amf', 'upf', 'ims'];

// 在 onMounted 钩子中
onMounted(async () => {
  ws.value = new WS();
  await neInfoStore.fnNelist();

  // 从本地存储中读取选中的网元类型
  const savedSelectedNeTypes = localStorage.getItem('selectedNeTypes');
  if (savedSelectedNeTypes) {
    const parsedSelectedNeTypes = JSON.parse(savedSelectedNeTypes) as AllChartType[];
    selectedNeTypes.value = parsedSelectedNeTypes;
    networkElementTypes.value = parsedSelectedNeTypes;
  } else {
    // 如果没有保存的选中网元类型，则用默认选择
    selectedNeTypes.value = [...DEFAULT_NE_TYPES];
    networkElementTypes.value = [...DEFAULT_NE_TYPES];
    // 保存这个默认选择到本地存储
    localStorage.setItem('selectedNeTypes', JSON.stringify(DEFAULT_NE_TYPES));
  }

  // 初始化或更新 chartOrder
  const savedLayout = localStorage.getItem('chartOrder');
  if (savedLayout) {
    chartOrder.value = JSON.parse(savedLayout).filter((item: LayoutItem) =>
      networkElementTypes.value.includes(item.i)
    );
  }

  // 如果 chartOrder 为空或者不包含所有选中的网元，添加缺失的网元
  const missingTypes = networkElementTypes.value.filter(type => !chartOrder.value.some(item => item.i === type));
  missingTypes.forEach((type) => {
    chartOrder.value.push({
      x: (chartOrder.value.length % 2) * 6,
      y: Math.floor(chartOrder.value.length / 2) * 4,
      w: 6,
      h: 4,
      i: type,
    });
  });

  await initCharts();
});

// 在组件卸载时销毁图表实例
onUnmounted(() => {
  if(ws.value && ws.value.state() === WebSocket.OPEN) {
    ws.value.close();
  }
  Object.values(chartStates).forEach((state) => {
    if (state.chart.value) {
      state.chart.value.dispose();
    }
    if (state.observer.value) {
      state.observer.value.disconnect();
    }
  });
});

const isSaving = ref(false);
const isRestoring = ref(false);
//保存布局按钮
const handleSaveLayout = async (info: MenuInfo) => {
  if (typeof info.key === 'string' && !isSaving.value) {
    isSaving.value = true;
    isRestoring.value = true;
    try {
      await saveCurrentLayout(info.key);
    } finally {
      setTimeout(()=>{
        isSaving.value = false;
        isRestoring.value = false;
      },700)
    }
  } else {
    console.error('Invalid layout key or operation in progress');
  }
};
//恢复布局按钮
const handleRestoreLayout = async (info: MenuInfo) => {
  if (typeof info.key === 'string' && !isRestoring.value) {
    isRestoring.value = true;
    isSaving.value = true;
    try {
      await restoreSavedLayout(info.key);
    } finally {
      setTimeout(()=>{
        isSaving.value = false;
        isRestoring.value = false;
      },700)
    }
  } else {
    console.error('Invalid layout key or operation in progress');
  }
};

// 保存当前布局
const saveCurrentLayout = async (layoutName: string) => {
  const savedLayouts = JSON.parse(localStorage.getItem('savedLayouts') || '{}');
  savedLayouts[layoutName] = {
    layout: chartOrder.value,
    selectedTypes: selectedNeTypes.value
  };
  localStorage.setItem('savedLayouts', JSON.stringify(savedLayouts));
  message.success(t('views.perfManage.kpiKeyTarget.saveSuccess', { name: t(`views.perfManage.kpiKeyTarget.${layoutName}`)}));
};
//恢复已保存的布局
const restoreSavedLayout = async (layoutName: string) => {
  const savedLayouts = JSON.parse(localStorage.getItem('savedLayouts') || '{}');
  const savedLayout = savedLayouts[layoutName];
  if (savedLayout && Array.isArray(savedLayout.selectedTypes) && Array.isArray(savedLayout.layout)) {
    selectedNeTypes.value = savedLayout.selectedTypes;
    networkElementTypes.value = savedLayout.selectedTypes;

    // 更新布局
    chartOrder.value = savedLayout.layout.filter((item: LayoutItem) =>
      savedLayout.selectedTypes.includes(item.i)
    );

    // 如果有当前选中的网元类型不在保存的布局中，添加它们
    const missingTypes = savedLayout.selectedTypes.filter((type: AllChartType) =>
      !chartOrder.value.some(item => item.i === type)
    );
    missingTypes.forEach((type: AllChartType) => {
      chartOrder.value.push({
        x: (chartOrder.value.length % 2) * 6,
        y: Math.floor(chartOrder.value.length / 2) * 4,
        w: 6,
        h: 4,
        i: type,
      });
    });

    localStorage.setItem('chartOrder', JSON.stringify(chartOrder.value));
    localStorage.setItem('selectedNeTypes', JSON.stringify(selectedNeTypes.value));

    await nextTick();
    await initCharts();

    message.success(t('views.perfManage.kpiKeyTarget.restoreSavedSuccess', { name: t(`views.perfManage.kpiKeyTarget.${layoutName}`)}));
  } else {
    message.warning(t('views.perfManage.kpiKeyTarget.noSavedLayout', { name: t(`views.perfManage.kpiKeyTarget.${layoutName}`)}));
  }
};

// 应用全宽布局
const applyFullWidthLayout = () => {
  isManuallyUpdating.value = true;
  const newLayout = selectedNeTypes.value.map((type, index) => ({
    x: 0,
    y: index * 8,
    w: 12,
    h: 8,
    i: type,
  }));

  nextTick(() => {
    Object.assign(chartOrder.value, newLayout)
    // chartOrder.value = newLayout;
    localStorage.setItem('chartOrder', JSON.stringify(newLayout));
    initCharts();
    // 直接更新图表，不调用 handleLayoutUpdated
    chartOrder.value.forEach((item) => {
      const state = chartStates[item.i];
      if (state?.chart.value) {
        state.chart.value.resize();
        renderChart(item.i);
      }
    });
    isManuallyUpdating.value = false;
  });
};

// 应用两列布局
const applyTwoColumnLayout = () => {
  isManuallyUpdating.value = true;
  const newLayout = selectedNeTypes.value.map((type, index) => ({
    x: (index % 2) * 6,
    y: Math.floor(index / 2) * 4,
    w: 6,
    h: 4,
    i: type,
  }));
  nextTick(() => {
    // chartOrder.value = newLayout;
    Object.assign(chartOrder.value, newLayout)
    localStorage.setItem('chartOrder', JSON.stringify(newLayout));
    initCharts();
    // 直接更新图表，不调用 handleLayoutUpdated
    chartOrder.value.forEach((item) => {
      const state = chartStates[item.i];
      if (state?.chart.value) {
        state.chart.value.resize();
        renderChart(item.i);
      }
    });
    isManuallyUpdating.value = false;
  });
};
</script>
<template>
  <PageContainer>
    <a-card :bordered="false" class="control-card">
      <a-form layout="horizontal">
        <a-row :gutter="16">
          <a-col :lg="4" :md="24" :xs="24">
            <a-form-item :label="realTimeEnabled ? t('views.dashboard.cdr.realTimeDataStart') : t('views.dashboard.cdr.realTimeDataStop')">
              <a-switch
                v-model:checked="realTimeEnabled"
                @change="handleRealTimeSwitch"
              />
            </a-form-item>
          </a-col>
          <a-col :lg="12" :md="24" :xs="24">
            <a-form-item :label="t('views.ne.common.neType')" class="ne-type-select">
              <a-checkbox-group v-model:value="selectedNeTypes" :options="neTypeOptions" />
            </a-form-item>
          </a-col>
          <a-col :lg="6" :md="24" :xs="24">

            <a-form-item>
              <a-dropdown :disabled="isSaving">
                <a-button :loading="isSaving">
                  {{ t('views.perfManage.kpiKeyTarget.saveLayout') }}
                  <DownOutlined />
                </a-button>
                <template #overlay>
                  <a-menu @click="handleSaveLayout">
                    <a-menu-item key="layout1">{{ t('views.perfManage.kpiKeyTarget.layout1') }}</a-menu-item>
                    <a-menu-item key="layout2">{{ t('views.perfManage.kpiKeyTarget.layout2') }}</a-menu-item>
                    <a-menu-item key="layout3">{{ t('views.perfManage.kpiKeyTarget.layout3') }}</a-menu-item>
                  </a-menu>
                </template>
              </a-dropdown>
              <a-dropdown :disabled="isRestoring">
                <a-button :loading="isRestoring">
                  {{ t('views.perfManage.kpiKeyTarget.restoreSaved') }}
                  <DownOutlined />
                </a-button>
                <template #overlay>
                  <a-menu @click="handleRestoreLayout">
                    <a-menu-item key="layout1">{{ t('views.perfManage.kpiKeyTarget.layout1') }}</a-menu-item>
                    <a-menu-item key="layout2">{{ t('views.perfManage.kpiKeyTarget.layout2') }}</a-menu-item>
                    <a-menu-item key="layout3">{{ t('views.perfManage.kpiKeyTarget.layout3') }}</a-menu-item>
                  </a-menu>
                </template>
              </a-dropdown>
              <a-button @click="applyFullWidthLayout">
                {{ t('views.perfManage.kpiKeyTarget.fullWidthLayout') }}
              </a-button>
              <a-button @click="applyTwoColumnLayout">
                {{ t('views.perfManage.kpiKeyTarget.twoColumnLayout') }}
              </a-button>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-card>

    <GridLayout
      v-model:layout="chartOrder"
      :col-num="12"
      :row-height="100"
      :margin="[10, 10]"
      :is-draggable="true"
      :is-resizable="true"
      :vertical-compact="true"
      :use-css-transforms="true"
      :responsive="true"
      :prevent-collision="false"
      @layout-updated="handleLayoutUpdated"
      class="charts-container"
    >
      <GridItem
        v-for="item in chartOrder.filter(i => networkElementTypes.includes(i.i))"
        :key="item.i"
        :x="item.x"
        :y="item.y"
        :w="item.w"
        :h="item.h"
        :i="item.i"
        :min-w="4"
        :min-h="3"
        :is-draggable="true"
        :is-resizable="true"
        :resizable-handles="['se']"
        drag-allow-from=".ant-card-head"
        drag-ignore-from=".no-drag"
        class="grid-item"
      >
        <a-card :bordered="false" class="card-container">
          <template #title>
            <div class="card-header">
              <div class="card-title">
                  <span>{{ (item.i as string).toUpperCase() }}</span>
              </div>
              <a-range-picker
                v-model:value="rangePicker[item.i]"
                :allow-clear="false"
                bordered
                :show-time="{ format: 'HH:mm:ss' }"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="x"
                :placeholder="rangePicker.placeholder"
                style="width: 360px"
                @change="() => fetchData(item.i)"
                class="no-drag"
              ></a-range-picker>
            </div>
          </template>
          <div class='chart'>
            <div :ref="el => { if (el && chartStates[item.i]) chartStates[item.i].chartDom.value = el as HTMLElement }"></div>
          </div>
        </a-card>
      </GridItem>
    </GridLayout>
  </PageContainer>
</template>

<style lang="less" scoped>
.control-card {
  margin-bottom: 16px;
}

.charts-container {
  width: 100%;
  min-height: 600px;
}

.grid-item {
  overflow: visible;
  position: relative;
}

.date-picker-wrapper {
  position: absolute;
  top: -40px;
  left: 0;
  right: 0;
  z-index: 1;
}

.card-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  cursor: move;
  flex-wrap: wrap;  /* 添加这行，允许内容换行 */
  gap: 8px;  /* 添加这行，为换行时的元素之间添加间隔 */
}

.card-title {
  display: flex;
  align-items: center;
  flex-shrink: 0;

  span {
    font-size: 16px;
    font-weight: 500;
  }
}

.chart {
  flex: 1;
  min-height: 0;

  > div {
    width: 100%;
    height: 100%;
  }
}

.switch-label {
  margin-left: 8px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.65);
  white-space: nowrap;
}



:deep(.ant-card-body) {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 16px !important;
  overflow: hidden;
}

:deep(.ant-form-item) {
  margin-bottom: 0;
}

:deep(.ant-form-item-label) {
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);
}

:deep(.anticon) {
  font-size: 16px;
  color: #1890ff;
}

:deep(.ant-select) {
  min-width: 200px;
}

:deep(.ant-card-head) {
  padding: 8px 16px;  /* 减小上下内边距 */
}

:deep(.ant-card-head-title) {
  padding: 8px 0;  /* 减小上下内边距 */
  width: 100%; // 确保标题占据全宽
}

:deep(.ant-range-picker) {
  flex-shrink: 0; // 防止日期选择被压缩
  max-width: 100%; // 确保在小屏幕上不会溢出
}
</style>
