import React, {Component} from 'react';
import {Row, Col, List, Avatar, Space, DatePicker, Button, Select, Table} from 'antd';
import {
  ContainerOutlined, CarryOutOutlined,
  SmileOutlined, TagsOutlined, GlobalOutlined,
  SearchOutlined,
} from '@ant-design/icons';
import {stores_Context} from '../config'
import * as config from "../config";
import {Line} from "@ant-design/charts";
import {observer} from 'mobx-react';
import 'moment/locale/zh-cn';
import moment from "moment";
import locale from 'antd/es/date-picker/locale/zh_CN';

class AgentGroup extends Component {

    static contextType = stores_Context;
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        console.info('AgentGroup.componentDidMount');
        const {customerServicesStore} = this.context;
        customerServicesStore.fetchAgentList();
    }

    render() {
      const {customerServicesStore} = this.context;
      const agentList = customerServicesStore.agentList;    
      const agentListColumns = customerServicesStore.agentListColumns;
      const groupList = customerServicesStore.groupList;    
      const groupListColumns = customerServicesStore.groupListColumns;

      return (
        <>
          <Row>
          <Col md={24} lg={14} xxl={12}>
            <Row>
              <Col md={8} lg={7} xxl={6}>
                <Select value={"ConfirmDate"} style={{ width: "95%" }} onChange={(value) => console.info(value)}>
                  <Select.Option key="1" value="ConfirmDate">
                    确认日期
                  </Select.Option>
                  <Select.Option key="2" value="applyDate">
                    下单日期
                  </Select.Option>
                  <Select.Option key="3" value="startDate">
                    走团日期
                  </Select.Option>
                </Select>
              </Col>
              <Col span={8}>
                <DatePicker.RangePicker 
                  format={config.DATE_FORMAT} locale={locale}
                  allowClear={false}
                  value={[moment().startOf('week').subtract(7, 'days'), moment().endOf('week').subtract(7, 'days')]}
                  onChange={(dates) => {console.info(dates)}}
                  ranges={{
                      '本周': [moment().startOf('week'), moment().endOf('week')],
                      '上周': [moment().startOf('week').subtract(7, 'days'), moment().endOf('week').subtract(7, 'days')],
                      '本月': [moment().startOf('month'), moment().endOf('month')],
                      '上个月': [moment().subtract(1, 'months').startOf('month'), moment(new Date()).subtract(1, 'months').endOf('month')],
                      '近30天': [moment().subtract(30, 'days'), moment()],
                      '近三个月': [moment().subtract(2, 'month').startOf('month'), moment().endOf('month')],
                      '今年': [moment().startOf('year').subtract(1, 'month'), moment().endOf('year').subtract(1, 'month')],
                      '去年': [moment().subtract(1, 'year').startOf('year').subtract(1, 'month'), moment().subtract(1, 'year').endOf('year').subtract(1, 'month')],
                  }}
                />
              </Col>
              <Col md={8} lg={5} xxl={8}>
                <Button
                  type="primary"
                  icon={<SearchOutlined />}
                  loading={false}
                  onClick={() => {
                    console.info('click...');
                  }}>
                  统计
                </Button>
              </Col>
            </Row>
          </Col>
        </Row>
        <Row>
          <Col span={24}>
            <Table dataSource={agentList} columns={agentListColumns} size="small" rowKey={(record) => record.key} loading={false} pagination={false} scroll={{ x: "100%" }} />
          </Col>
        </Row>
        <Row>
          <Col span={24}>
            <Table dataSource={groupList} columns={groupListColumns} size="small" rowKey={(record) => record.key} loading={false} pagination={false} scroll={{ x: "100%" }} />
          </Col>
        </Row>
      </>
    );
  }

}

export default observer(AgentGroup);