import React, { useState, useEffect } from 'react';
import { Modal, Form, Input, Button, Select, InputNumber } from 'antd';
import api from '../services';
const CreateForm = (props) => {
  const { Option, OptGroup } = Select;
  const [options, setoptions] = useState();
  //每次触发
  useEffect(() => {
    const initoptions = async (value) => {
      var data = await api.getStirFryArray("stirfrypotaction");
      if (data != undefined) {
        setoptions(data.data);
      }
    };
    initoptions();
  }, []);
  return (
    <Modal
      title={props.values.id ? '编辑' : '新建'}
      width={640}
      visible={props.createModalVisible}
      bodyStyle={{ padding: '32px 40px 48px' }}
      footer={null}
      onCancel={() => {
        props.onCancel();
      }}
      destroyOnClose
    >
      <Form
        layout="horizontal"
        preserve={false}
        initialValues={props.values}
        onFinish={props.onFinish}
      >
        <Form.Item name="id" hidden={true}>
          <Input />
        </Form.Item>
        <Form.Item name="status" hidden={true}>
          <Input />
        </Form.Item>
        <Form.Item name="fryTime" label="步骤名称" rules={[{ required: true, max: 64 }]}>
        <Input />
        </Form.Item>
        <Form.Item name="actions" label="炒锅动作" rules={[{ required: true, max: 64 }]}>
        <Select style={{ width: 200 }}
            showSearch
            optionFilterProp="children"
            filterOption={(input, option) =>
              option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
            } >
            {options?.map((item, index) => {
              return (
                <Option
                  index={item}
                  value={item}
                  key={index}
                >
                  {item}
                </Option>
              );
            })}
          </Select>
        </Form.Item>
        <Form.Item name="during" label="持续时间" rules={[{ required: true }]}>
          <InputNumber   min={0} />
        </Form.Item>
        <span style={{ color: '#FFCC52' }}>
            注: 持续时间(s),若为0,则等待该流程走完结束
          </span>

        <Form.Item name="sort" label="步骤排序" rules={[{ required: true }]}>
          <InputNumber   min={0} />
        </Form.Item>
        <span style={{ color: '#FFCC52' }}>
            注: 步骤排序不能重复
          </span>
          <Form.Item>
          <Button type="primary" htmlType="submit">
            保存
          </Button>
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default CreateForm;
