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 DestinationGroupCount = () => {

  const {customerServicesStore} = useContext(stores_Context);
  const destinationGroupCount = customerServicesStore.destinationGroupCount;
  const destinationGroupCountColumns = customerServicesStore.destinationGroupCountColumns;
  const {startDate, endDate, dateType, inProgress} = customerServicesStore;

  useEffect(() => {
    customerServicesStore.selectCountry('china');
	}, []);

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

  return (
    <>
      <Space direction="vertical" style={{ width: '100%' }}>
        <Row gutter={{ md: 24 }} justify="end">
          <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={2}>
            <Select value={customerServicesStore.selectedCountry} style={{ width: "95%" }} onChange={(value) => customerServicesStore.selectCountry(value)}>
              <Select.Option key="china" value="china">
                国内
              </Select.Option>
              <Select.Option key="foreign" value="foreign">
                国外
              </Select.Option>
            </Select>
          </Col>
          <Col span={2}>
            <Select value={customerServicesStore.selectedOrderStatus} style={{ width: "95%" }} onChange={(value) => customerServicesStore.selectStatus(value)}>
              <Select.Option key="所有" value="-1">
              所有
              </Select.Option>
              <Select.Option key="已成行" value="1">
              已成行
              </Select.Option>
              <Select.Option key="未成行" value="0">
              未成行
              </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="destinationGroupCount"
              dataSource={destinationGroupCount}
              columns={destinationGroupCountColumns}
              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("destinationGroupCount").getElementsByTagName("table")[0]);
                  writeFileXLSX(wb, "目的地团信息.xlsx");
                }}>
                导出excel
              </a>
            </Divider>
          </Col>
        </Row>
      </Space>
    </>
  );
};

export default observer(DestinationGroupCount);