import { Tabs as AntdTabs, Flex, Space } from 'antd';
import BaseCard from '@/pages/Common/components/BaseCard';
import Tabs from '@/components/Tabs'
import StatisticsCard from './StatisticsCard';
import ExceedTimeCard from './ExceedTimeCard';
import ProblemTendencyCard from './ProblemTendencyCard';
import styles from './index.less';
import CountyProblem from './CountyProblem';
import DisposeProblem from './DisposeProblem';
import ProblemRank from './ProblemRank';


const DifficultEvents =  () => {
  const tabItems = [
    {
      label: `按区市县统计`,
      key: '1',
      children: <CountyProblem />,
    },
    {
      label: `按处置单位统计`,
      key: '2',
      children: <DisposeProblem />,
    },
    {
      label: `疑难问题TOP10`,
      key: '3',
      children: <ProblemRank />,
    },
  ];
  return (
    <Flex gap={30} className={styles.container}>
      <Space direction='vertical' size={20}>
        <Tabs onChange={() => {}} itemkey={'key'} items={[
          {
            key: '0',
            label: '全部'
          },
          {
            key: '1',
            label: '委内'
          },
          {
            key: '2',
            label: '委外'
          }
        ]} />
        <StatisticsCard />
        <ProblemTendencyCard />
        <ExceedTimeCard />
      </Space>
      <BaseCard style={{ flex: 1 }}>
        <AntdTabs size="large" defaultActiveKey="1" centered items={tabItems} />
      </BaseCard>
    </Flex>
  );
};

export default DifficultEvents;
