import React, { useState, useEffect, useRef } from 'react';
import { Modal, Form, Input, Button, Select, Switch, InputNumbe, Divider, Space } from 'antd';
import { PlusOutlined } from '@ant-design/icons';

const UpdateBom = (props) => {
    const { Option, OptGroup } = Select;
    const [typename, settypename] = useState('');
    const inputRef = useRef(null);


    const onNameChange = (event) => {
        settypename(event.target.value);
    }

    const addItem = (e) => {
        e.preventDefault();

        if (typename == 0) {
            message.error("请输入名称");
        } else {
            var parm = { name: typename }
            AddBomType(parm).then((r) => {
                if (r.succeeded) {
                    message.success('添加成功');
                    props.initTypeList();
                    settypename('');
                } else {
                    message.error(r.errors);
                }
            })
        }

    }

    const headleOk = () => {
        props.onUpdateBomSave()
    }


    return (
        <Modal
            title={'编辑'}
            width={640}
            visible={props.updateModalVisible}
            bodyStyle={{ padding: '32px 40px 48px' }}
            onCancel={() => {
                props.onCancel();
            }}
            onOk={headleOk}
            destroyOnClose
        >
            <Form
                layout="vertical"
                preserve={false}
                form={props.form}
               // initialValues={props.values}
                onFinish={props.onFinish}
            >
                <Form.Item name="id" hidden={true}>
                    <Input />
                </Form.Item>
                <Form.Item name="name" label="配方名称" >
                    <Input placeholder="配方名称" />
                </Form.Item>
                <Form.Item name="bomTypeList" label="配方分类" >
                    <Select
                        style={{ width: '100%' }}
                        mode="tags"
                        placeholder="请选配方分类"
                        options={props.bomTypeData}
                        dropdownRender={(menu) => (
                            <>
                                {menu}
                                <Divider style={{ margin: '8px 0' }} />
                                <Space style={{ padding: '0 8px 4px' }}>
                                    <Input
                                        placeholder="请输入配方分类"
                                        ref={inputRef}
                                        value={typename}
                                        onChange={onNameChange}
                                        onKeyDown={(e) => e.stopPropagation()}
                                    />
                                    <Button type="text" icon={<PlusOutlined />} onClick={addItem}>
                                        新增
                                    </Button>
                                </Space>
                            </>
                        )}
                    />
                </Form.Item>
            </Form>
        </Modal>
    );
};

export default UpdateBom;
