import React, { useState, useEffect } from 'react';
import { Modal, Form, Input, Button, Select, InputNumber, Tag, Tooltip } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import ProForm, {
  ProFormSwitch,
  ProFormText,
  ProFormRadio,
  ProFormCheckbox,
  ProFormRate,
  ProFormSelect,
  ProFormDigit,
  ProFormSlider,
  ProFormGroup,
  ProFormDigitRange,
} from '@ant-design/pro-form';

const CreateForm = (props) => {
  const { Option, OptGroup } = Select;

  const children = [];
  return (
    <Modal
      title={props.values.id ? '编辑' : '新建'}
      width={640}
      visible={props.modalVisible}
      bodyStyle={{ padding: '32px 40px 48px' }}
      footer={null}
      onCancel={() => {
        props.onCancel();
      }}
      destroyOnClose
    >
      <div
        style={{
          padding: 24,
        }}
      >
        <ProForm
          layout="Horizontal"
          onValuesChange={(_, values) => {

          }}
          onFinish={async (value) => props.onFinish(value)}>
          <ProFormGroup >
            <ProFormDigitRange label="桌号范围" placeholder="请输入桌号范围" name="numbers" min={1} rules={[{ required: true }]}/>
            <ProFormSelect label="排除桌号" mode="tags" placeholder="请输入排除的桌号"  name="excludeNumber"  width="md" />
            <ProFormText name="code" label="桌台码前缀" placeholder="请输入桌台码前缀" rules={[{  max: 2 }]} />
            <ProFormSelect label="适用店铺" mode="multiple" placeholder="请选择店铺" name="storeIds" width="md" valueEnum={props.storeInfoList} rules={[{ required: true,message:"请选择店铺" }]}/>
          </ProFormGroup>
        </ProForm>
      </div>
    </Modal>
  );
};

export default CreateForm;
