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 Bullet from './../charts/Bullet';
import DataFieldRadio from './../components/DateFieldRadio';
import { empty } from './../utils/commons';
import './home.css';

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

  const topSeries = [
    { key: 'Country', label: '国籍'},
    { key: 'Area', label: '目的地'},
    { key: 'Sales', label: '顾问'},
    { key: 'GuestGroupType', label: '客群类别'},
  ];

  useEffect(() => {
    if (empty(summaryData.dataSource)) {
      TradeStore.fetchSummaryData();
      TradeStore.fetchTradeDataByMonth();
      for (const iterator of topSeries) {
        TradeStore.fetchTradeDataByType(iterator.key);
        // TradeStore.fetchTradeDataByType('Area');
      }
    }
    return () => {};
  }, []);

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

  const BulletConfig = {
    measureField: 'CJCount', //
    rangeField: 'CJCountRange', //
    targetField: 'CJCountKPI', //
    xField: 'OrderType',
  };

  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></section>
      <h3>TOP
      <div style={{float: 'right', display: 'inline-block'}}>
        <DataFieldRadio />
      </div></h3>
      <section>
        <Row gutter={layoutProps.gutter}>
          {topSeries.map((item) => (
            <Col {...layoutProps} key={item.key}>
              <Spin spinning={topData[item.key]?.loading}>
                <h3 style={{textAlign: 'center'}}>{item.label}</h3>
                <Bullet {...BulletConfig} dataSource={topData[item.key]?.dataSource || []} />
              </Spin>
            </Col>
          ))}
        </Row>
      </section>
    </>
  );
});