// 本地分页的Table组件封装
/**
 * @Description: 本地分页的Table组件封装
 * @Author: Oliver
 * @Modified by: 娄通略
 * @Date: 2020-11-23 09:32:15
 * @Param: 无
*/
import React, { PureComponent } from 'react'
import { Table } from 'antd'
import uid from 'uid'
import PropTypes from 'prop-types'

export default class LocalTable extends PureComponent {
    static propTypes = {
        columns: PropTypes.array.isRequired,
        dataSource: PropTypes.array.isRequired,
        loading: PropTypes.bool.isRequired,
        // 是否需要排行这一列
        ranking: PropTypes.bool
    }

    static defaultProps = {
        pageSize: 10,
        ranking: false
    }

    state = {
        current: 1
    }

    render() {
        const { columns, dataSource, loading, ranking, pageSize } = this.props;
        const { current } = this.state;
        const simplePagination = {
            current,
            pageSize,
            hideOnSinglePage: true,  // 只有一页时是否隐藏分页器
        }
        let mergeColumns = [];
        if (ranking) {
            mergeColumns = [{
                title: '排行',
                dataIndex: 'ranking',
                key: 'ranking',
                align: 'center',
                render: (_index, _record, index) => {
                    return (index + 1) + (current - 1) * pageSize
                }
            }].concat(columns);
        } else {
            mergeColumns = columns;
        }
        return (
            <Table
                rowKey={() => uid()}
                columns={mergeColumns}
                dataSource={dataSource}
                pagination={simplePagination}
                onChange={(pagination) => {
                    const { current } = pagination;
                    this.setState({
                        current
                    })
                }}
                loading={loading}
            ></Table>
        )
    }
}