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

const Customer_care_potential = () => {

    const {orders_store, date_picker_store, customer_store} = useContext(stores_Context);
    const potential_data = customer_store.potential_data;

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


    return (
        <div>
        <Row gutter={16} style={{ margin: '-16px -8px', position: 'relative', top: 0, zIndex: 10 }}>
          <Col className="gutter-row" span={24}>
            <SearchForm
              defaultValue={{
                initialValue: {
                  ...date_picker_store.formValues,
                  ...potential_data.searchValues,
                },
                shows: ['DateType', 'DepartmentList', 'WebCode', 'dates'],
                fieldProps: {
                  DepartmentList: { show_all: false, mode: 'multiple' },
                  WebCode: { show_all: true, mode: 'multiple' },
                  dates: { hide_vs: true },
                },
              }}
              onSubmit={(_err, obj, form, str) => {
                customer_store.setSearchValues(obj, form, 'potential_data');
                customer_store.potential_customer_order();
                customer_store.potential_customer_order(true);
              }}
            />
          </Col>
                <Col span={24}>
                    <h2>潜力客户</h2>
                </Col>
                {/* <Col span={1}></Col> */}
                <Col span={24}>
                    <Table dataSource={potential_data.data} loading={potential_data.loading} columns={
                        [
                            {
                                title: '订单数',
                                dataIndex: 'OrderNum',
                                key: 'OrderNum',
                            },
                            {
                                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.OrderNum}
                    />
                </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={potential_data.loading} dataSource={potential_data.data_detail} 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: 'ZH',
                                key: 'ZH',
                            },
                        ]
                    } size="small"
                           rowKey={record => record.COLI_ID}
                    />
                </Col>
            </Row>

        </div>
    );

};
export default observer(Customer_care_potential);