import React, { useState,useRef,useEffect } from 'react';
import { PlusOutlined} from '@ant-design/icons';
import { Modal, Form, Input, Button, Select,Divider,Space,message} from 'antd';
import { GetByidBomList,AddBomType } from '../service';
const UpdateBom = (props) => {
  const { Option, OptGroup } = Select;
  const [form] = Form.useForm();
  const [typename, settypename] = useState('');
  const inputRef = useRef(null);
  useEffect(() => {
    if(props.BomId){
        GetByidBomList(props.BomId).then((t)=>{
            var data=t.data
            form.setFieldsValue({
                bomName:data.name,
                bomTypeList:data.bomTypeIds,
                bomType:data.isMain?'1':'0'
            })
        })
    }
    
  })
  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(form)
  }
  return (
    <Modal
      title={'编辑配方'}
      width={640}
      visible={props.UpdateBomVisible}
      bodyStyle={{ padding: '32px 40px 1px 48px' }}
      okText="确认"
      cancelText="取消"
      onOk={headleOk}
      onCancel={() => {
        props.onUpdateBomCancel();
      }}
      maskClosable={false}
      destroyOnClose
    >
      <Form labelCol={{ span: 4 }} layout="horizontal" form={form} preserve={false}>
     
      <Form.Item name="bomName" label="配方名称" rules={[{ required: true, message: '配方名称' }]}>
        <Input  placeholder="请输入配方名称"/>
      </Form.Item>
        <Form.Item name="bomTypeList" rules={[{ required: true, message: '配方分类' }]} 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.Item name="bomType" label="配方类型" initialValue='1' rules={[{ required: true, message: '配方类型' }]}>
          <Select
            placeholder="请选配方类型"
            onChange={(value) => {
              form.setFieldsValue({
                bomType:value
              });
            }}
          >
            <OptGroup>
              <Select.Option value="1">主料配方</Select.Option>
              <Select.Option value="0">辅料配方</Select.Option>
            </OptGroup>
          </Select>
        </Form.Item>
        
      </Form>
    </Modal>
  );
};

export default UpdateBom;
