import { useContext, useEffect } from 'react';
import { Row, Col, Typography, Space, Table, List } from 'antd';
import { stores_Context } from '../config';
import { observer } from 'mobx-react';
import { NavLink, useParams } from 'react-router-dom';
import 'moment/locale/zh-cn';
import SearchForm from './../components/search/SearchForm';

const AgentGroupList = () => {
  const { agentId } = useParams();
  const { customerServicesStore, date_picker_store } = useContext(stores_Context);

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

  const groupList = customerServicesStore.groupList;
  const groupListColumns = customerServicesStore.groupListColumns;
  const { startDate, endDate, dateType, inProgress } = customerServicesStore;

  return (
    <>
      <Space direction="vertical" style={{ width: '100%' }}>
        <Row gutter={{ md: 24 }} justify="end">
          <Col span={24}>
            <NavLink to={'/agent/group/count'}>返回</NavLink>
          </Col>
          <Col className="gutter-row" span={24}>
            <SearchForm
              defaultValue={{
                initialValue: {
                  ...date_picker_store.formValues,
                  ...customerServicesStore.searchValues,
                },
                shows: ['DateType', 'DepartmentList', 'dates'],
                fieldProps: {
                  DepartmentList: { show_all: true },
                  WebCode: { show_all: false, mode: 'multiple' },
                  dates: { hide_vs: true },
                },
              }}
              onSubmit={(_err, obj, form, str) => {
                customerServicesStore.setSearchValues(obj, form);
                customerServicesStore.fetchGroupListByAgentId(agentId);
              }}
            />
          </Col>
        </Row>
        <Row>
          <Col span={24}>
            <Typography.Title level={3}>{customerServicesStore.agentCompany}</Typography.Title>
            <Table
              sticky
              dataSource={groupList}
              columns={groupListColumns}
              size="small"
              rowKey={(record) => record.key}
              loading={inProgress}
              pagination={false}
              scroll={{ x: 1000 }}
              expandable={{
                expandedRowRender: (record) => (
                  <List itemLayout="horizontal">
                    <List.Item>
                      <List.Item.Meta title="经过城市" description={record.PassCity} />
                    </List.Item>
                    <List.Item>
                      <List.Item.Meta title="评论内容" description={record.ECI_Content} />
                    </List.Item>
                  </List>
                ),
              }}
            />
          </Col>
        </Row>
      </Space>
    </>
  );
};

export default observer(AgentGroupList);