import {
  DingdingOutlined,
  DownOutlined,
  EllipsisOutlined,
  InfoCircleOutlined,
} from '@ant-design/icons';
import {
  Badge,
  Button,
  Card,
  Statistic,
  Descriptions,
  Divider,
  Dropdown,
  Menu,
  Popover,
  Steps,
  Table,
  Tooltip,
  Empty,
} from 'antd';
import { GridContent, PageContainer, RouteContext } from '@ant-design/pro-layout';
import React, { Fragment, useState } from 'react';
import classNames from 'classnames';
import styles from './style.less';
const { Step } = Steps;

const Advanced = () => {
  const [tabStatus, seTabStatus] = useState({
    operationKey: 'tab1',
    tabActiveKey: 'detail',
  });

  const onTabChange = (key) => {
    seTabStatus({ ...tabStatus, operationKey: key  });
  };

  const operationTabList = [
    {
      key: 'tab1',
      tab: '操作日志一',
    },
    {
      key: 'tab2',
      tab: '操作日志二',
    },
    {
      key: 'tab3',
      tab: '操作日志三',
    },
  ];
  const contentList = {
    tab1: (
      <Card
      title="用户近半年来电记录2321321"
      style={{
        marginBottom: 24,
      }}
      bordered={false}
    >
      <Empty />
    </Card>
    ),
    tab2: (
      <Card
      title="fdsa"
      style={{
        marginBottom: 24,
      }}
      bordered={false}
    >
      <Empty />
    </Card>
    ),
    tab3: (
      <Card
      title="用户近半年来电记录2fds321"
      style={{
        marginBottom: 24,
      }}
      bordered={false}
    >
      <Empty />
    </Card>
    ),
  };

  return (
    <PageContainer
      title="商品详情"
     // extra={action}
      //className={styles.pageHeader}
     // content={description}
     // extraContent={extra}
     // tabActiveKey={tabStatus.tabActiveKey}
      onTabChange={onTabChange}
      tabList={operationTabList}

    >
        {contentList[tabStatus.operationKey]}
    </PageContainer>
  );
};

export default Advanced;
