import { Tabs } from 'antd';
import React, { useState } from 'react';
import Place from './place';
import Complaint from './complaint';
import Enforcement from './enforcement';
import NetworkEvent from './networkEvent';
import { StyledWapperTab } from '@/components/style';

const Data = () => {
  const [activeKey, setActiveKey] = useState('1');
  const [dataTab, setDataTab] = useState(() => {
    return [
      { label: '行政执法案件', value: '1' },
      { label: '基层网络事件', value: '2' },
      { label: '场所/网站备案信息', value: '3' },
      { label: '投诉举报事件', value: '4' },
    ];
  });
  return (
    <StyledWapperTab>
      <Tabs
        defaultActiveKey={activeKey}
        onChange={key => {
          setActiveKey(key);
        }}
      >
        {dataTab.map(item => {
          return <Tabs.TabPane tab={item.label} key={item.value}></Tabs.TabPane>;
        })}
      </Tabs>
      {activeKey === '1' ? <Enforcement /> : null}
      {activeKey === '2' ? <NetworkEvent /> : null}
      {activeKey === '3' ? <Place /> : null}
      {activeKey === '4' ? <Complaint /> : null}
    </StyledWapperTab>
  );
};

export default Data;