import React, { useState } from 'react';
import { PageContainer } from '@ant-design/pro-components';
import { Row, Col, Card } from 'antd';
import List from './List';
import BasicForm from './BasicForm';
import DishList from './DishList';

import './style.less';

export default (props) => {
  const [current, setCurrent] = useState({});

  return (
    <PageContainer>
      <Card>
        <Row gutter={100}>
          <Col span={8}>
            <List current={current} setCurrent={setCurrent}/>
          </Col>
          <Col span={8}>
            <BasicForm current={current} onChange={it => setCurrent(it)} />
            <div style={{ marginTop: '24px' }}>
              <DishList current={current} />
            </div>
          </Col>
        </Row>
      </Card>
    </PageContainer>
  )
}
