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 GCKConfig from './gckConfig/index';
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">
          {activeKey === '1' ? <BaseConfig /> : null}
        </TabPane>
        <TabPane tab="GCK平台配置" key="2">
          {activeKey === '2' ? <GCKConfig /> : null}
        </TabPane>
        <TabPane tab="物联配置" key="3">
          {activeKey === '3' ? <IotConfig setActiveKey={setActiveKey} /> : null}
        </TabPane>
        <TabPane tab="消息配置" key="4">
          {activeKey === '4' ? <MessageConfig /> : null}
        </TabPane>
        {/* <TabPane tab="代理配置" key="4">
          <ProxyConfig />
        </TabPane> */}
        <TabPane tab="中台配置" key="5">
          {activeKey === '5' ? <ETLConfig setActiveKey={setActiveKey} /> : null}
        </TabPane>
        <TabPane tab="网关配置" key="6">
          {activeKey === '6' ? <GateConfig /> : null}
        </TabPane>
      </Tabs>
    </PageContainer>
  );
};
export default HostManager;
