import { useContext, useEffect } from 'react';
import { observer } from 'mobx-react';
import { stores_Context } from '../config';
import { Row, Col, Spin, Tabs, Table } 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 './kpi.css';

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: '海外目的地' },
];

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

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

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

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

  const onTabsChange = (tab) => {
    DistributionStore.setCurTab(tab);
  };
  const RingProgressConfig = {
    height: 60,
    width: 60,
    autoFit: false,
    color: ['#5B8FF9', '#E8EDF3'],
  };
  const columns = [
    { title: '', dataIndex: 'label' },
    { title: '团数', dataIndex: 'ConfirmOrder' },
    { title: '业绩', dataIndex: 'SumML', render: (v) => dataFieldAlias.SumML.formatter(v) },
    { title: '团数占比', dataIndex: 'ConfirmOrderPercent', render: (v) => <RingProgress {...RingProgressConfig} percent={v / 100} /> },
    { title: '业绩占比', dataIndex: 'SumMLPercent', render: (v) => <RingProgress {...RingProgressConfig} percent={v / 100} /> },
  ];
  return (
    <>
      <Row gutter={16} style={{ margin: '-16px -8px' }}>
        <Col className="gutter-row" span={24}>
          <SearchForm
            defaultValue={{
              initialValue: {
                ...formValues,
              },
              shows: ['DateType', 'DepartmentList', 'WebCode', 'IncludeTickets', 'dates'],
              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}>
                  <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>
    </>
  );
});