import React, { useState } from 'react';
import ModuleTitleWithTabs from '@/pages/Home_v_2504/components/common/ModuleTitleWithTabs';
import AreaBarList from '@/components/V2504/AreaBarList';
import styles from './index.less';
import { useGlobalModalServices } from '@/pages/GlobalModalServices/provider';

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

interface AreaData {
  name: string;
  percentage: number;
  count: number;
  deviceId?: string; // 添加设备ID
}

interface AlertRankingProps {
  data?: AreaData[];
  startTime?: string;
  endTime?: string;
}

const AlertRanking: React.FC<AlertRankingProps> = ({ 
  data = [
    { name: '成都麻辣传奇火锅店', percentage: 87.2, count: 7582, deviceId: '867387060270652' },
    { name: '宽窄巷子老灶火锅', percentage: 83.5, count: 7277, deviceId: '867387060270653' },
    { name: '锦鲤古街风情火锅', percentage: 70.8, count: 7004, deviceId: '867387060270654' },
    { name: '辣斗拉火锅春熙路店', percentage: 65.6, count: 6985, deviceId: '867387060270655' },
    { name: '川西坝子火锅', percentage: 62.9, count: 6932, deviceId: '867387060270656' },
    { name: '蜀九香火锅', percentage: 60.6, count: 6820, deviceId: '867387060270657' },
    { name: '巴蜀大将火锅', percentage: 58.5, count: 6755, deviceId: '867387060270658' },
    { name: '龙抄手火锅', percentage: 55.4, count: 6666, deviceId: '867387060270659' },
    { name: '老妈蹄花火锅', percentage: 50.3, count: 6338, deviceId: '867387060270660' },
    { name: '钢管厂老火锅', percentage: 48.2, count: 6000, deviceId: '867387060270661' },
    { name: '洞子口张老二凉粉', percentage: 45.1, count: 5882, deviceId: '867387060270662' },
    { name: '川西印象火锅', percentage: 42.0, count: 5661, deviceId: '867387060270663' },
  ],
  startTime = '2025-04-01',
  endTime = '2025-04-30'
}) => {
  // 获取全局弹窗服务
  const { dispatch } = useGlobalModalServices();
  
  // 处理企业点击事件，显示告警详情弹窗
  const handleItemClick = (item: AreaData) => {
    return;
    console.log('点击企业:', item);
    
    if (!item.name) {
      console.error('缺少设备ID');
      return;
    }
    
    // 存储当前选中的企业信息，供弹窗使用
    sessionStorage.setItem('selectedAlarm', JSON.stringify({
      deviceName: '--', //item.name,
      deviceId: item.name,
      alarmCount: item.count,
      startTime,
      endTime
    }));
    
    // 显示告警详情弹窗
    dispatch.push('RestaurantOilAlarm');
  };

  return (
    <div className={styles.alertRankingSection}>
      <ModuleTitleWithTabs 
        title="告警排行" 
        // tabs={[
        //   { key: 'all', label: '全部' },
        //   { key: 'urban', label: '城市新区' },
        //   { key: 'central', label: '中心城区' },
        //   { key: 'county', label: '县市新城' },
        // ]}
        // activeKey={activeRankingType}
        // onTabChange={(key) => setActiveRankingType(key as AreaType)}
      />
      <div className={styles.alertRankingContent}>
        <AreaBarList 
          data={data} 
          showCount={true}
          showPercentage={false}
          height={754}
          progressColor={{ from: 'rgb(0, 185, 255)', to: 'rgb(121, 255, 209)' }}
          unit="次"
          // 通过click事件实现，不直接传递onItemClick
          onClick={(item: any) => handleItemClick(item)}
        />
      </div>
    </div>
  );
};

export default AlertRanking; 