text: import React, { memo } from 'react';
  import { Row, Col, Icon, Tooltip } from 'antd';
  import { FormattedMessage, formatMessage } from 'umi-plugin-react/locale';
  import numeral from 'numeral';
  import styles from './style.less';
  import { ChartCard, MiniArea, MiniBar, MiniProgress, Field } from '@/components/Charts';
  import Trend from '@/components/Trend';
  import Yuan from '@/utils/Yuan';
  
  const topColResponsiveProps = {
    xs: 24,
    sm: 12,
    md: 12,
    lg: 12,
    xl: 12,
    style: { marginBottom: 24 },
  };
  
  const IntroduceRow = memo(({ loading, visitData }) => (
    <Row gutter={24}>
      <Col {...topColResponsiveProps}>
        <ChartCard
          title={<FormattedMessage id="app.analysis.operator" defaultMessage="operator" />}
          action={
            <Tooltip
              title={<FormattedMessage id="app.analysis.introduce" defaultMessage="Introduce" />}
            >
              <Icon type="info-circle-o" />
            </Tooltip>
          }
          loading={loading}
          total={() => 126}
          footer={
            <Field
              label={<FormattedMessage id="app.analysis.day-operator" defaultMessage="Daily operator" />}
              value={`${numeral(1).format('0,0')}`}
            />
          }
          contentHeight={46}
        >
          <Trend flag="up" style={{ marginRight: 16 }}>
            <FormattedMessage id="app.analysis.week" defaultMessage="Weekly Changes" />
            <span className={styles.trendText}>12%</span>
          </Trend>
          <Trend flag="down">
            <FormattedMessage id="app.analysis.day" defaultMessage="Daily Changes" />
            <span className={styles.trendText}>11%</span>
          </Trend>
        </ChartCard>
      </Col>
      <Col {...topColResponsiveProps}>
      <ChartCard
          title={<FormattedMessage id="app.analysis.operator-complete" defaultMessage="operator Complete" />}
          action={
            <Tooltip
              title={<FormattedMessage id="app.analysis.introduce" defaultMessage="Introduce" />}
            >
              <Icon type="info-circle-o" />
            </Tooltip>
          }
          loading={loading}
          total={() => 126560}
          footer={
            <Field
              label={<FormattedMessage id="app.analysis.day-operator-complete" defaultMessage="Daily operator Complete" />}
              value={`${numeral(12423).format('0,0')}`}
            />
          }
          contentHeight={46}
        >
          <Trend flag="up" style={{ marginRight: 16 }}>
            <FormattedMessage id="app.analysis.week" defaultMessage="Weekly Changes" />
            <span className={styles.trendText}>12%</span>
          </Trend>
          <Trend flag="down">
            <FormattedMessage id="app.analysis.day" defaultMessage="Daily Changes" />
            <span className={styles.trendText}>11%</span>
          </Trend>
        </ChartCard>
      </Col>
    </Row>
  ));
  
  export default IntroduceRow;
  