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 '../components/From'
import FromBatch from '../components/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.technologyattralldata)
        console.log("props.fromdata",props.goodstechnologydata)
        if(props.fromdata.length==0){
            setfromdata([])
        }else{
            if(props.UpdataStatus=="update"){
                props.fromdata.forEach(x=>{
                    x.index=x.sort
                })
                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{
            let so=sort;
            console.log("fromdata",fromdata)
            setsort(sort+1)
            let data = [...fromdata]
            let index = fromdata.length
            if(fromdata.length==0){
                so=1;
            }else{
                var max = fromdata.reduce(function (prev, current) {
                    return (prev.sort > current.sort) ? prev : current;
                  });
                  console.log("最大序号：", max.sort)
                  so=max.sort+1;
            }
            data.push({ index: index+1, id: '', stepName: '', chnologyId: '', actionJson: '', sort: so, 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(index)
        var sd = props.technologyattralldata.filter(x => x.technologyId == 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,index) => {
                   // p.goddteid=x.id
                    opdata.push({actionName:p.actionName,actionValue:'',technologyactionId:p.id,index:index})
                });
                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: '108px' }} 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: '360px'}}>
                                    {
                                        x.isBatch ?
                                            <From propsdata={x.propsdata} fromdata={fromdata} onSaveClick={onSaveClick}  optiondata={x.optiondata} index={x.index} />
                                            : <FromBatch batchingdata={props.batchingdata} typeName={x.typeName} modalVisible={true} optiondata={x.optiondata} onSaveClick={onSaveClick} index={x.index} fromdata={fromdata}/>
                                    }
                                </div>

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