import { useContext, useEffect } from 'react';
import { observer } from 'mobx-react';
import { Row, Col, Spin, } from 'antd';
import { stores_Context } from '../config';
import { useNavigate } from 'react-router-dom';
import { SlackOutlined, SketchOutlined, AntCloudOutlined, RedditOutlined, GithubOutlined, ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons';
import StatisticCard from './../charts/StatisticCard';
import { empty } from './../utils/commons';
import './home.css';

export default observer(() => {
  const navigate = useNavigate();
  const { TradeStore } = useContext(stores_Context);
  const { sideData, summaryData, topData } = TradeStore;

  useEffect(() => {
    if (empty(summaryData.dataSource)) {
      TradeStore.fetchSummaryData();
      TradeStore.fetchTradeDataByMonth();
      TradeStore.fetchTradeDataByType('Country');
      TradeStore.fetchTradeDataByType('Area');
    }
    return () => {};
  }, []);

  const layoutProps = {
    gutter: { xs: 8, sm: 8, lg: 16 },
    lg: { span: 6 },
    sm: { span: 12 },
    xs: { span: 24 },
  };

  return (
    <>
      <h2>年度业绩</h2>
      <section>
        <Spin spinning={summaryData.loading}>
          <Row gutter={layoutProps.gutter}>
            {summaryData.dataSource.map(item =>
            <Col {...layoutProps} key={item.title}>
              <StatisticCard {...item} showProgress={(item.hasKPI)} />
            </Col>
            )}
          </Row>
        </Spin>
      </section>
      <h3>市场进度</h3>
      <section>
        <Spin spinning={sideData.loading}></Spin>
      </section>
      <h3>TOP</h3>
      <section></section>
    </>
  );
});