import {Modal,message } from 'antd';
import React, { useState} from 'react';
import ProTable from '@ant-design/pro-table';
import { GetBOMs } from '../service';
const CreateForm = (props) => {

  const [selectedRowsState, setSelectedRows] = useState([]);
  const [Boms, setBoms] = useState([]);
  const columns = [
    {
      title: '配方id',
      dataIndex: 'id',
      tip: '规则名称是唯一的 key',
      hideInSearch: true,
      hideInTable: true,
    },
    {
      title: '配方名称',
      dataIndex: 'name',
    },
  ];
  return (
    <Modal
      width={700}
      bodyStyle={{ padding: '32px 40px 48px' }}
      destroyOnClose
      title="选择配方"
      visible={props.modalVisible}
      onCancel={() => props.onCancel()}
      onOk={() => {

        if(Boms.length>100){
          message.error('配方必须少于100个');
        }else{
          props.onSubmit(selectedRowsState)
        }
       
      }}
      maskClosable={false}
    >
      <ProTable
        headerTitle="配方信息"
        rowKey="id"
        pagination={{ defaultPageSize: 5000 }}
        search={false}
        toolBarRender={false}
        params={{
          DeviceId:props.values,
        }}
        //数据绑定
        request={async (params) => {
          var Data = [];
          var total = 0;
          params.pertains=[2];
          await GetBOMs(params).then((r) => {
            Data = r.data.data;
            
            total = 1;
          });
          return {
            data: Data,
            success: true,
            total: total,
          };
        }}
        columns={columns}
        rowSelection={{
          onChange: (_, selectedRows) => {setSelectedRows(selectedRows);setBoms(selectedRows);},
        }}
      />
    </Modal>
  );
};

export default CreateForm;
