import React, { useState } from 'react';
import { Modal, Form, Input, Button, Select } from 'antd';
import { getbompage } from '../service';
const GoodsbomFrom = (props) => {
  const { Option, OptGroup } = Select;

  const [getGoodsBoms, setGoodsBoms] = useState([]);
  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} onFinish={props.onFinish}>
        <Form.Item name="BomType" label="状态" rules={[{ required: true, message: '配方类型' }]}>
          <Select
            placeholder="请选配方类型"
            onChange={(value) => {
              getbompage({ current: 1, pageSize: 10000000, IsMain: value }).then((r) => {
                var arr = r.data.data;
                setGoodsBoms(arr);
                console.log(arr);
              });
            }}
          >
            <OptGroup>
              <Select.Option value="1">主料配方</Select.Option>
              <Select.Option value="0">辅料配方</Select.Option>
            </OptGroup>
          </Select>
        </Form.Item>
        <Form.Item name="bomId" label="配方信息" rules={[{ required: true, message: '配方信息' }]}>
          <Select
            showSearch
            optionFilterProp="children"
            placeholder="请选配方信息">
            {getGoodsBoms.map((item, index) => {
              return (
                <Option index={index} value={item.id} key={item.id}>
                  {item.name}
                </Option>
              );
            })}
          </Select>
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">
            保存
          </Button>
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default GoodsbomFrom;
