import { useContext, useEffect, useState } from 'react';
import { observer } from 'mobx-react';
import { Row, Col, Spin, Space, Radio } from 'antd';
import { CheckCircleTwoTone, MoneyCollectTwoTone, FlagTwoTone, SmileTwoTone, } from '@ant-design/icons';
import { stores_Context } from '../config';
import { useNavigate } from 'react-router-dom';
import StatisticCard from '../components/StatisticCard';
import Bullet from '../components/BulletWithSort';
import Waterfall from '../components/Waterfall';
import DataFieldRadio from '../components/DataFieldRadio';
import { datePartOptions } from './../components/DateGroupRadio/date';
import SearchForm from './../components/search/SearchForm';
import { empty, cloneDeep, isEmpty } from './../utils/commons';
import { dataFieldAlias } from './../libs/ht';
import { Line } from '@ant-design/charts';
import './home.css';

const topSeries = [
  { key: 'country', label: '国籍' },
  { key: 'dept', label: '小组' },
  { key: 'operator', label: '顾问' },
  { key: 'destination', label: '目的地' },
  // { key: 'GuestGroupType', label: '客群类别' },
];

// const iconSets = [CheckCircleTwoTone, <MoneyCollectTwoTone />, <FlagTwoTone />, <ClockCircleTwoTone />, <DashboardTwoTone />,<SmileTwoTone />,];
const iconSets = [CheckCircleTwoTone, MoneyCollectTwoTone, FlagTwoTone, SmileTwoTone];

