import { useContext } from 'react';
import { observer } from 'mobx-react';
// import { stores_Context } from '../config';
import { Button, Table, Switch, Input, Space, Typography, Row, Col, Spin, Radio, Tabs } from 'antd';
import SearchForm from './../search/SearchForm';
import { bu, KPIObjects } from './../../libs/ht';

export default observer((props) => {
  // const {  } = useContext(stores_Context);
  return (
    <>
      <Row gutter={16} className="mb-1">
        <Col className="gutter-row mb-n1 p-none" span={24}>
          <SearchForm
            defaultValue={{
              'initialValue': {
                // ...searchPayloadHome,
              },
              // hides: ['businessUnits', 'months', 'WebCode', 'dates'],
              shows: ['HTBusinessUnits', 'DateType', 'DepartmentList', 'years'],
              'fieldProps': {
                HTBusinessUnits: { show_all: true },
                DepartmentList: { show_all: true },
                WebCode: { show_all: false },
                years: { hide_vs: true },
              },
            }}
            confirmText="查询"
            onSubmit={(_err, obj, form, str) => {
              // TradeStore.setStateSearch(form);
              // pageRefresh(obj);
            }}
          />
        </Col>
      </Row>
      <Row gutter={16} className="mb-1 p-s1">
        <Col className="gutter-row mb-n1 p-none" span={24} style={{ backgroundColor: '#ffffff' }}>
          <Tabs
            tabPosition={'left'}
            style={
              {
                // height: 220,
              }
            }
            items={KPIObjects.map((ele, i) => {
              const id = String(i);
              return {
                ...ele,
                children: `Content of tab ${id}`,
              };
            })}
          />
        </Col>
      </Row>
    </>
  );
});