text: import React from 'react';
  import { Card, Spin } from 'antd';
  import classNames from 'classnames';
  
  import styles from './index.less';
  
  const renderTotal = (total) => {
    let totalDom;
    switch (typeof total) {
      case undefined:
        totalDom = null;
        break;
      case 'function':
        totalDom = <div className={styles.total}>{total()}</div>;
        break;
      default:
        totalDom = <div className={styles.total}>{total}</div>;
    }
    return totalDom;
  };
  
  const ChartCard = ({
    loading = false,
    contentHeight,
    title,
    avatar,
    action,
    total,
    footer,
    children,
    ...rest
  }) => {
    const content = (
      <div className={styles.chartCard}>
        <div
          className={classNames(styles.chartTop, { [styles.chartTopMargin]: !children && !footer })}
        >
          <div className={styles.avatar}>{avatar}</div>
          <div className={styles.metaWrap}>
            <div className={styles.meta}>
              <span className={styles.title}>{title}</span>
              <span className={styles.action}>{action}</span>
            </div>
            {renderTotal(total)}
          </div>
        </div>
        {children && (
          <div className={styles.content} style={{ height: contentHeight || 'auto' }}>
            <div className={contentHeight && styles.contentFixed}>{children}</div>
          </div>
        )}
        {footer && (
          <div className={classNames(styles.footer, { [styles.footerMargin]: !children })}>
            {footer}
          </div>
        )}
      </div>
    );
  
    return (
      <Card bodyStyle={{ padding: '20px 24px 8px 24px' }} {...rest}>
        {
          <Spin spinning={loading} wrapperClassName={styles.spin}>
            {content}
          </Spin>
        }
      </Card>
    );
  };
  
  export default ChartCard;
  