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';
import { TableExportBtn } from './../components/Data';

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} className={date_picker_store.siderBroken ? "" : "sticky-top"}>
          <Col className="gutter-row" span={24}>
            <SearchForm
              defaultValue={{
                initialValue: {
                  ...date_picker_store.formValues,
                  countryArea: { key: 'china', label: '国内' },
                  ...customerServicesStore.searchValues,
                },
                shows: ['departureDateType', 'DepartmentList', 'countryArea', 'orderStatus', 'dates'],
                fieldProps: {
                  DepartmentList: { show_all: true, mode: 'multiple' },
                  orderStatus: { show_all: true },
                  countryArea: { show_all: false },
                  years: { hide_vs: true },
                  departureDateType: { disabledKeys: ['applyDate'] },
                },
              }}
              onSubmit={(_err, obj, form) => {
                customerServicesStore.setSearchValues(obj, form);
                customerServicesStore.fetchDestinationGroupCount();
              }}
            />
          </Col>
        </Row>
        <Row>
          <Col span={24}>
            <Typography.Title level={3}>目的地团信息</Typography.Title>
            <Divider orientation="right" plain>
              <TableExportBtn label={'目的地团信息'} {...{ columns: destinationGroupCountColumns, dataSource: destinationGroupCount }} />
            </Divider>
            <Table
              sticky
              id="destinationGroupCount"
              dataSource={destinationGroupCount}
              columns={destinationGroupCountColumns}
              size="small"
              rowKey={(record) => record.key}
              loading={inProgress}
              pagination={false}
              scroll={{ x: 1000 }}
            />
          </Col>
        </Row>
      </Space>
    </>
  );
};

export default observer(DestinationGroupCount);