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';

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

interface AreaData {
  name: string;
  percentage: number;
  count: number;
}

interface AlertAreaProps {
  data?: AreaData[];
  onTabChange?: (key: string) => void;
}

const AlertArea: React.FC<AlertAreaProps> = ({ 
  data = [
    { name: '锦江区', percentage: 11520, count: 253 },
    { name: '金牛区', percentage: 11200, count: 200 },
    { name: '成华区', percentage: 11000, count: 167 },
    { name: '青羊区', percentage: 10900, count: 150 },
    { name: '双流区', percentage: 10800, count: 152 },
    { name: '武侯区', percentage: 10700, count: 167 },
    { name: '龙泉驿区', percentage: 10600, count: 167 },
  ],
  onTabChange
}) => {
  const [activeAreaType, setActiveAreaType] = useState<AreaType>('all');

  // 处理Tab切换
  const handleTabChange = (key: string) => {
    setActiveAreaType(key as AreaType);
    if (onTabChange) {
      onTabChange(key);
    }
  };

  return (
    <div className={styles.alertAreaSection}>
      <ModuleTitleWithTabs 
        title="告警区域" 
        tabs={[
          { key: 'all', label: '全部' },
          { key: 'urban', label: '城市新区' },
          { key: 'central', label: '中心城区' },
          { key: 'county', label: '县市新城' },
        ]}
        activeKey={activeAreaType}
        onTabChange={handleTabChange}
        enableDistrictCheck={true}
      />
      <div className={styles.alertAreaContent}>
        <AreaBarList 
          data={data} 
          showCount={true}
          height={290}
          progressColor={{ from: 'rgb(255, 204, 122)', to: 'rgb(255, 148, 148)' }}
          percentageUnit="次"
          unit="个"
          percentageFixed={0}
        />
      </div>
    </div>
  );
};

export default AlertArea; 