import Tabs from '@/components/Tabs';
import services from '@/services';
import { useSetState } from 'ahooks';
import { Tabs as AntdTabs, Flex, Space } from 'antd';
import { useEffect, useMemo, useState } from 'react';
import { ChildrenModalMethods } from '../../type';
import CountyProblem from './CountyProblem';
import DisposeProblem from './DisposeProblem';
import ExceedTimeCard from './ExceedTimeCard';
import ProblemRank from './ProblemRank';
import ProblemTendencyCard from './ProblemTendencyCard';
import StatisticsCard from './StatisticsCard';
import styles from './index.less';

/** @name 疑难问题 */
const DifficultEvents = (props: { modalDispatch: ChildrenModalMethods }) => {
  const { modalDispatch } = props;
  const [activeKey, setActiveKey] = useState<'all' | 'city-manage' | 'other'>(
    'all',
  );
  const type = activeKey === 'all' ? undefined : activeKey;
  const [dataSource, setDataSource] = useSetState<{
    leftData?: any;
    rightData?: any;
  }>({});
  /** 数据初始化 */
  const getData = () => {
    services.Physicalsign.getStatisticsOfDifficultEvent({
      classification: type,
    }).then((res) => {
      if (res.code === 200) {
        setDataSource({
          leftData: res.data,
        });
      }
    });
  };

  useEffect(() => {
    getData();
  }, [activeKey]);

  useEffect(() => {
    const tabs = [
      {
        key: 'all',
        label: '全部',
      },
      {
        key: 'city-manage',
        label: '城市管理类',
      },
      {
        key: 'other',
        label: '其他',
      },
    ];
    modalDispatch.setOptions({
      headerLeft: () => {
        return (
          <div
            style={{
              marginLeft: 24,
            }}
          >
            {/* <Tabs
              onChange={(type) => {
                setActiveKey(type as any);
              }}
              defaultValue={'all'}
              itemkey={'key'}
              items={tabs}
            /> */}
          </div>
        );
      },
    });
  }, []);

  const tabItems = useMemo(
    () => [
      {
        label: `按区市县统计`,
        key: '1',
        children: <CountyProblem type={activeKey} />,
      },
      {
        label: `按处置单位统计`,
        key: '2',
        children: <DisposeProblem type={activeKey} />,
      },
      {
        label: `疑难问题TOP10`,
        key: '3',
        children: <ProblemRank type={activeKey} />,
      },
    ],
    [activeKey],
  );

  return (
    <Flex className={styles.container}>
      <Space direction="vertical" size={20}>
        <StatisticsCard dataSource={dataSource.leftData} />
        <ProblemTendencyCard dataSource={dataSource.leftData} />
        <ExceedTimeCard dataSource={dataSource.leftData} />
      </Space>
      <div className={styles.right}>
        <AntdTabs size="large" defaultActiveKey="1" centered items={tabItems} />
      </div>
    </Flex>
  );
};

export default DifficultEvents;
