import services from '@/services';
import { Flex } from 'antd';
import classNames from 'classnames';
import React, { useEffect, useState } from 'react';
import HighFrequencyArea from './HighFrequencyArea';
import HighFrequencyType from './HighFrequencyType';
import styles from './index.less';
import Problem from './Problem';
import PeopleComplaint from './PeopleComplaint';

const UrbanManagementIssues: React.FC = () => {
  const [activeTab, setActiveTab] = useState('urbanManagement');
  const [categoryStatistics, setCategoryStatistics] = useState([]);
  const [areaStatistics, setAreaStatistics] = useState([]);

  useEffect(() => {
    getCategoryAnalysis();
    getAreaAnalysis();
  }, []);


  // 获取高发类型和区域统计数据
  const getCategoryAnalysis = (category = 'mainClass') => {
    const params = {
      category: category,
      sourceSystemCode: '',
    };
    services.CityProblemApi.getCategoryAnalysisApi(params).then((res) => {
      if (res.code === 200) {
        setCategoryStatistics(res.data);
      }
    });
  };

  const getAreaAnalysis = () => {
    const params = {
      region: 'district',
      sourceSystemCode: '',
    };
    services.CityProblemApi.getAreaAnalysisApi(params).then((res) => {
      if (res.code === 200) {
        setAreaStatistics(res.data);
      }
    });
  };
  
  const onChangeCategory = (value: string) => {
    getCategoryAnalysis(value)
  }
  
  const tabItems = [
    {
      key: 'urbanManagement',
      label: '城管问题',
      children: (
        <div className={styles.tabContent}>
          <Problem />
          <HighFrequencyType categoryStatistics={categoryStatistics} onTabChange={onChangeCategory}/>
          <HighFrequencyArea areaStatistics={areaStatistics} />
        </div>
      ),
    },
    {
      key: 'complaints',
      label: '老百姓投诉情况',
      children: <PeopleComplaint />
    },
  ];

  return (
    <div className={styles.container}>
      <div className={styles.header}>
        <Flex gap={36}>
          {tabItems.map((item, index) => {
            return (
              <div
                key={index}
                onClick={() => {
                  setActiveTab(item.key);
                }}
                className={classNames(
                  styles.tabItem,
                  activeTab === item.key ? styles.active : undefined,
                )}
              >
                {item.label}
              </div>
            );
          })}
        </Flex>

        <div className={styles.dateText}>
          {activeTab === 'urbanManagement' ? '2024-11-15至今' : '近一月'}
        </div>
      </div>
      <div className={styles.content}>
        {tabItems.find((item) => item.key === activeTab)?.children}
      </div>
    </div>
  );
};

export default UrbanManagementIssues;
