import { useContext, useEffect } from 'react';
import { observer } from 'mobx-react';
import { stores_Context } from '../config';
import { Row, Col, Spin, Tabs, Table, Space, Typography } from 'antd';
import { RingProgress } from '@ant-design/plots';
import SearchForm from './../components/search/SearchForm';
import { empty } from '../utils/commons';
import { dataFieldAlias } from '../libs/ht';
import { VSTag } from './../components/Data';
import MixYnQ from './../components/MixYnQ';

import './kpi.css';

const { Text } = Typography;

const apartOptions = [
  { key: 'tourDays', value: 'tourDays', label: '团天数' },
  { key: 'PML', value: 'PML', label: '单团毛利' },
  { key: 'ConfirmDays', value: 'ConfirmDays', label: '成团周期' },
  { key: 'ApplyDays', value: 'ApplyDays', label: '预定周期' },
  { key: 'PersonNum', value: 'PersonNum', label: '人等' },
  { key: 'destination', value: 'destination', label: '国内目的地' },
  { key: 'GlobalDestination', value: 'GlobalDestination', label: '海外目的地' },
  { key: 'destinationCountry', value: 'destinationCountry', label: '目的地国籍' },
  { key: 'guestCountry', value: 'guestCountry', label: '客人国籍' },
];

export default observer(() => {
  const { date_picker_store: searchFormStore, DistributionStore } = useContext(stores_Context);
  const { formValues, formValuesToSub } = searchFormStore;
  const { curTab, dateStringQ, dateStringY } = DistributionStore;

  const pageRefresh = (obj) => {
    DistributionStore.getApartData({
      ...(obj || formValuesToSub),
    });
  };

  useEffect(() => {
    if (empty(DistributionStore[curTab].dataSource)) {
      pageRefresh();
    }
  }, [curTab]);

  useEffect(() => {
    DistributionStore.setFormDates(formValuesToSub);
    DistributionStore.resetData();
    return () => {};
  }, [formValuesToSub]);

  const onTabsChange = (tab) => {
    DistributionStore.setCurTab(tab);
  };
  const RingProgressConfig = {
    height: 60,
    width: 60,
    autoFit: false,
    color: ['#5B8FF9', '#E8EDF3'],
  };
  const RingProgressConfigY = {
    height: 50,
    width: 50,
    autoFit: false,
    // color: ['#f6bd16', '#E8EDF3'],
    color: ['#61ddaa', '#E8EDF3'], // #7cb305
    innerRadius: 0.90,
  };
  const RingProgressConfigQ = {
    height: 50,
    width: 50,
    autoFit: false,
    color: ['#f6bd16', '#E8EDF3'],
    innerRadius: 0.90,
  };
  const columns = [
    { title: '', dataIndex: 'label' },
    {
      title: '团数',
      dataIndex: 'ConfirmOrder',
      render: (v, r) => (
        <>
          <Row align={'middle'}>
            <Col flex={"100px"}>
              <Text strong>{v}</Text>
            </Col>
            <Col flex={'auto'}>
              <Space direction={'vertical'}>
                <span>
                  <span>同比: </span> <VSTag diffPercent={r.ConfirmOrderToY} diffData={r.ConfirmOrderDiffY} />
                </span>
                <span>
                  <span>环比: </span> <VSTag diffPercent={r.ConfirmOrderToQ} diffData={r.ConfirmOrderDiffQ} />
                </span>
              </Space>
            </Col>
          </Row>
        </>
      ),
    },
    {
      title: '业绩',
      dataIndex: 'SumML',
      render: (v, r) => (
        <>
          <Row align={'middle'}>
            <Col flex={"150px"}>
              <Text strong>{dataFieldAlias.SumML.formatter(v)}</Text>
            </Col>
            <Col flex={'auto'}>
              <Space direction={'vertical'}>
                <span>
                  <span>同比: </span> <VSTag diffPercent={r.SumMLToY} diffData={dataFieldAlias.SumML.formatter(r.SumMLDiffY)} />
                </span>
                <span>
                  <span>环比: </span> <VSTag diffPercent={r.SumMLToQ} diffData={dataFieldAlias.SumML.formatter(r.SumMLDiffQ)} />
                </span>
              </Space>
            </Col>
          </Row>
        </>
      ),
    },
    {
      title: '团数占比',
      dataIndex: 'ConfirmOrderPercent',
      render: (v, r) => v ? <RingProgress {...RingProgressConfig} percent={v / 100} /> : '-',
    },
    {
      title: '业绩占比',
      dataIndex: 'SumMLPercent',
      render: (v, r) => v ? <RingProgress {...RingProgressConfig} percent={v / 100} /> : '-',
    },
    {
      title: () => <><div>去年同期</div><div>{dateStringY}</div></>,
      align: 'center',
      children: [
        {
          title: '团数占比',
          width: 90,
          dataIndex: 'ConfirmOrderPercent',
          render: (v, r) => r.resultToY.ConfirmOrderPercent ? <RingProgress {...RingProgressConfigY} percent={r.resultToY.ConfirmOrderPercent / 100} /> : '-',
        },
        {
          title: '业绩占比',
          width: 90,
          dataIndex: 'SumMLPercent',
          render: (v, r) => r.resultToY.SumMLPercent ? <RingProgress {...RingProgressConfigY} percent={r.resultToY.SumMLPercent / 100} /> : '-',
        },
      ],
    },
    {
      title: () => <><div>上个时间段</div><div>{dateStringQ}</div></>,
      align: 'center',
      children: [
        {
          title: '团数占比',
          width: 90,
          dataIndex: 'ConfirmOrderPercent',
          render: (v, r) => r.resultToQ.ConfirmOrderPercent ? <RingProgress {...RingProgressConfigQ} percent={r.resultToQ.ConfirmOrderPercent / 100} /> : '-',
        },
        {
          title: '业绩占比',
          width: 90,
          dataIndex: 'SumMLPercent',
          render: (v, r) => r.resultToQ.SumMLPercent ? <RingProgress {...RingProgressConfigQ} percent={r.resultToQ.SumMLPercent / 100} /> : '-',
        },
      ],
    },
  ];
  const chartsConfig = {
    xField: 'label',
    yFields: ['ConfirmOrder','SumML'],
    seriesField: null,
  };
  return (
    <>
      <Row gutter={16} style={{ margin: '-16px -8px' }}>
        <Col className="gutter-row" span={24}>
          <SearchForm
            defaultValue={{
              initialValue: {
                ...formValues,
              },
              shows: ['DateType', 'DepartmentList', 'WebCode', 'IncludeTickets', 'dates', 'operator'],
              fieldProps: {
                DepartmentList: { show_all: true },
                WebCode: { show_all: true },
                dates: { hide_vs: true },
              },
            }}
            onSubmit={(_err, obj) => {
              pageRefresh(obj);
            }}
          />
        </Col>
      </Row>

      <section>
        <Tabs
          onChange={onTabsChange}
          type="card"
          items={apartOptions.map((ele) => {
            return {
              ...ele,
              children: (
                <Spin spinning={DistributionStore.pageLoading}>
                  <MixYnQ {...chartsConfig} dataSource={DistributionStore[curTab].dataSource} />
                  <Table
                    id="table_to_xlsx_sale"
                    dataSource={DistributionStore[curTab].dataSource}
                    columns={columns}
                    size="small"
                    rowKey={(record) => record.label}
                    loading={DistributionStore[curTab].loading}
                    pagination={false}
                    scroll={{ x: '100%' }}
                  />
                </Spin>
              ),
            };
          })}
        />
      </section>
    </>
  );
});