import React, { useEffect, useState } from 'react';
// import { connect, history } from 'umi';
import { notification, Row, Col, Card, Statistic } from 'antd';
// import { PageContainer } from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import request, { queryTable } from '@/utils/request';

const ReadedNum = (props) => {
  const [person, setPerson] = useState()

  const columns = [
    {
      title: '科普名称',
      key: 'postName',
      dataIndex: 'postName',
    },
    {
      title: '阅读时间',
      key: 'createDate',
      dataIndex: 'createDate',
      valueType: 'dateTime',
    },
  ];

  useEffect(() => {
    request(`/person/${props.personId}`).then(res => {
      setPerson(res)
    }).catch((err) => {
      notification.error({ message: err.message })
    })
  }, [props.personId])

  return (
    // <PageContainer
    //   header={{
    //     extra: [
    //       <Button key="1" onClick={() => history.go('-1')}>
    //         返回
    //       </Button>,
    //     ],
    //   }}
    // >
    <div>
      <Card style={{marginBottom: '2em'}} bordered={false}>
        <Row gutter={24}>
          <Col span={12}>
            <Statistic title="姓名" value={person?.nickName} />
          </Col>
          <Col span={12}>
            <Statistic title="阅读数" value={person?.personData?.readedNum} />
          </Col>
        </Row>
      </Card>

      <ProTable
        columns={columns}
        search={false}
        params={{ personId: props.personId }}
        request={queryTable('/read-log')}
        rowKey="serialNo"
        options={false}
      />
    </div>
    // </PageContainer>
  );
};

export default ReadedNum