import React, { useState, useEffect, useRef, useCallback } from 'react';
import ModuleTitleWithTabs from '@/pages/Home_v_2504/components/common/ModuleTitleWithTabs';
import { ColumnsType } from 'antd/es/table';
import styles from './index.less';
import services from '@/services';
import useApiControl, { formatDateTime, useDateParamFormatter } from '@/pages/Home_v_2504/hooks/useApiControl';
import BlueTableWithScroll from '@/components/BlueTableWithScroll';
import { useGlobalModalServices } from '@/pages/GlobalModalServices/provider';
import useLatestValue from '@/pages/Home_v_2504/hooks/useLatestValue';

interface MonitoringData {
  id: string;
  enterpriseName: string;
  onlineStatus: string;
  monitoringTime: string;
  status: string;
  key: string;
  mn?: string; // 设备编号
}

interface RealtimeMonitoringProps {
  startTime: string;
  endTime: string;
  regionParams: {
    districtCode?: string;
    streetCode?: string;
  };
}

const RealtimeMonitoring: React.FC<RealtimeMonitoringProps> = ({
  startTime,
  endTime,
  regionParams
}) => {
  // 获取全局弹窗服务
  const { dispatch } = useGlobalModalServices();
  
  const [dataSource, setDataSource] = useState<MonitoringData[]>([]);
  const [currentPage, setCurrentPage] = useState<number>(0);
  const [pageSize, setPageSize] = useState<number>(20);
  const [total, setTotal] = useState<number>(0);
  
  // 使用useLatestValue存储最新的props和状态，避免闭包问题
  const startTimeRef = useLatestValue(startTime);
  const endTimeRef = useLatestValue(endTime);
  const regionParamsRef = useLatestValue(regionParams);
  const currentPageRef = useLatestValue(currentPage);
  
  // 添加记录最后参数的ref，用于比较参数是否真正变化
  const lastParamsRef = useRef<string>('');
  // 添加标记初始渲染的ref，防止重复加载
  const isInitialMountRef = useRef(true);
  // 添加强制刷新计数器
  const forceRefreshCountRef = useRef(0);
  // 添加定时器引用
  const timerRef = useRef<NodeJS.Timeout | null>(null);
  
  // 日期格式化工具
  const { formatDateParams } = useDateParamFormatter();
  
  // 使用useApiControl管理实时监测API调用
  const monitoringApi = useApiControl({
    apiFunction: async (params) => {
      if (!params.startTime || !params.endTime) {
        throw new Error('缺少必要的日期参数');
      }
      
      const response = await services.DataBase.getSjdzInfoData({
        typeCode: 'dp-yyyzt-zjjc',
        params,
      });
      
      if (response.code === 200 && response.data?.data) {
        return response.data.data;
      }
      
      throw new Error('获取实时监测数据失败');
    },
    onSuccess: (data, params) => {
      const { records } = data;
      
      if (records?.length > 0) {
        const record = records[0];
        console.log('RealtimeMonitoring获取数据成功', record);
        
        if (record.list && Array.isArray(record.list)) {
          setTotal(record.page.total);
          
          // 处理返回数据
          const formattedData = record.list.map((item: any, index: number) => ({
            key: `${index + 1}`,
            id: item.id || `${index + 1}`,
            enterpriseName: item.qymc || item.mn || '--', // 企业名称
            onlineStatus: item.onlineStatus || '在线',  // 在线情况
            monitoringTime: item.datetime || '--',  // 监测时间
            status: item.alarmStatus || '正常',          // 状态
            mn: item.mn || '', // 保存设备编号
          }));
          
          // 检查是否是第一页数据，如果是则替换数据源，否则追加
          if (params.pageNo === 0) {
            setDataSource(formattedData);
          } else {
            setDataSource(prevData => [...prevData, ...formattedData]);
          }
        } else {
          // 只有在第一页时清空数据源
          if (params.pageNo === 0) {
            setDataSource([]);
          }
        }
      } else {
        // 只有在第一页时清空数据源
        if (params.pageNo === 0) {
          setDataSource([]);
        }
      }
    },
    onError: (error, params) => {
      console.error('获取实时监测数据出错:', error);
      // 只有在第一页时清空数据源
      if (params.pageNo === 0) {
        setDataSource([]);
        setTotal(0);
      }
    },
    formatParams: formatDateParams,
    apiName: '实时监测',
    debounceTime: 300,
    cacheTime: 5000 // 缓存5秒
  });
  
  // 处理设备点击，显示设备详情弹窗
  const handleDeviceClick = useCallback((record: MonitoringData) => {
    // 目前功能被禁用，返回空实现
    return;
  }, []);
  
  // 构建API请求参数
  const buildApiParams = useCallback((page: number = 0) => {
    // 检查并处理街道级别参数
    let params = {
      pageSize,
      pageNo: page,
      startTime: formatDateTime(startTimeRef.current),
      endTime: formatDateTime(endTimeRef.current, true),
    };
    
    // 将街道级别转换为区县级别
    if (regionParamsRef.current?.streetCode?.length === 9) {
      console.log('餐饮油烟左侧实时监测将街道级别转为区县级别:', regionParamsRef.current.streetCode);
      // 使用街道代码的前6位作为区县代码
      return {
        ...params,
        districtCode: regionParamsRef.current.streetCode.substring(0, 6)
      };
    }
    
    // 正常处理其他级别
    return {
      ...params,
      ...(regionParamsRef.current || {})
    };
  }, [pageSize, startTimeRef, endTimeRef, regionParamsRef]);
  
  // 加载数据 - 使用稳定的引用以避免不必要的重新渲染
  const loadDataRef = useRef((page: number = 0, isReset: boolean = false) => {
    if (!startTimeRef.current || !endTimeRef.current) {
      return;
    }
    
    const params = buildApiParams(page);
    
    // 参数签名，用于比较参数是否有实际变化
    const paramsSignature = JSON.stringify(params);
    
    // 如果是非重置加载，并且参数没有变化，则跳过
    if (!isReset && paramsSignature === lastParamsRef.current) {
      console.log('RealtimeMonitoring参数未变化，跳过API调用', params);
      return;
    }
    
    console.log('RealtimeMonitoring执行API调用，参数:', params);
    
    // 更新最后参数签名
    lastParamsRef.current = paramsSignature;
    
    if (isReset) {
      console.log('RealtimeMonitoring重置数据源和API状态');
      // 重置数据源和API状态
      setDataSource([]);
      monitoringApi.reset();
    }
    
    monitoringApi.callApi(params);
  });

  // 15秒定时刷新数据
  useEffect(() => {
    // 每15秒刷新一次数据
    const startRefreshTimer = () => {
      // 清除旧定时器（如果存在）
      if (timerRef.current) {
        clearInterval(timerRef.current);
      }
      
      // 设置新定时器
      timerRef.current = setInterval(() => {
        console.log('RealtimeMonitoring定时刷新数据');
        // 使用page=0强制刷新第一页数据
        loadDataRef.current(0, true);
      }, 15000); // 15秒间隔
    };
    
    // 启动定时器
    startRefreshTimer();
    
    // 组件卸载时清除定时器
    return () => {
      if (timerRef.current) {
        clearInterval(timerRef.current);
        timerRef.current = null;
      }
    };
  }, []);
  
  // 合并两个useEffect，并确保初次加载数据
  useEffect(() => {
    // 确保loadDataRef.current总是最新的实现
    loadDataRef.current = (page: number = 0, isReset: boolean = false) => {
      if (!startTimeRef.current || !endTimeRef.current) {
        return;
      }
      
      const params = buildApiParams(page);
      
      // 参数签名，用于比较参数是否有实际变化
      const paramsSignature = JSON.stringify(params);
      
      // 如果是非重置加载，并且参数没有变化，则跳过
      if (!isReset && paramsSignature === lastParamsRef.current) {
        console.log('RealtimeMonitoring参数未变化，跳过API调用', params);
        return;
      }
      
      // 更新最后参数签名
      lastParamsRef.current = paramsSignature;
      
      if (isReset) {
        console.log('RealtimeMonitoring重置数据源和API状态');
        // 重置数据源和API状态
        setDataSource([]);
        monitoringApi.reset();
      }
      
      monitoringApi.callApi(params);
    };
    
    // 检查参数是否有实际变化
    const newParams = {
      startTime,
      endTime,
      ...regionParams,
      // 添加强制刷新计数器来确保初始渲染时必定请求API
      _refresh: isInitialMountRef.current ? forceRefreshCountRef.current++ : undefined
    };
    
    console.log('RealtimeMonitoring检查参数变化:', {
      newParams,
      isInitialMount: isInitialMountRef.current,
      lastParamsJson: lastParamsRef.current
    });
    
    const paramsSignature = JSON.stringify(newParams);
    
    // 初次渲染时必须加载数据，否则只在参数变化时加载
    if (isInitialMountRef.current || paramsSignature !== lastParamsRef.current) {
      console.log('RealtimeMonitoring初次渲染或参数变化，加载数据:', newParams);
      // 重置页码并加载第一页数据
      setCurrentPage(0);
      // 初次渲染时，将isInitialMountRef设为false并完全重置API
      if (isInitialMountRef.current) {
        console.log('RealtimeMonitoring初次渲染，重置标志和强制加载数据');
        isInitialMountRef.current = false;
        monitoringApi.reset();
        lastParamsRef.current = ''; // 强制清空上一次参数
      }
      loadDataRef.current(0, true);
    } else {
      console.log('RealtimeMonitoring参数未实际变化，跳过加载', {
        current: newParams,
        previous: JSON.parse(lastParamsRef.current)
      });
    }
    
    // 组件卸载时重置API状态
    return () => {
      monitoringApi.reset();
    };
  }, [buildApiParams, monitoringApi]);
  
  // 处理滚动加载更多
  const handleTableScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {
    const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
    
    // 当滚动到底部时加载下一页，并且确保当前没有正在进行的请求
    if (scrollHeight - scrollTop - clientHeight < 20 && 
        dataSource.length < total && 
        !monitoringApi.loading) {
      
      const nextPage = currentPageRef.current + 1;
      setCurrentPage(nextPage);
      loadDataRef.current(nextPage);
    }
  }, [dataSource.length, total, monitoringApi.loading, currentPageRef]);

  const translateWarningStatus = (status: string) => {
    switch (status) {
      case '否':
        return '正常';
      case '是':
        return '告警';
      default:
        return '--';
    }
  }

  // 定义表格列
  const columns: ColumnsType<MonitoringData> = [
    {
      title: '告警企业',
      dataIndex: 'enterpriseName',
      key: 'enterpriseName',
      ellipsis: true,
      width: 180,
      render: (text, record) => (
        <div 
          className={styles.deviceLink}
          onClick={() => handleDeviceClick(record)}
          style={{
            whiteSpace: 'nowrap',
            overflow: 'hidden',
            textOverflow: 'ellipsis',
            maxWidth: '100%',
            display: 'inline-block'
          }}
        >
          {text}
        </div>
      )
    },
    {
      title: '在线情况',
      dataIndex: 'onlineStatus',
      key: 'onlineStatus',
      width: 100,
      render: (text) => (
        <div className={styles.statusTag}>{text}</div>
      )
    },
    {
      title: '监测时间',
      dataIndex: 'monitoringTime',
      key: 'monitoringTime',
      width: 120,
      render: (text) => {
        if (!text) return '--';
        try {
          const timePart = text.split(' ')[1];
          return timePart ? timePart.slice(0, 5) : '--';
        } catch (e) {
          return '--';
        }
      }
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      width: 90,
      render: (text) => (
        <div className={`${styles.statusTag} ${translateWarningStatus(text) === '告警' ? styles.warningTag : ''}`}>
          {translateWarningStatus(text)}
        </div>
      )
    }
  ];

  return (
    <div className={styles.container}>
      <ModuleTitleWithTabs title="实时监测" />
      <div 
        className={styles.tableContainer} 
        onScroll={handleTableScroll}
      >
        <BlueTableWithScroll
          columns={columns}
          dataSource={dataSource}
          pagination={false}  // 禁用分页，改用滚动加载
          size="middle"
          scroll={{ y: 840 }}
          loading={monitoringApi.loading}
          enableScrollLoading={true}  // 启用滚动加载
          onTableScroll={handleTableScroll}  // 使用表格滚动事件
        />
      </div>
    </div>
  );
};

export default RealtimeMonitoring; 