import React from 'react';
import { Card } from 'antd';
import { CardProps } from 'antd/es/card';

interface ScrollCardProps extends CardProps {
  height: number | string;
}
// 头部固定，body可滑动的
const ScrollCard: React.FC<ScrollCardProps> = props => {
  const { height, style, bodyStyle, children, ...rest } = props;
  return (
    <Card
      {...rest}
      style={{ ...style, height: height }}
      //这里的1px是为了防止滚动时候header的分割线不要被挡住
      bodyStyle={{
        height: 'calc(100% - 56px)',
        overflowY: 'auto',
        marginTop: '1px',
        ...bodyStyle,
      }}
    >
      {children}
    </Card>
  );
};

export default ScrollCard;