import React, { useCallback, useState, useEffect, useRef } from 'react';
import PanelTitle from '@/pages/Home_v_2504/components/common/PanelTitle';
import DateSelector from '@/components/V2504/DateSelector';
import OverallSection from './components/OverallSection';
import DailyOverallSection from './components/DailyOverallSection';
import AlertTrend from './components/AlertTrend';
import AlertArea from './components/AlertArea';
import AlertRanking from './components/AlertRanking';
import RealtimeMonitoring from './components/RealtimeMonitoring';
import styles from './index.less';
import { useMapState } from '@/pages/Home_v_2504/components/MapStateContext';
import services from '@/services';
import useApiControl, { formatDateTime, useDateParamFormatter } from '@/pages/Home_v_2504/hooks/useApiControl';
import useLatestValue from '@/pages/Home_v_2504/hooks/useLatestValue';
import dayjs from 'dayjs';

// 类型定义
interface AreaData {
  name: string;
  percentage: number;
  count: number;
}

// 定义接口返回数据类型
interface OilStatisticsData {
  gj: number; // 告警次数
  zs: number; // 总数
  lx: number; // 离线数量
  zx: number; // 在线数量
  qy: number; // 区域数量
}

interface AreaAlarmData {
  name: string;
  value: number;
  count: number;
}

interface MonitoringListItem {
  id: string;
  qymc: string; // 企业名称
  zxqk: string; // 在线情况
  jcsj: string; // 监测时间
  zt: string;   // 状态
}

// 定义区域类型
type AreaType = 'all' | 'urban' | 'central' | 'county';

