import { useContext, useEffect, useState } from 'react';
import { observer } from 'mobx-react';
import { Row, Col, Spin, Space } 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 '../components/StatisticCard';
import Bullet from '../components/Bullet';
import Waterfall from '../components/Waterfall';
import Column from '../components/Column';
import DataFieldRadio from './../components/DateFieldRadio';
import DatePickerCharts from './../components/search/DatePickerCharts';

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);
      }
    }
    return () => {};
  }, []);

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

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

  const [valueKey, setValueKey] = useState('SumML');
  const [BulletConfig, setBulletConfig] = useState({
    measureField: 'SumML', //
    rangeField: 'SumMLRange', //
    targetField: 'SumMLKPI', //
    xField: 'OrderType',
  });
  const handleChangeValueKey = (key) => {
    setValueKey(key);
    setBulletConfig({
      measureField: key,
      rangeField: `${key}Range`,
      targetField: `${key}KPI`,
      xField: 'OrderType',
    });
  };

  const WaterfallConfig = {
    xField: 'groupDateVal',
    yField: 'SumML',
    meta: {
      groupDateVal: {
        alias: '月份',
      },
    },
    label: {
      formatter: (v) => ((v.SumML / sideData.kpi.value) * 100).toFixed(2) + '%',
    },
  };

  const ColumnConfig = {
    xField: 'groupDateVal',
    yField: 'SumML',
    seriesField: 'groups',
    label: {
      formatter: (v) => ((v.SumML / sideData.kpi.value) * 100).toFixed(2) + '%',
    },
    legend: false,
    // annotations: sideData.monthData.map((d, ...args) => {
    //   console.log('aaa', d, args);
    //   return {
    //     type: 'dataMarker',
    //     position: d,
    //     point: {
    //       style: {
    //         stroke: '#FF6B3B',
    //         lineWidth: 1.5,
    //       },
    //     },
    //   };
    // }),
  };

  return (
    <>
      <section>
        <Space>
          <h2>年度业绩</h2>
          <DatePickerCharts hide_vs={true} />
        </Space>
        <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>
      <section>
        <h3>市场进度</h3>
        <Spin spinning={sideData.loading}>
          <Row gutter={layoutProps3.gutter}>
            <Col {...layoutProps3}>
              <Column {...ColumnConfig} dataSource={sideData.monthData} line={sideData.kpi} />
            </Col>
            {Object.keys(sideData.dataSource).map((key) => (
              <Col {...layoutProps3} key={key}>
                <Waterfall {...WaterfallConfig} title={key} dataSource={sideData.dataSource[key]} line={sideData.kpi} />
              </Col>
            ))}
          </Row>
        </Spin>
      </section>
      <section>
        <Space>
          <h3>TOP</h3>
          <div>
            <DataFieldRadio value={valueKey} onChange={handleChangeValueKey} />
          </div>
        </Space>
        <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>
    </>
  );
});