import React, { useState, useRef, useEffect } from 'react';
import { Card, Select, Button, message, Checkbox, Modal } from 'antd';
import { ProCard } from '@ant-design/pro-Card';
import { DeleteOutlined, CloseOutlined } from '@ant-design/icons';
import From from './From'
import FromBatch from './FromBatch'
import { useFetchData } from '@ant-design/pro-utils';
const EditFrom = (props) => {
    const [fromdata, setfromdata] = useState([])
    //const [disabled, setdisabled] = useState(false)
    const [sort, setsort] = useState(1)
    useEffect(() => {
        //setfromdata(props.fromdata)
        //props.fromdata=fromdata
        console.log("增加编辑状态值",props.UpdataStatus)
        console.log("props.fromdata",props.fromdata)
        if(props.fromdata.length==0){
            setfromdata([])
        }else{
            if(props.UpdataStatus=="update"){
                //setdisabled(true);
                // for(let i=0;i<props.fromdata.length;i++){
                //     for(let t=0;t<props.fromdata[i].propsdata.length;t++){
                //         props.fromdata[i].propsdata[t].goddteid=props.fromdata[i].id
                //     }
                //     props.fromdata[i].disabled=true
                // }
                // let gg=props.fromdata.map(x=>{
                //     var sd=x.propsdata.map(d=>{
                //         d.goddteid=x.id
                //         return d
                //     })
                //     x.disabled=true;
                //     x.propsdata=sd;
                //     return x
                // })
                //console.log(gg)
                setfromdata(props.fromdata)
            }
            
        }
    },[props.fromdata])
    //添加工艺步骤
    const onAddClick = (value, option) => {
        //setdisabled(false);
        if(props.devideId=="0"){
            message.error("请选择设备后在新增");
        
        // else if(props.UpdataStatus=="update"){
        //     props.onUpdataStatus("update")
        //     message.error("当前处于编辑状态无法新增，删除当前编辑工艺后在新增");
        }else{
            console.log("fromdata",fromdata)
            setsort(sort+1)
            let data = [...fromdata]
            let index = fromdata.length
            console.log(data)
            data.push({ index: index+1, id: '', stepName: '', chnologyId: '', actionJson: '', sort: sort, goodsId: '', goodsAttributeId: '',optiondata: [], propsdata: [], isBatch: true, typeName: '',disabled:false })
            setfromdata(data)
            props.onUpdataStatus("add")
        }
        
    }
    //删除工艺
    const onDelClick = (val) => {
        console.log(val)
        console.log(fromdata)
        let data = fromdata.filter(x => x.sort != val)
        data.forEach((x,index)=>{
            x.sort=index+1;
        })
        setfromdata(data);
        console.log(data)
        if(data.length==0){
            setsort(1)
        }else{
            setsort(sort-1)
        }
        
        //setdisabled(false);
        props.onUpdataStatus("view")
        props.onSaveClick(data)
    }
    //选择工艺步骤事件
    const onHandleChange = (value, option, index) => {
        console.log(fromdata)
        console.log(props.technologyattralldata)
        console.log(option)
        var sd = props.technologyattralldata.filter(x => x.goodstechnologyId == value);
        var newdata = fromdata.map(x => {
            if (x.index == index) {
               
                if(sd.length>0){
                    x.isBatch = true
                }else{
                    x.isBatch = false
                }
                //x.isBatch = option.isBatch
                x.typeName = option.label
                x.stepName=option.label
                x.chnologyId=option.value
                //x.sort=props.maxsort+1
                var opdata=[]
                sd.forEach(p => {
                   // p.goddteid=x.id
                    opdata.push({actionName:p.actionName,actionValue:'',technologyactionId:p.id})
                });
                x.propsdata = sd;
                x.optiondata=opdata
            }
            return x
        })
        setfromdata(newdata)
        console.log("from", newdata)
    }
    //保存
    const onSaveClick=(fromdata)=>{
        props.onSaveClick(fromdata)
        //setdisabled(false);
    }
    const onClearClick=()=>{
        props.onUpdataStatus("view")
        setfromdata([])
        setsort(1)
        props.onSaveClick([])
    }
    return (
        <div>
            {
                fromdata.length > 0 ?
                    fromdata.map((x, index) => {
                        return (
                            <ProCard boxShadow title={"工序号"+x.sort} bordered bodyStyle={{ padding: 15,display: 'flex'}} headStyle={{ padding: '0px 24px' }} style={{ marginBlockEnd: 8 }} extra={<DeleteOutlined onClick={() => { onDelClick(x.sort) }} />}>
                                <div style={{ float: 'left', width: '20%' }}>
                                    <Select name="chnologyId" key={x.sort} style={{ width: '90px' }} value={x.chnologyId} disabled={x.disabled} options={props.goodstechnologydata} onChange={async (value, option) => { onHandleChange(value, option, x.index) }}></Select>
                                </div>
                                <div style={{ float: 'left',width: '80%'}}>
                                    {
                                        x.isBatch ?
                                            <From propsdata={x.propsdata} fromdata={fromdata} onSaveClick={onSaveClick}  optiondata={x.optiondata} />
                                            : <FromBatch batchingdata={props.batchingdata} typeName={x.typeName} modalVisible={true} optiondata={x.optiondata} onSaveClick={onSaveClick} fromdata={fromdata}/>
                                    }
                                </div>

                            </ProCard>
                        )
                    }) : ""
            }
            <Button type="dashed" block onClick={onAddClick}>添加工艺</Button>
            <Button block onClick={onClearClick}>重置</Button>
            {/* <Button type="dashed" block onClick={onSaveClick}>保存</Button> */}
        </div>
    )
}
export default EditFrom;