import React, { useState,useRef,useEffect } from 'react';
import { PlusOutlined} from '@ant-design/icons';
import { Modal, Form, Input, Button, Select,Radio,message,Tag,Divider,Space } from 'antd';
import { GetByidBomList } from '../service';
import {
  EditableProTable,
  ProTable
} from '@ant-design/pro-table';
const GoodsbomFrom = (props) => {
  const { Option, OptGroup } = Select;
  const [dataSource, setDataSource] = useState([]);
  const [editableKeys, setEditableRowKeys] = useState([]);
  const [form] = Form.useForm();

  useEffect(() => {
    let soredata=[];
    if(props.BomId){
        GetByidBomList(props.BomId).then((t)=>{
            var data=t.data
            if(data.bomEntry.length>0){
                data.bomEntry.map(x=>{
                    var item={
                        id:x.id,
                        bomId:x.bomId,
                        batchingId:x.batchingId,
                        dosage:x.bomQty
                      }
                      console.log("item",item)
                      soredata.push(item)
                })
            }
            console.log("soredata",soredata)
            if(soredata.length>0){
                setEditableRowKeys(soredata.map((item) => item.id))
                setDataSource(soredata);
            }
        })
    }
   
    
  },[props])
  const columns=[
    {
        title: '主键',
        dataIndex: 'id',
        key: 'id',
        hideInTable: true,
        hideInSearch: true,
        tip: '规则名称是唯一的 key',
      },
      {
        title: '配方',
        dataIndex: 'bomId',
        hideInTable: true,
        hideInSearch: true,
      },
    {
        title: '物料名称',
        dataIndex: 'batchingId',
        formItemProps: (form, { rowIndex }) => {
          return {
            rules:
              rowIndex > 1 ? [{ required: true, message: '此项为必填项' }] : [],
          };
        },
        valueType: 'select',
        fieldProps: {
          showSearch:true,
          options: props.matedata.map((item, index) => {return {label:item.name,value:item.id}})
        },
        width: '25%',
      },
      {
        title: '用量',
        dataIndex: 'dosage',
        valueType:'digit',
        width: '15%',
      },
      {
        title: '操作',
        valueType: 'option',
        width: '15%',
        render: () => {
          return null;
        },
      },
]
  const headleOk=()=>{
    if(dataSource.length==0){
        check=false;
        message.error("请选择物料")
    }else{
        props.onBomBatchingFinish(dataSource);
        setDataSource([])
    }
   
      
  }
  return (
    <Modal
      title={'配方详情'}
      width={1040}
      visible={props.BomBatchingVisible}
      bodyStyle={{ padding: '32px 40px 1px 48px' }}
      okText="确认"
        cancelText="取消"
        onOk={headleOk}
      onCancel={() => {
        props.onBomBatchingCancel();
      }}
      destroyOnClose
    >
        <EditableProTable
        columns={columns}
        rowKey="id"
        value={dataSource}
        onChange={setDataSource}
        recordCreatorProps={{
          newRecordType: 'dataSource',
          record: () => ({
            id: Date.now(),
            bomId:props.BomId
          }),
        }}
   
        editable={{
          type: 'multiple',
          editableKeys,
          actionRender: (row, config, defaultDoms) => {
            return [defaultDoms.delete,defaultDoms.Button];
          },
          onValuesChange: (record, recordList) => {
            setDataSource(recordList);
          },
          onDelete:async (key, row) =>{
            console.log(key)
            console.log(row)
            
          },
          onChange: setEditableRowKeys,
        }}/>
     
    </Modal>
    //vessels
  );
};

export default GoodsbomFrom;
