import React, { useState, useEffect } from 'react';
import { Modal, Form, Input, Button, Select, Space, Card } from 'antd'
import { EditableProTable, ProForm, ProFormText } from '@ant-design/pro-form';
import { DeleteOutlined } from '@ant-design/icons';
import '../index.css'

const BomConsumption = (props) => {

    const copyFormula = (index) => {
        const tempColums = JSON.parse(JSON.stringify(props.values));
        tempColums.push(tempColums[index]);
        props.onUpdateBom(tempColums);
    }

    const deleteFormula = (index) => {
        // if (props.values.length <= 1) return;
        const tempColums = JSON.parse(JSON.stringify(props.values));
        tempColums.splice(index, 1);
        props.onUpdateBom(tempColums);
    }

    const handleOk = () => {
        props.onFinish(props.values);
       // console.log('表单值为', props.values);
    };


    return (

        <Modal
            width={540}
            visible={props.visible}
            bodyStyle={{ padding: '32px 40px 48px' }}
            footer={null}
            onCancel={() => {
                props.onCancel();
            }}
            title="配方用量"
        >
            <div className="formual-form-card">
                {
                    props.values.map((item, index) => {
                        return <div className="formual-form-list" key={index}>
                            <div className="form-list-copy" >
                                <Button onClick={() => copyFormula(index)}>复制一份配方用量</Button>
                                <Button style={{ marginLeft: '10px' }} danger onClick={() => deleteFormula(index)}>删除配方用量</Button>
                            </div>
                            <div className="form-list-item form-list-total">
                                <span className="form-input-label">总量</span>
                                <Input placeholder="请输入总量" value={item.bomWeight} onChange={(e) => {
                                    const tempColums = JSON.parse(JSON.stringify(props.values));
                                    tempColums[index].bomWeight = e.target.value;
                                    props.onUpdateBom(tempColums);
                                }} />
                            </div>
                            {
                                item.bomMaterials.map((itemList, listIndex) => {
                                    return <div className="form-list-detail" key={itemList.id}>
                                        <div className="form-detail-card">
                                            <div className="form-list-item formmual-name">
                                                <span className="form-input-label">名称</span>
                                                <Input placeholder="物料名称" value={itemList.name} onChange={(e) => {
                                                    const tempColums = JSON.parse(JSON.stringify(props.values));
                                                    tempColums[index].bomMaterials[listIndex].name = e.target.value;
                                                    props.onUpdateBom(tempColums);
                                                }} />
                                            </div>
                                            <div className="form-list-item formmual-company">
                                                <span className="form-input-label">数量</span>
                                                <Input placeholder="物料数量" value={itemList.num} onChange={(e) => {
                                                    const tempColums = JSON.parse(JSON.stringify(props.values));
                                                    tempColums[index].bomMaterials[listIndex].num = e.target.value;
                                                    props.onUpdateBom(tempColums);
                                                }} />
                                            </div>
                                            <Button onClick={() => props.onDeleteMate(itemList, index)} type='link' danger icon={<DeleteOutlined />} style={{marginLeft: '10px'}}></Button>
                                        </div>
                                    </div>
                                })
                            }
                        </div>
                    })
                }
            </div>
            <Button type="primary" onClick={handleOk} style={{ float: 'right' }}>
                保存
            </Button>
        </Modal>
    );
};

export default BomConsumption;
