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 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} style={{ margin: '-16px -8px', position: 'relative', top: 0, zIndex: 10 }}>
          <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 },
                },
              }}
              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>
              <a
                onClick={() => {
                  const wb = utils.table_to_book(document.getElementById('agentGroupList').getElementsByTagName('table')[0]);
                  writeFileXLSX(wb, '地接社团信息.xlsx');
                }}
              >
                导出excel
              </a>
            </Divider>
          </Col>
        </Row>
      </Space>
    </>
  );
};

export default observer(AgentGroupCount);