export default observer(() => {
  // const navigate = useNavigate();
  const { TradeStore, date_picker_store: searchFormStore } = useContext(stores_Context);
  const { sideData, summaryData, BuData, topData, timeData, timeLineKey } = TradeStore;
  const { formValues, } = searchFormStore;

  useEffect(() => {
    if (empty(summaryData.dataSource)) {
      // pageRefresh();
    }
    return () => {};
  }, []);

  const pageRefresh = (queryData) => {
    TradeStore.fetchSummaryData(queryData);
    TradeStore.fetchTradeDataByDate(queryData);
    TradeStore.fetchTradeDataByBU(queryData);
    TradeStore.fetchTradeDataByMonth(queryData);
    for (const iterator of topSeries) {
      TradeStore.fetchTradeDataByType(iterator.key, queryData);
    }
  };

  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: 'MLKPIvalue', //
    xField: 'groupsLabel',
  });
  const handleChangeValueKey = (key) => {
    setValueKey(key);
    setBulletConfig({
      measureField: key,
      rangeField: `${key}Range`,
      // targetField: `${key}KPI`,
      targetField: dataFieldAlias[key].nestkey.v,
      xField: 'groupsLabel',
    });
  };

  const WaterfallConfig = {
    xField: 'groupDateVal',
    yField: 'SumML',
    seriesField: 'groupsLabel',
    meta: {
      groupDateVal: {
        alias: '月份',
        // type: 'cat',
      },
    },
    label: {
      formatter: (v) => summaryData.kpi.value === 0 ? (dataFieldAlias.SumML?.formatter(v.SumML) || v.SumML) : ((v.SumML / summaryData.kpi.value) * 100).toFixed(2) + '%',
    },
  };

  const BUConfig = {
    measureField: 'SumML', //
    rangeField: 'SumMLRange', //
    targetField: 'MLKPIvalue', //
    xField: 'groupsLabel',
    layout: 'vertical',
    xAxis: {
      line: null,
      label: {
        autoHide: true,
        autoRotate: false,
      },
    }
  };

  const lineConfigSet = {
    // data: orders_data.data,
    padding: 'auto',
    xField: 'groupDateVal',
    yField: 'SumML',
    seriesField: 'groupsLabel',
    xAxis: {
      type: 'cat',
    },
    smooth: true,
    point: {
      size: 4,
      shape: "cicle",
    },
    legend: false,
    meta: { ...cloneDeep(dataFieldAlias)
      // [extProps.yField]: {
      //   alias: dataFieldAlias[extProps.yField]?.alias || extProps.yField,
      //   formatter: (v) => dataFieldAlias[extProps.yField]?.formatter(v) || v,
      //   max: Math.ceil(yMax / 0.95),
      // },
    },
  };
  const [timeDataField, setTimeDataField] = useState('SumML');
  const [lineConfig, setLineConfig] = useState(cloneDeep(lineConfigSet));
  const handleChangetimeDataField = (key) => {
    setTimeDataField(key);
    setLineConfig({
      ...lineConfig,
      yField: key,
      tooltip: {
        customItems: (originalItems) => {
          // process originalItems,
          const items = originalItems.map((ele) => ({ ...ele, name: dataFieldAlias[key]?.alias || key }));
          return items;
        },
      },
    });
  };
  const [dateField, setDateField] = useState(timeLineKey);
  const handleChangeDateType = ({target: {value}}) => {
    setDateField(value);
    TradeStore.setTimeLineKey(value);
    if (!isEmpty(TradeStore.searchPayloadHome)) {
      TradeStore.fetchTradeDataByDate();
    }
  };
  return (
    <>
      <Row gutter={16} style={{ margin: '-16px -8px' }}>
        {/* style={{ margin: '-16px -8px', padding: 0 }} */}
        <Col className="gutter-row" span={24}>
          <SearchForm
            defaultValue={{
              initialValue: {
                ...formValues,
              },
              shows: ['DateType', 'DepartmentList', 'WebCode', 'IncludeTickets', 'years'],
              fieldProps: {
                DepartmentList: { show_all: true },
                WebCode: { show_all: true },
                years: { hide_vs: true },
              },
            }}
            onSubmit={(_err, obj, form, str) => {
              TradeStore.setStateSearch(obj);
              pageRefresh(obj);
            }}
          />
        </Col>
      </Row>
      <section>
        <Space>
          <h2>年度业绩</h2>
        </Space>
        <Spin spinning={summaryData.loading}>
          <Row gutter={layoutProps.gutter}>
            {summaryData.dataSource.map((item, i) => (
              <Col {...layoutProps} key={item.title}>
                <StatisticCard {...item} showProgress={item.hasKPI} icon={iconSets[i]} />
              </Col>
            ))}
          </Row>
        </Spin>
      </section>
      <section>
        <Space gutter={16} size={'large'}>
          <h3>走势</h3>
          <DataFieldRadio value={timeDataField} onChange={handleChangetimeDataField} />
          <Radio.Group options={datePartOptions} optionType="button" onChange={handleChangeDateType} value={dateField} />
        </Space>
        <Spin spinning={timeData.loading}>
          <Line {...lineConfig} data={timeData.dataSource} />
        </Spin>
      </section>
      <section>
        <h3>市场进度</h3>
        <Spin spinning={BuData.loading}>
          <Row gutter={layoutProps3.gutter}>
            <Col {...layoutProps3}>
              <Bullet {...BUConfig} dataSource={BuData?.dataSource || []} />
          <h3 style={{ textAlign: 'center' }}>{`各事业部总业绩`}</h3>
            </Col>
            {Object.keys(sideData.dataSource).map((key) => (
              <Col {...layoutProps3} key={key}>
                <Waterfall key={key} {...WaterfallConfig} title={key} dataSource={sideData.dataSource[key]} line={summaryData.kpi} />
                <h3 style={{ textAlign: 'center' }}>{`${key}每月业绩`}</h3>
              </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 || false}>
                <h3 style={{ textAlign: 'center' }}>{item.label}</h3>
                <Bullet {...BulletConfig} dataSource={topData[item.key]?.dataSource || []} itemLength={10} />
              </Spin>
            </Col>
          ))}
        </Row>
      </section>
    </>
  );
});