/** @format */

import * as React from 'react';
import loadable from 'react-loadable';
import Tabs, {CustomTabPaneProps} from '../../../components/Tabs';
import ServiceOverview from './serviceOverview';

const Report = loadable({
    loader: () => import('./report'),
    loading: () => <div>loading...</div>,
});
const UsageTrend = loadable({
    loader: () => import('./usageTrend'),
    loading: () => <div>loading...</div>,
});
const Result = loadable({
    loader: () => import('./result'),
    loading: () => <div>loading...</div>,
});
const Monitor = loadable({
    loader: () => import('./monitor'),
    loading: () => <div>loading...</div>,
});
const Cost = loadable({
    loader: () => import('./cost'),
    loading: () => <div>loading...</div>,
});

const dataSource: CustomTabPaneProps[] = [
    {
        key: 'server',
        tabname: '服务概况',
        content: <ServiceOverview />,
    },
    {
        key: 'report',
        tabname: '统计报表',
        content: <Report />,
    },
    {
        key: 'useage',
        tabname: '用量趋势',
        content: <UsageTrend />,
    },
    {
        key: 'result',
        tabname: '结果分布',
        content: <Result />,
    },
    {
        key: 'cost',
        tabname: '成本分析',
        content: <Cost />,
    },
    {
        key: 'Monitor',
        tabname: '性能监控',
        content: <Monitor />,
    },
];
const Merchant: React.FC = () => {
    return <Tabs animated={false} defaultActiveKey='server' dataSource={dataSource} />;
};
export default Merchant;
