import React, { useState } from 'react';
import { Card, Tabs } from 'antd';
import PageContainer from '@/components/BasePageContainer';
import SQLServerTable from './sqlServer/SQLServerTable';
import OracleTable from './oracle/OracleTable';
import MongDBTable from './mongDB/MongDBTable';
import MySQLTable from './mysqltable/MySQLTable';

const { TabPane } = Tabs;
const dataArr = [
  {
    title: 'SQLServer数据库连接',
    key: '0',
    component: <SQLServerTable />,
  },
  {
    title: 'Oracle数据库连接',
    key: '1',
    component: <OracleTable />,
  },
  {
    title: 'MongoDB数据库连接',
    key: '2',
    component: <MongDBTable />,
  },
  {
    title: 'MySQL数据库连接',
    key: '3',
    component: <MySQLTable />,
  },
];
const Hr = () => <hr style={{ width: 'calc( 100% - 40px)' }} />;
const DatabaseConnectConfig = props => {
  const [flag, setFlag] = useState(false);
  const [active, setActive] = useState('0');

  const handleChange = e => {
    setActive(e);
  };

  return (
    <PageContainer>
      <Card>
        {/* <Tabs activeKey={active} onChange={e => handleChange(e)}>
          {dataArr.map(item => (
            <TabPane tab={item.title} key={item.key}>
              {active === item.key && item.component}
            </TabPane>
          ))}
        </Tabs> */}
        <Hr />
        <SQLServerTable />
        <br />
        <Hr />
        <OracleTable />
        <br />
        <Hr />
        <MongDBTable />
        <br />
        <Hr />
        <MySQLTable />
      </Card>
    </PageContainer>
  );
};

export default DatabaseConnectConfig;