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 SaveNum = (props) => {
  const [person, setPerson] = useState()

  const columns = [
    {
      title: '科普名称',
      key: 'name',
      dataIndex: 'name',
    },
    {
      title: '收藏时间',
      key: 'savedDate',
      dataIndex: 'savedDate',
      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?.savedNum} />
          </Col>
        </Row>
      </Card>

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

export default SaveNum