import React, { useState, useRef, useEffect } from 'react';
import { Input ,Button, Modal } from 'antd';
import ProTable from '@ant-design/pro-table';
const { TextArea } = Input;
import style from '../style.less'
import { useFetchData } from '@ant-design/pro-utils';
const FromBatch = (props) => {
    const [modalVisible, setmodalVisible] = useState(false)
    const [selectedRowsState, setSelectedRows] = useState([]);
    const [selectedRowKeys, setselectedRowKeys] = useState([])
    const actionRef = useRef();
    const tablecolumns = [
        {
            title: '主键',
            dataIndex: 'id',
            tip: '规则名称是唯一的 key',
            hideInSearch: true,
            hideInTable: true,
            render: (dom, entity) => {
                return (
                    <a
                        onClick={() => {
                            // setCurrentRow(entity);
                            // setShowDetail(true);
                        }}
                    >
                        {dom}
                    </a>
                );
            },
        },
        {
            title: '名称',
            dataIndex: 'name',
            valueType: 'textarea',
            ellipsis: true,
            search: false,
        },
    ]
    useEffect(() => {
        //setmodalVisible(props.modalVisible)
        console.log("液态料",props.optiondata)
        if(props.fromdata[0].optiondata.length>0){
            let df=[]
            props.fromdata[0].optiondata.forEach(x=>{
                df.push({id:x.technologyactionId,name:x.actionName})
            })
            setselectedRowKeys(df.map(x=>{return x.id}))
            setSelectedRows(df)
        }
        setSelectedRows([])
        setselectedRowKeys([])
    },[props.modalVisible])
    const handleChange=(e,id)=>{
        console.log("id",id)
        console.log("props.optiondata",props.optiondata)
        console.log("props.fromdata",props.fromdata)
        props.fromdata.forEach(v=>{
            v.optiondata.forEach(x=>{
                if(x.technologyactionId==id &&  v.index==props.index){
                    console.log("e.target.value",e.target.value)
                    x.actionValue=e.target.value
                }
            })
        })
        // props.fromdata[0].optiondata.forEach(x=>{
        //     if(x.technologyactionId==id){
        //         console.log("e.target.value",e.target.value)
        //         x.actionValue=e.target.value
        //     }
        // })
        console.log(props.fromdata)
        props.onSaveClick(props.fromdata)
        
    }
    const onAddClick=()=>{
        setmodalVisible(true)
    }
    return (
        <div>
            {
                props.optiondata.length>0?
                props.optiondata.map((x,index)=>{
                    return <>
                             <div className={style['formlable']} style={{ display: 'block', float: 'left' }}>{x.actionName}</div>
                             <div style={{ display: 'block', float: 'left' }}><Input key={x.technologyactionId} defaultValue={x.actionValue}  style={{width:240}} onChange={(value)=>{handleChange(value,x.technologyactionId)}}/></div>
                        </>
                    
                 }):""
            }
             <Button type="dashed" style={{width:100,marginLeft:140,marginTop:10}} block onClick={onAddClick}>添加</Button>
           <Modal
                title={'物料列表'}
                width={640}
                visible={modalVisible}
                bodyStyle={{ padding: '32px 40px 1px 48px' }}
                focusTriggerAfterClose={false}
                onCancel={() => {
                    setmodalVisible(false)
                    setSelectedRows([])
                }}
                onOk={() => {
                   
                    setmodalVisible(false)
                }}
                // destroyOnClose
                maskClosable={false}
            >
                <ProTable
                    headerTitle="物料列表"
                    rowKey="id"
                    actionRef={actionRef}
                    search={{
                        labelWidth: 120,
                    }}
                    columns={tablecolumns}
                    request={(params) => {
                        let name = '';
                        let ajs = [];
                        // if (!technologyname) {
                        //     name = props.technologyattrdata.attributes[0].name;
                        //     const keys = Object.keys(props.technologyattrdata.attributes[0]);
                        //     var sd = keys.filter(x => x !== "chnologyId" && x !== "id" && x !== "sort" && x !== "name");
                        //     sd.map(x => {
                        //         var va = x.replace("actionvalue-", "").split(':')
                        //         ajs.push({ id: va[0], name: va[1] });
                        //     })

                        // } else {
                        //     name = technologyname;
                        // }
                        // console.log("已选中的数据：", ajs)
                        var dataSource = props.batchingdata.filter(x => x.typeName == props.typeName)
                        if (ajs.length > 0) {
                            setSelectedRows(ajs);
                            setselectedRowKeys(ajs.map(x => { return x.id }))
                        }

                        return {
                            data: dataSource,
                            success: true,
                            total: dataSource.length,
                        };
                    }}
                    // 每行选择点击事件
                    rowSelection={{
                        selectedRowKeys,
                        onSelect: (record, selected) => {
                            const tempArray = [...selectedRowKeys];
                            const tempArray1 = [];
                            const findIndex = tempArray.findIndex(item => item === record.id);
                            if (selected) {
                                findIndex < 0 && tempArray.push(record.id);
                                tempArray1.push({ id: record.id, name: record.name })
                            } else {
                                findIndex > -1 && tempArray.splice(findIndex, 1);
                            }
                            setselectedRowKeys(tempArray);
                        },
                        onSelectAll: (selected, selectedRows, changeRows) => {
                            const tempArray = [...selectedRowKeys];
                            if (selected) {
                                selectedRows.forEach(item => {
                                    if (!item) return;
                                    const findIndex = tempArray.findIndex(fItem => fItem === item.id);
                                    if (findIndex < 0) {
                                        tempArray.push(item.id);
                                    }
                                });
                            } else {
                                changeRows.forEach(item => {
                                    const findIndex = tempArray.findIndex(fItem => fItem === item.id);
                                    if (findIndex > -1) {
                                        tempArray.splice(findIndex, 1);
                                    }
                                });
                            }
                            setselectedRowKeys(tempArray);
                        },
                        onChange: (_, selectedRows) => {
                            selectedRows.forEach(x=>{
                                if(props.optiondata.findIndex(y=>y.technologyactionId==x.id)==-1){
                                    props.optiondata.push({actionName:x.name,actionValue:'',technologyactionId:x.id})
                                }
                            })
                           
                            setSelectedRows(selectedRows);
                        },
                    }}
                ></ProTable>
            </Modal>
        </div>
    )
}
export default FromBatch;