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

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

  // tabs内容
  const defalutTabItems = [
    {
      key: '1',
      label: '今日',
    },
    {
      key: '2',
      label: '昨日',
    },
    {
      key: '3',
      label: '本周',
    },
    {
      key: '4',
      label: '本月',
    },
  ];

  // 获取高发类型和区域统计数据
  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 changeListTab = (value: string) => {
    console.log(value);
  };

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

  const tabItems = useMemo(
    () => [
      {
        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}>
        {/* <span className={styles.title}>城管问题</span> */}
        <Flex gap={36}>
          {tabItems.map((item, index) => {
            return (
              <div
                key={index}
                onClick={() => {
                  setActiveTab(item.key);
                }}
                className={classNames(styles.tabItem, {
                  [styles.active]: activeTab === item.key,
                })}
              >
                {item.label}
              </div>
            );
          })}
        </Flex>
        {/* <Tabs
          onChange={changeListTab}
          itemkey={'key'}
          items={defalutTabItems}
        /> */}

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

export default UrbanManagementIssues;
