import React from 'react';
import { Pagination } from 'antd';
import styled from 'styled-components';

// 样式
const ProductListWrap = styled.div`
  position: relative;
  width: 100%;
  .mall-list {
    position: relative;
    width: 100%;
    min-height: 60vh;
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .list-empty {
    position: relative;
    width: 100%;
    height: 60vh;
  }
  .mall-pagination {
    position: relative;
    width: 100%;
    height: 4rem;
    box-sizing: border-box;
    margin-bottom: 1rem;
  }
`;

// 分页数据类型
type PaginationProps = {
  pageNo: number;
  pageSize: number;
  totalCount: number;
};

const ProductListView: React.FC<{
  children: React.ReactNode;
  pagination: PaginationProps;
  onChange: (pageNo: number, pageSize: number) => void;
}> = ({ children, pagination, onChange }) => {
  return (
    <ProductListWrap>
      <div className="mall-list flex-start">{children}</div>
      <div className="mall-pagination flex-end">
        <Pagination
          showSizeChanger
          onChange={onChange}
          defaultPageSize={pagination.pageSize}
          current={pagination.pageNo}
          total={pagination.totalCount}
          showTotal={(total) => `共 ${total} 条`}
          pageSizeOptions={['6', '12', '18', '36', '72']}
        />
      </div>
    </ProductListWrap>
  );
};

export default ProductListView;
