import React, { useState, useEffect } from 'react';
import { Modal, Form, Input, Button, Select, InputNumber, Checkbox, TimePicker, DatePicker } from 'antd';
import 'dayjs/locale/zh-cn';
import locale from 'antd/es/date-picker/locale/zh_CN';
const { RangePicker } = DatePicker;
const CreateForm = (props) => {
  console.log('props', props)
  const { Option, OptGroup } = Select;
  return (
    <Modal
      title={'设置可预订数量'}
      width={640}
      visible={props.createModalVisible}
      bodyStyle={{ padding: '32px 40px 48px' }}
      footer={null}
      onCancel={() => {
        props.onCancel();
      }}
      destroyOnClose
    >
      <Form
        labelCol={{ span: 4 }}
        layout="horizontal"
        preserve={false}
        initialValues={props.values}
        onFinish={props.onFinish}
      >
        <Form.Item name="id" hidden={true}>
          <Input />
        </Form.Item>
        <Form.Item name="qty" label="可预订数量" rules={[{ required: true }]}>
          <InputNumber min={0} placeholder="可预订数量" />
        </Form.Item>
        <Form.Item name="mealType" label="可预定时段" rules={[{ required: true }]}>
          <Checkbox.Group options={[
            {
              label: '早餐',
              value: '1',
            },
            {
              label: '午餐',
              value: '2',
            },
            {
              label: '晚餐',
              value: '3',
            }
          ]} />
        </Form.Item>

        <Form.Item name="startReserveTime" label="开始时间" >
          <TimePicker ></TimePicker>
        </Form.Item>

        <Form.Item name="endReserveTime" label="结束时间" >
        <TimePicker ></TimePicker>
        </Form.Item>




        <Form.Item>
          <Button type="primary" htmlType="submit">
            保存
          </Button>
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default CreateForm;
