import { useContext, useEffect } from 'react';
import { Row, Col, Typography, Space, Table, Divider } from 'antd';
import { stores_Context } from '../config';
import { observer } from 'mobx-react';
import 'moment/locale/zh-cn';
import { utils, writeFileXLSX } from 'xlsx';
import SearchForm from './../components/search/SearchForm';

const DestinationGroupCount = () => {
  const { customerServicesStore, date_picker_store } = useContext(stores_Context);
  const destinationGroupCount = customerServicesStore.destinationGroupCount;
  const destinationGroupCountColumns = customerServicesStore.destinationGroupCountColumns;
  const { startDate, endDate, dateType, inProgress } = customerServicesStore;

  return (
    <>
      <Space direction="vertical" style={{ width: '100%' }}>
        <Row gutter={16} style={{ margin: '-16px -8px', position: 'relative', top: 0, zIndex: 10 }}>
          <Col className="gutter-row" span={24}>
            <SearchForm
              defaultValue={{
                initialValue: {
                  ...date_picker_store.formValues,
                  countryArea: { key: 'china', label: '国内' },
                  ...customerServicesStore.searchValues,
                },
                shows: ['DateType', 'DepartmentList', 'countryArea', 'orderStatus', 'dates'],
                fieldProps: {
                  DepartmentList: { show_all: true },
                  orderStatus: { show_all: true },
                  countryArea: { show_all: false },
                  dates: { hide_vs: true },
                },
              }}
              onSubmit={(_err, obj, form) => {
                customerServicesStore.setSearchValues(obj, form);
                customerServicesStore.fetchDestinationGroupCount();
              }}
            />
          </Col>
        </Row>
        <Row>
          <Col span={24}>
            <Typography.Title level={3}>目的地团信息</Typography.Title>
            <Table
              sticky
              id="destinationGroupCount"
              dataSource={destinationGroupCount}
              columns={destinationGroupCountColumns}
              size="small"
              rowKey={(record) => record.key}
              loading={inProgress}
              pagination={false}
              scroll={{ x: 1000 }}
            />
            <Divider orientation="right" plain>
              <a
                onClick={() => {
                  const wb = utils.table_to_book(document.getElementById('destinationGroupCount').getElementsByTagName('table')[0]);
                  writeFileXLSX(wb, '目的地团信息.xlsx');
                }}
              >
                导出excel
              </a>
            </Divider>
          </Col>
        </Row>
      </Space>
    </>
  );
};

export default observer(DestinationGroupCount);