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 AgentGroupCount = () => {
  const { customerServicesStore, date_picker_store } = useContext(stores_Context);
  const agentGroupList = customerServicesStore.agentGroupList;
  const agentGroupListColumns = customerServicesStore.agentGroupListColumns;
  const { inProgress } = customerServicesStore;

  useEffect(() => {
    customerServicesStore.fetchAllAgent();
  }, []);

  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,
                  ...customerServicesStore.searchValues,
                },
                shows: ['agency', 'DateType', 'DepartmentList', 'countryArea', 'dates'],
                fieldProps: {
                  DepartmentList: { show_all: true },
                  WebCode: { show_all: false, mode: 'multiple' },
                  dates: { hide_vs: true },
                  DateType: { disabledKeys: ['applyDate'] },
                },
              }}
              onSubmit={(_err, obj, form) => {
                customerServicesStore.setSearchValues(obj, form);
                customerServicesStore.fetchAgentGroupCount();
              }}
            />
          </Col>
        </Row>
        <Row>
          <Col span={24}>
            <Typography.Title level={3}>地接社团信息</Typography.Title>
            <Table
              sticky
              id="agentGroupList"
              dataSource={agentGroupList}
              columns={agentGroupListColumns}
              size="small"
              rowKey={(record) => record.key}
              loading={inProgress}
              pagination={false}
              scroll={{ x: 1000 }}
            />
            <Divider orientation="right" plain>
              <TableExportBtn label={'地接社团信息'} {...{ columns: agentGroupListColumns, dataSource: agentGroupList }} />
            </Divider>
          </Col>
        </Row>
      </Space>
    </>
  );
};

export default observer(AgentGroupCount);