import React, { useState, useEffect } from 'react';
import { Tabs } from 'antd';
import PageContainer from '@/components/BasePageContainer';
import BaseConfig from './baseConfig/BaseConfig';
import IotConfig from './IotConfig/IotConfig';
import MessageConfig from './messageConfig/messageConfig';
import ETLConfig from './ETLConfig/index';
import ProxyConfig from './proxyConfig/ProxyConfig';
import GateConfig from './gateWay/gateWay';

const { TabPane } = Tabs;

const HostManager = () => {
  const [activeKey, setActiveKey] = useState('1');
  // 修改选中的tab
  const handleChange = key => {
    setActiveKey(key);
  };

  return (
    <PageContainer>
      <Tabs onChange={handleChange} type="card" destroyInactiveTabPane activeKey={activeKey}>
        <TabPane tab="基础配置" key="1">
          <BaseConfig />
        </TabPane>
        <TabPane tab="物联配置" key="2">
          <IotConfig setActiveKey={setActiveKey} />
        </TabPane>
        <TabPane tab="消息配置" key="3">
          <MessageConfig />
        </TabPane>
        {/* <TabPane tab="代理配置" key="4">
          <ProxyConfig />
        </TabPane> */}
        <TabPane tab="中台配置" key="6">
          <ETLConfig setActiveKey={setActiveKey} />
        </TabPane>
        <TabPane tab="网关配置" key="5">
          <GateConfig />
        </TabPane>
      </Tabs>
    </PageContainer>
  );
};
export default HostManager;