import React, { useState, useEffect } from 'react';
import { Card, Tabs, Form, Input, Button, notification } from 'antd';
import { CheckOutlined, CloseOutlined } from '@ant-design/icons';
import { SaveMainServer, GetMainServer, DeleteMainServer } from '@/services/database/api';
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';
import MasterTable from './master/MasterTable';

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 [form] = Form.useForm();
  const [flag, setFlag] = useState(false);
  const [active, setActive] = useState('0');
  const [isLink, setIsLink] = useState(false); //主站配置是否连接
  useEffect(() => {
    getData();
  }, []);

  const handleChange = e => {
    setActive(e);
  };
  const getData = () => {
    GetMainServer().then(res => {
      if (res.code === 0) {
        form.setFieldsValue({ url: res.data });
        // if (res.data) {
        //   setIsLink(true);
        //   form.setFieldsValue({ url: res.data });
        // } else {
        //   setIsLink(false);
        //   form.setFieldsValue({ url: window.location.origin });
        // }
      }
    });
  };
  const deleteConfig = () => {
    DeleteMainServer().then(res => {
      if (res.code === 0) {
        notification.success({ message: '提示', duration: 3, description: '删除成功' });
        getData();
      } else {
        notification.error({ message: '提示', duration: 3, description: res.msg });
      }
    });
  };
  // 提交主站配置
  const onFinish = values => {
    console.log('Success:', values);
    SaveMainServer(values).then(res => {
      if (res.code === 0) {
        notification.success({
          message: '提示',
          duration: 3,
          description: '保存成功',
        });
        getData();
      } else {
        notification.error({
          message: '提示',
          duration: 3,
          description: res.msg,
        });
      }
    });
  };

  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> */}

        <SQLServerTable />

        <OracleTable />

        <MongDBTable />

        <MySQLTable />

        <MasterTable />
      </Card>
    </PageContainer>
  );
};

export default DatabaseConnectConfig;
