import React, { useContext, useEffect } from 'react';
import { Row, Col, Divider, Table, Tooltip } from 'antd';
import { InfoCircleOutlined } from '@ant-design/icons';
import { utils, writeFileXLSX } from 'xlsx';
import { stores_Context } from '../config';
import { observer } from 'mobx-react';
import SearchForm from './../components/search/SearchForm';

const Customer_care_regular = () => {
  const { orders_store, date_picker_store, customer_store } = useContext(stores_Context);
  const regular_data = customer_store.regular_data;

  useEffect(() => {}, []);

  return (
    <div>
      <Row gutter={16} className={date_picker_store.siderBroken ? '' : 'sticky-top'}>
        <Col className="gutter-row" span={24}>
          <SearchForm
            defaultValue={{
              initialValue: {
                ...date_picker_store.formValues,
                ...regular_data.searchValues,
              },
              shows: ['DateType', 'DepartmentList', 'WebCode', 'dates', 'IncludeTickets'],
              fieldProps: {
                DepartmentList: { show_all: false, mode: 'multiple' },
                WebCode: { show_all: false, mode: 'multiple' },
                dates: { hide_vs: true },
              },
            }}
            onSubmit={(_err, obj, form, str) => {
              customer_store.setSearchValues(obj, form, 'regular_data');
              customer_store.regular_customer_order();
              customer_store.regular_customer_order(true);
            }}
          />
        </Col>
      </Row>
      <Row gutter={16}>
        <Col span={24}>
          <h2>老客户</h2>
        </Col>
        <Col span={24}>
          <Table
            dataSource={regular_data.data}
            loading={regular_data.loading}
            columns={[
              {
                title: '统计条目',
                dataIndex: 'ItemName',
                key: 'ItemName',
              },
              {
                title: () => (
                  <>
                    订单数{' '}
                    <Tooltip key='total_data_tips_title' title="总订单: 当同时勾选老客户和推荐时, 将重复计数">
                      <InfoCircleOutlined />
                    </Tooltip>
                  </>
                ),
                dataIndex: 'OrderNum',
                key: 'OrderNum',
                render: (text, record, index) => (
                  <>
                    <span>{text}</span>&nbsp;&nbsp;
                    {<Tooltip key='total_data_tips' title={regular_data.total_data_tips}>
                      {index === 0 && regular_data.total_data_tips!=='' && <InfoCircleOutlined />}
                    </Tooltip>}
                  </>
                ),
              },
              {
                title: '成行数',
                dataIndex: 'SUCOrderNum',
                key: 'SUCOrderNum',
              },
              {
                title: '成行率',
                dataIndex: 'SUCRate',
                key: 'SUCRate',
                render: (text, record) => <span>{Math.round(text * 100)}%</span>,
              },
              {
                title: '毛利',
                dataIndex: 'ML',
                key: 'ML',
              },
              {
                title: '人数（含成人+儿童）',
                dataIndex: 'PersonNum',
                key: 'PersonNum',
              },
            ]}
            size="small"
            pagination={false}
            rowKey={(record) => record.ItemName}
          />
        </Col>
        <Col span={24}>
          <Divider orientation="right" plain>
            <a
              onClick={() => {
                const wb = utils.table_to_book(document.getElementById('table_to_xlsx').getElementsByTagName('table')[0]);
                writeFileXLSX(wb, '老客户.xlsx');
              }}
            >
              导出excel
            </a>
          </Divider>
          <Table
            id="table_to_xlsx"
            pagination={false}
            loading={regular_data.loading}
            dataSource={regular_data.data_detail}
            scroll={{ x: 1200 }}
            columns={[
              {
                title: '订单号',
                dataIndex: 'COLI_ID',
                key: 'COLI_ID',
              },
              {
                title: '预定日期',
                dataIndex: 'COLI_ApplyDate',
                key: 'COLI_ApplyDate',
              },
              {
                title: '订单状态',
                dataIndex: 'OrderState',
                key: 'OrderState',
                render: (text, record) => <span>{text == 1 ? '成行' : '未成行'}</span>,
                sorter: (a, b) => b.OrderState - a.OrderState,
              },
              {
                title: '毛利',
                dataIndex: 'ML',
                key: 'ML',
              },
              {
                title: '人数',
                dataIndex: 'PersonNum',
                key: 'PersonNum',
              },
              {
                title: '天数',
                dataIndex: 'COLI_Days',
                key: 'COLI_Days',
              },
              {
                title: '人天数',
                dataIndex: 'CGI_PersonDays',
                key: 'CGI_PersonDays',
              },
              {
                title: '走团日期',
                dataIndex: 'COLI_OrderStartDate',
                key: 'COLI_OrderStartDate',
              },
              {
                title: '小组',
                dataIndex: 'Department',
                key: 'Department',
              },
              {
                title: '老客户',
                dataIndex: 'COLI_IsOld',
                key: 'COLI_IsOld',
              },
              {
                title: '老客户推荐',
                dataIndex: 'COLI_IsCusCommend',
                key: 'COLI_IsCusCommend',
              },
              {
                title: '网站',
                dataIndex: 'COLI_WebCode',
                key: 'COLI_WebCode',
              },
              {
                title: '来源',
                dataIndex: 'SourceType',
                key: 'SourceType',
              },
              {
                title: '页面类型',
                dataIndex: 'COLI_LineClass',
                key: 'COLI_LineClass',
              },
            ]}
            size="small"
            rowKey={(record) => record.COLI_ID}
          />
        </Col>
      </Row>
    </div>
  );
};
export default observer(Customer_care_regular);