import React, { useEffect } from 'react';
import { Row, Col, Card, Typography, Tooltip, Spin } from 'antd';
import styles from './index.less';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import Loading from '@/components/Loading';
const { Title } = Typography;

const QCard = props => {
  const { title, des, children, extra, loading = false, ...otherProps } = props;
  return (
    <Card {...otherProps}>
      <Loading loading={loading}  />
      <Row className={styles.main} type="flex" justify="space-between" align="middle">
        <Col>
          <Row type="flex" align="middle">
            <Col>
              <div className={styles.fk} />
            </Col>
            {title && (
              <Col>
                <div className={styles.title}>{title}</div>
              </Col>
            )}
            {des && (
              <Col>
                <Tooltip title={des}>
                  <ExclamationCircleOutlined />
                </Tooltip>
              </Col>
            )}
          </Row>
        </Col>
        {extra && <Col>{extra}</Col>}
      </Row>

      {children}
    </Card>
  );
};

export default QCard;