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';

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 />
        {/* 主站配置 */}

        <div
          style={{
            fontWeight: 'bold',
            fontSize: '16px',
            marginLeft: '30x',
            marginBottom: '10px',
          }}
        >
          主站配置
        </div>
        <Form form={form} labelCol={{ span: 1 }} wrapperCol={{ span: 23 }} onFinish={onFinish}>
          <Form.Item label="Url地址" required>
            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
              <Form.Item
                name="url"
                rules={[
                  { required: true, message: '请输入url地址' },
                  { type: 'url', message: '请输入完整url' },
                ]}
                style={{ marginBottom: '0', width: '100%' }}
              >
                <Input placeholder={`如：${window.location.origin}`} />
              </Form.Item>
              {/* {isLink ? (
                <CheckOutlined style={{ margin: '12px 10px 0 10px' }} />
              ) : (
                <CloseOutlined style={{ margin: '12px 10px 0 10px' }} />
              )} */}
              <Button type="primary" htmlType="submit" style={{ margin: '0 10px' }}>
                提交
              </Button>
              <Button type="primary" onClick={deleteConfig}>
                删除
              </Button>
            </div>
          </Form.Item>
        </Form>
      </Card>
    </PageContainer>
  );
};

export default DatabaseConnectConfig;