const isUseRealtimeMonitoring = false;
const LeftContent: React.FC = () => {
  // 地图状态
  const { mapState } = useMapState();
  
  // 状态
  const [dateType, setDateType] = useState<string>('day');
  const [dateRange, setDateRange] = useState<{ startTime: string; endTime: string }>({
    startTime: '',
    endTime: '',
  });
  
  // 各组件数据
  const [deviceCount, setDeviceCount] = useState<number>(5.98);
  const [alertCount, setAlertCount] = useState<number>(5.98);
  const [enterpriseCount, setEnterpriseCount] = useState<number>(1423);
  const [alertTrendData, setAlertTrendData] = useState<{ time: string; value: number }[]>([]);
  
  // 油烟统计数据
  const [oilStatistics, setOilStatistics] = useState<OilStatisticsData>({
    gj: 0,
    zs: 0,
    lx: 0,
    zx: 0,
    qy: 0
  });
  
  // 告警区域数据
  const [alertAreaData, setAlertAreaData] = useState<AreaData[]>([]);
  
  // 设置区域类型
  const [areaType, setAreaType] = useState<string>('all');
  
  const [alertRankingData, setAlertRankingData] = useState<AreaData[]>([]);

  // 使用ref存储最新的mapState，避免闭包问题
  const mapStateRef = useLatestValue(mapState);
  const areaTypeRef = useLatestValue(areaType);
  
  // 使用ref存储最新状态，避免闭包问题
  const dateTypeRef = useLatestValue(dateType);
  const dateRangeRef = useLatestValue(dateRange);
  
  // 标记本地时间是否已初始化
  const isDateInitializedRef = useRef(false);
  
  // 标记是否正在加载数据
  const isLoadingDataRef = useRef(false);
  
  // 跟踪上一次API请求参数，避免重复请求
  const lastApiParamsRef = useRef({
    oilStatistics: '',
    alertArea: '',
    alertRanking: '',
    alertTrend: ''
  });
  
  // 跟踪前一次的日期值，避免重复更新
  const prevDateRef = useRef({
    type: 'day',
    startTime: '',
    endTime: ''
  });
  
  // 保持ref最新
  useEffect(() => {
    dateTypeRef.current = dateType;
    dateRangeRef.current = dateRange;
  }, [dateType, dateRange]);
  
  // 初始化本地日期状态（仅一次）
  useEffect(() => {
    if (!isDateInitializedRef.current && 
        mapState.leftPanelTime && 
        mapState.leftPanelTime.startTime && 
        mapState.leftPanelTime.endTime) {
      
      // 从mapState初始化本地日期状态
      setDateType(mapState.leftPanelTime.type || 'day');
      setDateRange({
        startTime: mapState.leftPanelTime.startTime.split(' ')[0],
        endTime: mapState.leftPanelTime.endTime.split(' ')[0]
      });
      
      isDateInitializedRef.current = true;
    }
  }, [mapState.leftPanelTime]);

  // 从 regionTreeResult.json 获取区域数据
  const getRegionCodes = useCallback((areaType: AreaType = 'all', regionCode: string = mapStateRef.current.regionCode) => {
    // 使用提供的区域类型或默认为'all'
    const currentAreaType = areaType || 'all';
    
    // 默认所有区域
    if (currentAreaType === 'all') {
      return regionCode.length > 4 
        ? regionCode 
        : regionCode === '5101' 
          ? '510104,510105,510106,510107,510108,510112,510113,510114,510115,510116,510117,510121,510129,510131,510132,510181,510182,510183,510184,510185'
          : '';
    }
    
    // 城市新区
    if (currentAreaType === 'urban') {
      return '510112,510113,510114,510115,510116,510117';
    }
    
    // 中心城区
    if (currentAreaType === 'central') {
      return '510104,510105,510106,510107,510108';
    }
    
    // 县市新城
    if (currentAreaType === 'county') {
      return '510121,510129,510131,510132,510181,510182,510183,510184,510185';
    }
    
    return '';
  }, []);

  // 日期参数格式化
  const { formatDateParams } = useDateParamFormatter();
  const regionCodeRef = useRef<string>('');
  
  // 使用useApiControl管理油烟统计API调用
  const oilStatisticsApi = useApiControl({
    apiFunction: async (params) => {
      if (!params.startTime || !params.endTime) {
        throw new Error('缺少必要的日期参数');
      }
      
      const response = await services.DataBase.getSjdzInfoData({
        typeCode: 'dp-yyyzt-yytj',
        params,
      });
      
      if (response.code === 200 && response.data) {
        return response.data.data;
      }
      
      throw new Error('获取油烟统计数据失败');
    },
    onSuccess: (data) => {
      // 提取正确路径下的数据
      const record = data?.records?.[0] || {};
      
      setOilStatistics({
        gj: record.gj ?? 0,
        zs: record.zs ?? 0,
        lx: record.lx ?? 0,
        zx: record.zx ?? 0,
        qy: record.qy ?? 0
      });
    },
    onError: (error) => {
      console.error('获取油烟统计数据出错:', error);
      setOilStatistics({
        gj: 0,
        zs: 0,
        lx: 0,
        zx: 0,
        qy: 0
      });
    },
    formatParams: formatDateParams,
    apiName: '油烟统计',
    debounceTime: 300,
    cacheTime: 5000 // 缓存5秒
  });
  
  // 使用useApiControl管理告警区域API调用
  const alertAreaApi = useApiControl({
    apiFunction: async (params) => {
      if (!params.startTime || !params.endTime || !params.districtCodeList) {
        throw new Error('缺少必要的参数');
      }
      
      const response = await services.DataBase.getSjdzInfoData({
        typeCode: 'dp-yyyzt-qygjcs',
        params,
      });
      
      if (response.code === 200 && response.data?.data) {
        return response.data.data;
      }
      
      throw new Error('获取告警区域数据失败');
    },
    onSuccess: (data) => {
      // 提取正确路径下的数据并格式化
      const records = data?.records || [];
      const formattedData = records.map((item: any) => ({
        name: item.districtName || '',
        percentage: item.count || 0,
        count: item.sbs || 0
      }));
      
      setAlertAreaData(formattedData);
    },
    onError: (error) => {
      console.error('获取告警区域数据出错:', error);
      setAlertAreaData([]);
    },
    formatParams: formatDateParams,
    apiName: '告警区域',
    debounceTime: 300,
    cacheTime: 5000 // 缓存5秒
  });

  // 使用useApiControl管理设备告警排行API调用
  const alertRankingApi = useApiControl({
    apiFunction: async (params) => {
      if (!params.startTime || !params.endTime) {
        throw new Error('缺少必要的日期参数');
      }
      
      const response = await services.DataBase.getSjdzInfoData({
        typeCode: 'dp-yyyzt-gjph',
        params,
      });
      
      if (response.code === 200 && response.data?.data) {
        return response.data.data;
      }
      
      throw new Error('获取告警排行数据失败');
    },
    onSuccess: (data) => {
      // 提取正确路径下的数据并格式化
      const records = data?.records || [];
      
      // 先按count从大到小排序
      const sortedData = records.sort((a: any, b: any) => (b.num || 0) - (a.num || 0));
      
      // 找到最大的count值
      const maxCount = sortedData.length > 0 ? sortedData[0].num || 0 : 0;
      
      // 格式化数据并计算percentage
      const formattedData = sortedData.map((item: any) => ({
        name: item.qymc || item.mn || '', // 企业名称
        count: item.num || 0, // 告警次数
        percentage: maxCount > 0 ? Math.round((item.num || 0) / maxCount * 100) : 0 // 计算百分比
      }));
      
      setAlertRankingData(formattedData);
    },
    onError: (error) => {
      console.error('获取告警排行数据出错:', error);
      setAlertRankingData([]);
    },
    formatParams: formatDateParams,
    apiName: '告警排行',
    debounceTime: 300,
    cacheTime: 5000 // 缓存5秒
  });

  // 使用useApiControl管理油烟告警趋势API调用
  const alertTrendApi = useApiControl({
    apiFunction: async (params) => {
      if (!params.startTime || !params.endTime) {
        throw new Error('缺少必要的日期参数');
      }
      
      const response = await services.DataBase.getSjdzInfoData({
        typeCode: 'dp-yyyzt-yygjqs',
        params,
      });
      
      if (response.code === 200 && response.data?.data) {
        return response.data.data;
      }
      
      throw new Error('获取油烟告警趋势数据失败');
    },
    onSuccess: (data) => {
      // 提取正确路径下的数据并格式化
      let records = data?.records || [];
      
      if (records.length > 0) {
        // 如果是月数据，补充到月底  "20250501"
        const isSupplementData = false;
        if (records[0].sj.length === 8 && isSupplementData) {
          // 获取当前日期
          const today = new Date();
          const lastDay = new Date(today.getFullYear(), today.getMonth() + 1, 1);
          // console.log('lastDay:', lastDay);
          
          // 生成完整日期范围
          const fullData = [...records]; // 先复制已有数据
          
          // 从明天开始补充数据
          for (let d = new Date(today); d <= lastDay; d.setDate(d.getDate() + 1)) {
            // 跳过今天及之前的日期
            if (d <= today) continue;
            
            const dateStr = d.toISOString().slice(0, 10).replace(/-/g, '');
            fullData.push({
              sj: dateStr,
              num: 0
            });
          }
          records = fullData;
          console.log('补充到月底的数据:', data);
        }else if (records[0].sj.length === 6 && isSupplementData) {
          // 如果是年数据，补充全年  "202505"
          // 生成完整年份范围
          const fullData = [];
          
          // 从1月到12月补充数据
          for (let m = 1; m <= 12; m++) {
            const monthStr = m.toString().padStart(2, '0');
            const yearMonth = `${records[0].sj.substring(0, 4)}${monthStr}`;
            
            // 查找是否已存在该月份数据
            const existingRecord = records.find((item: any) => item.sj === yearMonth);
            if (existingRecord) {
              fullData.push(existingRecord);
            } else {
              fullData.push({
                sj: yearMonth,
                num: 0
              });
            }
          }
          records = fullData;
          console.log('补充到全年的数据:', records);          
        }

        // 转换接口返回的数据格式为AlertTrend组件需要的格式
        const formattedData = records.map((item: any) => ({
          time: translateTrendTime(item.sj) || '',
          value: item.num || 0
        }));
        
        setAlertTrendData(formattedData);
      } else {
        setAlertTrendData([]);
      }
    },
    onError: (error) => {
      console.error('获取油烟告警趋势数据出错:', error);
      setAlertTrendData([]);
    },
    formatParams: formatDateParams,
    apiName: '油烟告警趋势',
    debounceTime: 300,
    cacheTime: 5000 // 缓存5秒
  });

  const translateTrendTime = (inputDate: string | number) => {
    if (typeof inputDate === 'string') {
      // 处理类似'202504'的格式
      if (inputDate.length === 6) {
        const month = parseInt(inputDate.substring(4, 6));
        return `${month}月`;
      }
      // 处理类似'20250425'的格式
      if (inputDate.length === 8) {
        const month = parseInt(inputDate.substring(4, 6));
        const day = parseInt(inputDate.substring(6, 8));
        return `${month}月${day}日`;
      }
      return inputDate.substring(0, 10);
    }
    // 处理number类型
    if (typeof inputDate === 'number') {
      if (inputDate === 23) {
        return '23:59:59';
      }
      return `${inputDate.toString().padStart(2, '0')}:00:00`;
    }
    return inputDate;
  }

  // 使用useApiControl管理街道告警次数API调用
  const streetAlertAreaApi = useApiControl({
    apiFunction: async (params) => {
      if (!params.startTime || !params.endTime || !params.districtCodeList) {
        throw new Error('缺少必要的参数');
      }
      
      const response = await services.DataBase.getSjdzInfoData({
        typeCode: 'dp-yyyzt-gjcsajd',
        params,
      });
      
      if (response.code === 200 && response.data?.data) {
        return response.data.data;
      }
      
      throw new Error('获取街道告警区域数据失败');
    },
    onSuccess: (data) => {
      // 提取正确路径下的数据并格式化
      const records = data?.records || [];
      const formattedData = records.map((item: any) => ({
        name: item.streetName || '',
        percentage: item.count || 0,
        count: item.sbs || 0
      }));
      
      console.log('街道告警区域数据成功:', formattedData);
      setAlertAreaData(formattedData);
    },
    onError: (error) => {
      console.error('获取街道告警区域数据出错:', error);
      setAlertAreaData([]);
    },
    formatParams: formatDateParams,
    // enableDebug: true,
    apiName: '街道告警区域'
  });

  // 加载油烟统计数据 - 使用本地状态的日期参数
  const loadOilStatistics = useCallback(() => {
    // 使用本地状态的日期参数
    const currentDateType = dateTypeRef.current;
    const currentDateRange = dateRangeRef.current;
    
    // 如果日期状态未初始化，不加载数据
    if (!currentDateRange.startTime || !currentDateRange.endTime) {
      return;
    }
    
    // 处理区县级别和街道级别的不同参数
    const params: any = {};
    
    // 为不同的日期类型正确设置日期参数
    if (currentDateType === 'range') {
      params.startTime = formatDateTime(currentDateRange.startTime);
      params.endTime = formatDateTime(currentDateRange.endTime, true);
    } else if (currentDateType === 'month') {
      // 确保月视图使用正确的月初月末
      const startDate = dayjs(currentDateRange.startTime).startOf('month').format('YYYY-MM-DD');
      const endDate = dayjs(currentDateRange.startTime).endOf('month').format('YYYY-MM-DD');
      params.startTime = formatDateTime(startDate);
      params.endTime = formatDateTime(endDate, true);
    } else if (currentDateType === 'year') {
      // 确保年视图使用正确的年初年末
      const startDate = dayjs(currentDateRange.startTime).startOf('year').format('YYYY-MM-DD');
      const endDate = dayjs(currentDateRange.startTime).endOf('year').format('YYYY-MM-DD');
      params.startTime = formatDateTime(startDate);
      params.endTime = formatDateTime(endDate, true);
    } else {
      // 日视图正常处理
      params.startTime = formatDateTime(currentDateRange.startTime);
      params.endTime = formatDateTime(currentDateRange.endTime, true);
    }
    
    // 检查街道级别，使用上一级区县代码
    if (mapStateRef.current.regionCode.length === 9) {
      console.log('餐饮油烟左侧页面将街道级别转为区县级别:', mapStateRef.current.regionCode);
      // 使用街道代码的前6位作为区县代码
      params.districtCode = mapStateRef.current.regionCode.substring(0, 6);
    } else if (mapStateRef.current.regionCode.length === 6) {
      // 区县级别
      params.districtCode = mapStateRef.current.regionCode;
    }
    
    // 检查参数是否变化，避免重复请求
    const paramsSignature = JSON.stringify(params);
    if (paramsSignature === lastApiParamsRef.current.oilStatistics) {
      console.log('油烟统计数据参数未变化，跳过请求', params);
      return;
    }
    
    // 更新参数签名
    lastApiParamsRef.current.oilStatistics = paramsSignature;
    
    console.log('油烟统计数据请求参数:', params);
    
    // 调用API
    oilStatisticsApi.callApiImmediate(params);
  }, [oilStatisticsApi, dateTypeRef, dateRangeRef, mapStateRef]);

  // 加载告警区域数据 - 使用本地状态的日期参数
  const loadAlertAreaData = useCallback(() => {
    // 使用本地状态的日期参数
    const currentDateType = dateTypeRef.current;
    const currentDateRange = dateRangeRef.current;
    const currentAreaType = areaTypeRef.current;
    
    // 如果日期状态未初始化，不加载数据
    if (!currentDateRange.startTime || !currentDateRange.endTime) {
      return;
    }
    
    // 处理不同区域类型的参数
    const params: any = {};
    
    // 为不同的日期类型正确设置日期参数
    if (currentDateType === 'range') {
      params.startTime = formatDateTime(currentDateRange.startTime);
      params.endTime = formatDateTime(currentDateRange.endTime, true);
    } else if (currentDateType === 'month') {
      // 确保月视图使用正确的月初月末
      const startDate = dayjs(currentDateRange.startTime).startOf('month').format('YYYY-MM-DD');
      const endDate = dayjs(currentDateRange.startTime).endOf('month').format('YYYY-MM-DD');
      params.startTime = formatDateTime(startDate);
      params.endTime = formatDateTime(endDate, true);
    } else if (currentDateType === 'year') {
      // 确保年视图使用正确的年初年末
      const startDate = dayjs(currentDateRange.startTime).startOf('year').format('YYYY-MM-DD');
      const endDate = dayjs(currentDateRange.startTime).endOf('year').format('YYYY-MM-DD');
      params.startTime = formatDateTime(startDate);
      params.endTime = formatDateTime(endDate, true);
    } else {
      // 日视图正常处理
      params.startTime = formatDateTime(currentDateRange.startTime);
      params.endTime = formatDateTime(currentDateRange.endTime, true);
    }
    
    // 检查当前区域级别
    const isRegionCodeChanged = mapStateRef.current.regionCode !== '5101';
    
    // 处理街道级别，使用上一级区县代码
    if (mapStateRef.current.regionCode.length === 9) {
      console.log('餐饮油烟左侧页面将街道级别转为区县级别:', mapStateRef.current.regionCode);
      // 使用街道代码的前6位作为区县代码
      const districtCode = mapStateRef.current.regionCode.substring(0, 6);
      params.districtCodeList = districtCode;
    } else if (isRegionCodeChanged) {
      // 区县级别 - 使用街道接口
      params.districtCodeList = mapStateRef.current.regionCode;
    } else {
      // 非区县级别正常处理
      // 直接使用组件的areaType状态值，而不是ref.current
      // 确保每次areaType变化后getRegionCodes能使用最新值
      const regionCodes = getRegionCodes(areaType as AreaType, mapStateRef.current.regionCode);
      if (regionCodes) {
        params.districtCodeList = regionCodes;
      }
    }
    
    // 检查参数是否变化，避免重复请求
    const paramsSignature = JSON.stringify(params);
    if (paramsSignature === lastApiParamsRef.current.alertArea) {
      console.log('告警区域数据参数未变化，跳过请求', params);
      return;
    }
    
    // 更新参数签名
    lastApiParamsRef.current.alertArea = paramsSignature;
    
    console.log('加载告警区域数据，参数:', params);
    
    // 调用API
    if (isRegionCodeChanged && (mapStateRef.current.regionCode.length <= 6 || mapStateRef.current.regionCode.length === 9)) {
      // 使用街道排行API
      streetAlertAreaApi.callApiImmediate(params);
    } else {
      // 使用普通告警区域API
      alertAreaApi.callApiImmediate(params);
    }
  }, [
    alertAreaApi, 
    streetAlertAreaApi, 
    dateTypeRef, 
    dateRangeRef, 
    mapStateRef, 
    areaTypeRef, 
    getRegionCodes,
    // 添加最新的状态值作为依赖，确保状态变化时能重新执行
    areaType,
    // 添加resetVersion作为依赖，确保reset调用后能重新执行该函数
    alertAreaApi.__resetVersion
  ]);

  // 加载告警排行数据 - 使用本地状态的日期参数
  const loadAlertRankingData = useCallback(() => {
    // 使用本地状态的日期参数
    const currentDateType = dateTypeRef.current;
    const currentDateRange = dateRangeRef.current;
    
    // 如果日期状态未初始化，不加载数据
    if (!currentDateRange.startTime || !currentDateRange.endTime) {
      return;
    }
    
    // 构建请求参数
    const params: any = {};
    
    // 为不同的日期类型正确设置日期参数
    if (currentDateType === 'range') {
      params.startTime = formatDateTime(currentDateRange.startTime);
      params.endTime = formatDateTime(currentDateRange.endTime, true);
    } else if (currentDateType === 'month') {
      // 确保月视图使用正确的月初月末
      const startDate = dayjs(currentDateRange.startTime).startOf('month').format('YYYY-MM-DD');
      const endDate = dayjs(currentDateRange.startTime).endOf('month').format('YYYY-MM-DD');
      params.startTime = formatDateTime(startDate);
      params.endTime = formatDateTime(endDate, true);
    } else if (currentDateType === 'year') {
      // 确保年视图使用正确的年初年末
      const startDate = dayjs(currentDateRange.startTime).startOf('year').format('YYYY-MM-DD');
      const endDate = dayjs(currentDateRange.startTime).endOf('year').format('YYYY-MM-DD');
      params.startTime = formatDateTime(startDate);
      params.endTime = formatDateTime(endDate, true);
    } else {
      // 日视图正常处理
      params.startTime = formatDateTime(currentDateRange.startTime);
      params.endTime = formatDateTime(currentDateRange.endTime, true);
    }
    
    // 处理区域信息，街道级别转为区县
    if (mapStateRef.current.regionCode.length === 9) {
      console.log('餐饮油烟左侧页面将街道级别转为区县级别:', mapStateRef.current.regionCode);
      // 使用街道代码的前6位作为区县代码
      params.districtCode = mapStateRef.current.regionCode.substring(0, 6);
    } else if (mapStateRef.current.regionCode.length === 6) {
      // 区县级别
      params.districtCode = mapStateRef.current.regionCode;
    }
    
    // 检查参数是否变化，避免重复请求
    const paramsSignature = JSON.stringify(params);
    if (paramsSignature === lastApiParamsRef.current.alertRanking) {
      console.log('告警排行数据参数未变化，跳过请求', params);
      return;
    }
    
    // 更新参数签名
    lastApiParamsRef.current.alertRanking = paramsSignature;
    
    console.log('告警排行数据请求参数:', params);
    
    // 调用API
    alertRankingApi.callApiImmediate(params);
  }, [alertRankingApi, dateTypeRef, dateRangeRef, mapStateRef]);

  // 加载告警趋势数据 - 使用本地状态的日期参数
  const loadAlertTrendData = useCallback(() => {
    // 使用本地状态的日期参数
    const currentDateType = dateTypeRef.current;
    const currentDateRange = dateRangeRef.current;
    
    // 如果日期状态未初始化，不加载数据
    if (!currentDateRange.startTime || !currentDateRange.endTime) {
      return;
    }
    
    // 构建请求参数
    const params: any = {};
    
    // 为不同的日期类型正确设置日期参数
    if (currentDateType === 'range') {
      params.startTime = formatDateTime(currentDateRange.startTime);
      params.endTime = formatDateTime(currentDateRange.endTime, true);
    } else if (currentDateType === 'month') {
      // 确保月视图使用正确的月初月末
      const startDate = dayjs(currentDateRange.startTime).startOf('month').format('YYYY-MM-DD');
      const endDate = dayjs(currentDateRange.startTime).endOf('month').format('YYYY-MM-DD');
      params.startTime = formatDateTime(startDate);
      params.endTime = formatDateTime(endDate, true);
    } else if (currentDateType === 'year') {
      // 确保年视图使用正确的年初年末
      const startDate = dayjs(currentDateRange.startTime).startOf('year').format('YYYY-MM-DD');
      const endDate = dayjs(currentDateRange.startTime).endOf('year').format('YYYY-MM-DD');
      params.startTime = formatDateTime(startDate);
      params.endTime = formatDateTime(endDate, true);
    } else {
      // 日视图正常处理
      params.startTime = formatDateTime(currentDateRange.startTime);
      params.endTime = formatDateTime(currentDateRange.endTime, true);
    }
    
    // 处理区域信息，街道级别转为区县
    if (mapStateRef.current.regionCode.length === 9) {
      console.log('餐饮油烟左侧页面将街道级别转为区县级别:', mapStateRef.current.regionCode);
      // 使用街道代码的前6位作为区县代码
      params.districtCode = mapStateRef.current.regionCode.substring(0, 6);
    } else if (mapStateRef.current.regionCode.length === 6) {
      // 区县级别
      params.districtCode = mapStateRef.current.regionCode;
    }
    
    params.type = translateDateType(currentDateType); // 添加日期类型参数
    
    // 检查参数是否变化，避免重复请求
    const paramsSignature = JSON.stringify(params);
    if (paramsSignature === lastApiParamsRef.current.alertTrend) {
      console.log('油烟告警趋势数据参数未变化，跳过请求', params);
      return;
    }
    
    // 更新参数签名
    lastApiParamsRef.current.alertTrend = paramsSignature;
    
    console.log('油烟告警趋势数据请求参数:', params);
    
    // 调用API
    alertTrendApi.callApiImmediate(params);
  }, [alertTrendApi, dateTypeRef, dateRangeRef, mapStateRef]);

  const translateDateType = (dateType: string) => {
    if(dateType === 'range') {
      return 'month';
    }
    return dateType;
  }

  // 加载所有左侧面板数据 - 仅加载必要的数据，避免重复请求
  const loadAllLeftPanelData = useCallback(() => {
    // 防止重复加载
    if (isLoadingDataRef.current) {
      return;
    }
    
    isLoadingDataRef.current = true;
    
    try {
      // 告警区域数据始终加载
      loadAlertAreaData();
      
      // 告警趋势数据始终加载
      loadAlertTrendData();
      
      // 油烟统计数据始终加载
      loadOilStatistics();
      
      // 告警排行数据仅在非日视图加载
      if (!isUseRealtimeMonitoring || dateTypeRef.current !== 'day') {
        loadAlertRankingData();
      }
    } finally {
      isLoadingDataRef.current = false;
    }
    
  }, [loadOilStatistics, loadAlertAreaData, loadAlertRankingData, loadAlertTrendData, dateTypeRef]);

  // 在本地日期状态变化时重新加载数据
  useEffect(() => {
    // 只有当日期范围已初始化时才加载数据
    if (isDateInitializedRef.current && dateRange.startTime && dateRange.endTime) {
      loadAllLeftPanelData();
    }
  }, [dateType, dateRange, loadAllLeftPanelData]);

  // 监听MapStateContext日期变更事件，只处理左侧面板的变更
  useEffect(() => {
    const handleMapDateChange = (event: CustomEvent) => {
      const { panel, type, startTime, endTime } = event.detail;
      
      // 只处理左侧面板的变更
      if (panel !== 'left') return;
      
      console.log('接收到左侧面板日期变更事件:', event.detail);
      
      // 检查是否真的变化了
      const prevValues = prevDateRef.current;
      if (prevValues.type === type && 
          prevValues.startTime === startTime.split(' ')[0] && 
          prevValues.endTime === endTime.split(' ')[0]) {
        console.log('日期未实际变化，忽略事件');
        return;
      }
      
      // 更新前一次值的引用
      prevDateRef.current = {
        type,
        startTime: startTime.split(' ')[0],
        endTime: endTime.split(' ')[0]
      };
      
      // 更新状态
      setDateType(type);
      setDateRange({
        startTime: startTime.split(' ')[0],
        endTime: endTime.split(' ')[0]
      });
      
      // 标记日期已初始化
      isDateInitializedRef.current = true;
      
      // 重置API状态
      oilStatisticsApi.reset();
      alertAreaApi.reset();
      alertRankingApi.reset();
      alertTrendApi.reset();
      streetAlertAreaApi.reset();
    };
    
    // 添加监听器
    window.addEventListener('mapDateChange', handleMapDateChange as EventListener);
    
    // 移除监听器
    return () => {
      window.removeEventListener('mapDateChange', handleMapDateChange as EventListener);
    };
  }, [oilStatisticsApi, alertAreaApi, alertRankingApi, alertTrendApi, streetAlertAreaApi]);

  // 处理区域类型变化
  const handleAreaTypeChange = useCallback((type: string) => {
    // 检查区域类型是否真的变化了
    if (type === areaType) {
      console.log('区域类型未发生变化，忽略更新');
      return;
    }
    
    console.log('区域类型变化:', type);
    setAreaType(type);
    
    // 清除参数签名缓存，确保下次加载会发送请求
    lastApiParamsRef.current.alertArea = '';
    
    // 重置API状态 - 只重置告警区域相关的API
    // 由于useApiControl增加了resetVersion，reset调用会触发组件重新渲染
    // loadAlertAreaData会通过依赖alertAreaApi.__resetVersion自动执行
    alertAreaApi.reset();
  }, [areaType, alertAreaApi]);

  // 重新加载数据的条件：区域变化
  useEffect(() => {
    if (!mapState.regionCode) {
      return;
    }
    
    // 街道层级(regionCode长度为9)不直接响应，但应该响应区县级
    // 不需要特殊处理，直接让每个API调用时自行处理参数
    
    // 只有当区域代码变化时才重置API状态和加载数据
    if (regionCodeRef.current !== mapState.regionCode) {
      console.log('区域代码变化，重新加载数据:', {
        from: regionCodeRef.current,
        to: mapState.regionCode
      });
      
      // 重置API控制器状态
      oilStatisticsApi.reset();
      alertAreaApi.reset();
      alertRankingApi.reset();
      alertTrendApi.reset();
      streetAlertAreaApi.reset();
      
      // 更新引用值
      regionCodeRef.current = mapState.regionCode;
      
      // 清除所有参数签名缓存
      lastApiParamsRef.current = {
        oilStatistics: '',
        alertArea: '',
        alertRanking: '',
        alertTrend: ''
      };
      
      // 只有当日期已初始化时才加载数据
      if (isDateInitializedRef.current && dateRange.startTime && dateRange.endTime) {
        loadAllLeftPanelData();
      }
    }
  }, [
    mapState.regionCode,
    loadAllLeftPanelData,
    oilStatisticsApi,
    alertAreaApi,
    alertRankingApi,
    alertTrendApi,
    streetAlertAreaApi,
    dateRange
  ]);

  // 根据日期类型渲染不同的整体情况组件
  const renderOverallSection = () => {
    if (dateType === 'day') {
      return (
        <DailyOverallSection 
          deviceCount={oilStatistics.zs}
          alertCount={oilStatistics.gj}
          onlineRate={oilStatistics.zx}
          offlineRate={oilStatistics.lx}
        />
      );
    } else if (dateType === 'range' || dateType === 'year') {
      return (
        <OverallSection 
          deviceCount={oilStatistics.qy}
          alertCount={oilStatistics.gj}
          isEnterprise={true}
        />
      );
    } else {
      // 月视图
      return (
        <OverallSection 
          deviceCount={oilStatistics.qy}
          alertCount={oilStatistics.gj}
          isEnterprise={true}
        />
      );
    }
  };

  // 根据日期类型渲染右侧内容
  const renderRightContent = () => {
    if (isUseRealtimeMonitoring && dateType === 'day') {
      const params = {};
      
      if (mapState.regionCode.length === 6) {
        // 区县级别
        Object.assign(params, { districtCode: mapState.regionCode });
      } else if (mapState.regionCode.length === 9) {
        // 街道级别
        Object.assign(params, { 
          districtCode: mapState.regionCode.substring(0, 6),
          streetCode: mapState.regionCode
        });
      }
      
      // 使用本地状态的日期，而不是从mapState获取
      return (
        <RealtimeMonitoring 
          startTime={dateRange.startTime}
          endTime={dateRange.endTime}
          regionParams={params}
          key={`monitoring-${dateRange.startTime}-${dateRange.endTime}-${mapState.regionCode}`}
        />
      );
    } else {
      return (
        <AlertRanking
          data={alertRankingData}
        />
      );
    }
  };

  // 处理日期变化 - 从DateSelector组件直接调用的处理函数
  // 注意：主要的日期处理逻辑由mapDateChange事件来处理
  const handleDateChange = useCallback((params: { type: string; startTime: string; endTime: string }) => {
    console.log('DateSelector直接回调: LeftContent', params);
    // 不在这里更新状态，让mapDateChange事件处理程序来做
  }, []);

  return (
    <div className={styles.container}>
      {/* 标题 */}
      <div className={styles.header}>
        <PanelTitle title="餐饮油烟实况" />
      </div>

      <div className={styles.contentWrapper}>
        {/* 左侧内容区域 */}
        <div className={styles.leftSection}>
          {/* 整体情况 - 根据日期类型渲染不同组件 */}
          {renderOverallSection()}

          {/* 告警趋势 */}
          <AlertTrend
            data={alertTrendData}
            dateType={dateType}
          />

          {/* 告警区域 */}
          <AlertArea
            data={alertAreaData}
            onTabChange={handleAreaTypeChange}
          />
        </div>

        {/* 右侧内容区域 - 根据日期类型渲染不同组件 */}
        <div className={styles.rightSection}>
          {renderRightContent()}
        </div>
      </div>
    </div>
  );
};

export default LeftContent; 