import React, { useContext, useEffect } from 'react';
import { Row, Col, Typography, Space, DatePicker, Button, Select, Table, Divider } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import { stores_Context } from '../config';
import * as config from '../config';
import { observer } from 'mobx-react';
import 'moment/locale/zh-cn';
import moment from 'moment';
import zhCNlocale from 'antd/es/date-picker/locale/zh_CN';
import { utils, writeFileXLSX } from 'xlsx';

const AgentGroupCount = () => {
  const { customerServicesStore } = useContext(stores_Context);
  const agentList = customerServicesStore.agentList;
  const agentGroupList = customerServicesStore.agentGroupList;
  const agentGroupListColumns = customerServicesStore.agentGroupListColumns;
  const { startDate, endDate, dateType, inProgress } = customerServicesStore;

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

  const handleSearchClick = () => {
    customerServicesStore.fetchAgentGroupCount();
  };

  const renderAgentItem = (agent) => {
    return (
      <Select.Option key={agent.CAV_VEI_SN} value={agent.CAV_VEI_SN}>
        {agent.VEI2_CompanyBN}
      </Select.Option>
    );
  };

  return (
    <>
      <Space direction="vertical" style={{ width: '100%' }}>
        <Row gutter={{ md: 24 }} justify="end">
          <Col span={4}>
            <Select
              value={customerServicesStore.selectedAgent}
              style={{ width: '95%' }}
              showSearch
              onSearch={(value) => {
                console.log('search:', value);
              }}
              filterOption={(input, option) => {
                return option.children.indexOf(input) > -1;
              }}
              onChange={(value) => customerServicesStore.selectAgent(value)}
            >
              <Select.Option key="0" value="">
                所有地接社
              </Select.Option>
              {agentList.map(renderAgentItem)}
            </Select>
          </Col>
          <Col span={4}>
            <Select
              style={{ width: '95%' }}
              value={customerServicesStore.selectedTeam}
              onChange={(value) => customerServicesStore.selectTeam(value)}
            >
              <Select.Option key="0" value="">
                所有小组
              </Select.Option>
              <Select.Option key="31" value="1,2,28,7">
                GH事业部
              </Select.Option>
              <Select.Option key="32" value="8,9,11,12,20,21">
                国际事业部
              </Select.Option>
              <Select.Option key="33" value="10,18,16,30">
                孵化学院
              </Select.Option>
              <Select.Option key="1" value="1">
                CH直销
              </Select.Option>
              <Select.Option key="2" value="2">
                CH大客户
              </Select.Option>
              <Select.Option key="28" value="28">
                AH
              </Select.Option>
              <Select.Option key="7" value="7">
                市场推广
              </Select.Option>
              <Select.Option key="8" value="8">
                德语
              </Select.Option>
              <Select.Option key="9" value="9">
                日语
              </Select.Option>
              <Select.Option key="11" value="11">
                法语
              </Select.Option>
              <Select.Option key="12" value="12">
                西语
              </Select.Option>
              <Select.Option key="20" value="20">
                俄语
              </Select.Option>
              <Select.Option key="21" value="21">
                意语
              </Select.Option>
              <Select.Option key="10" value="10">
                商旅
              </Select.Option>
              <Select.Option key="18" value="18">
                CT
              </Select.Option>
              <Select.Option key="16" value="16">
                APP
              </Select.Option>
              <Select.Option key="30" value="30">
                Trippest
              </Select.Option>
              <Select.Option key="31" value="31">
                花梨鹰
              </Select.Option>
            </Select>
          </Col>
          <Col span={4}>
            <Select
              value={customerServicesStore.selectedCountry}
              style={{ width: '95%' }}
              onChange={(value) => customerServicesStore.selectCountry(value)}
            >
              <Select.Option key="ALL" value="">
                所有国家
              </Select.Option>
              <Select.Option key="china" value="china">
                国内
              </Select.Option>
              <Select.Option key="foreign" value="foreign">
                国外
              </Select.Option>
            </Select>
          </Col>
          <Col span={4}>
            <Select
              value={dateType}
              style={{ width: '95%' }}
              onChange={(value) => customerServicesStore.selectDateType(value)}
            >
              <Select.Option key="startDate" value="startDate">
                走团日期
              </Select.Option>
              <Select.Option key="ConfirmDate" value="ConfirmDate">
                成团日期
              </Select.Option>
            </Select>
          </Col>
          <Col span={4}>
            <DatePicker.RangePicker
              format={config.DATE_FORMAT}
              locale={zhCNlocale}
              allowClear={false}
              value={[startDate, endDate]}
              onChange={(dates) => {
                customerServicesStore.selectDateRange(dates[0], dates[1]);
              }}
              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 span={4}>
            <Button
              type="primary"
              icon={<SearchOutlined />}
              loading={inProgress}
              onClick={() => {
                handleSearchClick();
              }}
            >
              统计
            </Button>
          </Col>
        </Row>
        <Row>
          <Col span={24}>
            <Typography.Title level={3}>地接社团信息</Typography.Title>
            <Table
              id="agentGroupList"
              dataSource={agentGroupList}
              columns={agentGroupListColumns}
              size="small"
              rowKey={(record) => record.key}
              loading={inProgress}
              pagination={false}
              scroll={{ x: '100%' }}
            />
            <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);