import React, { Children, useContext, useState } from 'react';
import { observer } from 'mobx-react';
import { stores_Context } from '../config';
import moment from 'moment';
import { Row, Col, Table, Select, Space, Typography, Progress, Spin, Divider, Button, Switch } from 'antd';
import SearchForm from './../components/search/SearchForm';

export default observer((props) => {
  const { sale_store, date_picker_store: searchFormStore } = useContext(stores_Context);
  const { customerServicesStore, date_picker_store } = useContext(stores_Context);

  const { formValues, siderBroken } = searchFormStore;

  const tableProps = {
    size: 'small',
    columns: [
      { title: '产品', dataIndex: 'op', key: 'op' },
      { title: '房间数', dataIndex: 'action', key: 'action' },
      { title: '人数', dataIndex: 'action', key: 'action' },
      { title: '总利润', dataIndex: 'action', key: 'action' },
      { title: '单订船', dataIndex: 'action', key: 'action' },
      { title: '订单含行程', dataIndex: 'action', key: 'action' },
      { title: '国籍', dataIndex: 'action', key: 'action' },
    ],
  };

  return (
    <>
      <Row gutter={16} className={siderBroken ? '' : 'sticky-top'}>
        <Col md={24} lg={24} xxl={24}>
          <SearchForm
            defaultValue={{
              initialValue: {
                ...date_picker_store.formValues,
                ...customerServicesStore.searchValues,
              },
              // 'countryArea',
              shows: ['DepartmentList',  'orderStatus', 'years', 'keyword', 'agency', 'cruiseType'],
              sort: { keyword: 101, cruiseType: 102, agency: 103 },
              fieldProps: {
                keyword: { placeholder: '产品名', col: 4 },
                DepartmentList: { show_all: true, mode: 'multiple' },
                orderStatus: { show_all: true },
                // years: { hide_vs: false },
              },
            }}
            onSubmit={(_err, obj, form) => {
              customerServicesStore.setSearchValues(obj, form);
              // customerServicesStore.fetchDestinationGroupCount();
            }}
          />
        </Col>
      </Row>
      <section>
        <Table {...tableProps} bordered />
      </section>
    </>
  );
});