import { useContext, useEffect, useState } from 'react';
import { observer } from 'mobx-react';
import { stores_Context } from '../config';
import { Spin, Table, Row, Col, Tabs, Switch } from 'antd';
import SearchForm from './../components/search/SearchForm';
import { TableExportBtn } from './../components/Data';
import { empty } from '../utils/commons';
import './kpi.css';

const apartOptions = [
  { key: 'inbound', value: 'inbound', label: '入境' },
  { key: 'outbound', value: 'outbound', label: '出境' },
  { key: 'domestic', value: 'domestic', label: '国内' },
];
const apartOptionsMapped = apartOptions.reduce((r, v) => ({...r, [v.value]: v}), {});

export default observer((props) => {
  const { financial_store: financialStore, date_picker_store: searchFormStore } = useContext(stores_Context);
  const { formValues, formValuesToSub } = searchFormStore;
  const { servicePersonNum } = financialStore;
  const { curTab } = servicePersonNum;
  const [ifNull, setIfNull] = useState(false);

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

  const pageRefresh = (queryData = formValuesToSub) => {
    // console.log(queryData, 'qqqq');
    financialStore.getPersonNum(queryData);

    financialStore.setPersonNumTableDataSource(false);
    setIfNull(false);
  };


  const columns = [
    { title: apartOptionsMapped[curTab].label, dataIndex: 'groupsLabel', children: [{ title: `${formValuesToSub.Date1}~${formValuesToSub.Date2.substring(0, 10)}`, dataIndex: 'groupsLabel' }] },
    {
      title: '人次数',
      children: [{ title: '组织', dataIndex: 'orgz' }, ...(['inbound', 'domestic'].includes(curTab) ? [{ title: '接待', dataIndex: 'hosts' }] : [])],
    },
    {
      title: '人天',
      children: [{ title: '组织', dataIndex: 'orgzPDays' }, ...(['inbound', 'domestic'].includes(curTab) ? [{ title: '接待', dataIndex: 'hostsPDays' }] : [])],
    },
  ];

  return (
    <>
      <Row gutter={16} style={{ margin: '-16px -8px', position: 'sticky', top: 0, zIndex: 10 }}>
        <Col className="gutter-row" span={24}>
          <SearchForm
            defaultValue={{
              initialValue: {
                ...formValues,
                DateType: { key: 'startDate', value: 'startDate', label: '走团日期' },
              },
              shows: ['dates'],
              fieldProps: {
                dates: { hide_vs: true },
              },
            }}
            onSubmit={(_err, obj, form, str) => {
              pageRefresh(obj);
            }}
          />
        </Col>
      </Row>

      <section>
        <Tabs
          activeKey={curTab}
          onChange={(v) => {
            financialStore.setCurTab(v);
            if (empty(servicePersonNum[v].dataSource)) {
              pageRefresh();
            }
          }}
          tabBarExtraContent={{
            right: (
              <>
                <Switch
                  unCheckedChildren="原数据"
                  checkedChildren="去除空"
                  key={'ifNull'}
                  checked={ifNull}
                  onChange={(e) => {
                    financialStore.setPersonNumTableDataSource(e);
                    setIfNull(e);
                  }}
                />
                <TableExportBtn label={'服务人数_'+apartOptionsMapped[curTab].label} {...{ columns, dataSource: servicePersonNum[curTab].dataSource }} />
              </>
            ),
          }}
          type="card"
          items={apartOptions.map((ele) => {
            return {
              ...ele,
              children: (
                <Spin spinning={servicePersonNum.loading}>
                  <Table
                    id="table_to_xlsx_sale"
                    dataSource={servicePersonNum[curTab].dataSource}
                    rowKey="groupsKey"
                    columns={columns}
                    size="small"
                    loading={servicePersonNum[curTab].loading}
                    pagination={false}
                    scroll={{ x: '100%' }}
                  />
                </Spin>
              ),
            };
          })}
        />
      </section>
    </>
  );
});