import React, { Suspense, lazy } from 'react';
import { Tabs } from 'antd';
import { FormattedMessage } from 'react-intl';

// 懒加载各子页面
const WorklistPage = lazy(() => import('./worklist'));
const OutputListPage = lazy(() => import('./OutputList'));
const HistoryListPage = lazy(() => import('./HistoryList'));
const ArchiveListPage = lazy(() => import('./ArchiveList'));
const BinPage = lazy(() => import('./Bin'));
const RegisterPage = lazy(() => import('./register'));

const { TabPane } = Tabs;

const PatientManagement: React.FC = () => {
  return (
    <div className="h-full flex flex-col">
      <Tabs
        defaultActiveKey="worklist"
        type="line"
        className="flex-1 h-full"
        tabBarGutter={32}
        destroyInactiveTabPane
      >
        <TabPane
          tab={
            <FormattedMessage
              id="patient.tab.worklist"
              defaultMessage="Worklist"
            />
          }
          key="worklist"
        >
          <Suspense fallback={null}>
            <WorklistPage />
          </Suspense>
        </TabPane>
        <TabPane
          tab={
            <FormattedMessage id="patient.tab.output" defaultMessage="Output" />
          }
          key="output"
        >
          <Suspense fallback={null}>
            <OutputListPage />
          </Suspense>
        </TabPane>
        <TabPane
          tab={
            <FormattedMessage
              id="patient.tab.history"
              defaultMessage="History"
            />
          }
          key="history"
        >
          <Suspense fallback={null}>
            <HistoryListPage />
          </Suspense>
        </TabPane>
        <TabPane
          tab={
            <FormattedMessage
              id="patient.tab.archive"
              defaultMessage="Archive"
            />
          }
          key="archive"
        >
          <Suspense fallback={null}>
            <ArchiveListPage />
          </Suspense>
        </TabPane>
        <TabPane
          tab={<FormattedMessage id="patient.tab.bin" defaultMessage="Bin" />}
          key="bin"
        >
          <Suspense fallback={null}>
            <BinPage />
          </Suspense>
        </TabPane>
        <TabPane
          tab={
            <FormattedMessage
              id="patient.tab.register"
              defaultMessage="Register"
            />
          }
          key="register"
        >
          <Suspense fallback={null}>
            <RegisterPage />
          </Suspense>
        </TabPane>
      </Tabs>
    </div>
  );
};

export default PatientManagement;