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 DatabaseConnectConfig = props => {
  const [flag, setFlag] = useState(false);
  const [active, setActive] = useState('0');

  const handleChange = e => {
    console.log(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>
      </Card>
    </PageContainer>
  );
};

export default DatabaseConnectConfig;