import React, { useState, useRef, useEffect } from 'react';
import { Input, Select, InputNumber, message, Switch, 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 From = (props) => {
    const handleChange = (e, id, goddteid) => {
        console.log("id", id);
        console.log("props.optiondata", props.optiondata);
        console.log("props.fromdata", props.fromdata);
        props.fromdata.forEach(v => {
            if (goddteid) {
                if (v.id == goddteid) {
                    v.optiondata.forEach(x => {
                        if (x.technologyactionId == id) {
                            console.log("e.target.value", e.target.value)
                            x.actionValue = e.target.value
                        }
                    })
                }
            } else {
                console.log("进来了")
                console.log(props.index)
                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
                    }
                })
               
            }
        })
        console.log(props.fromdata)
        props.onSaveClick(props.fromdata)
    }
    const handlenumChange = (e, id, goddteid) => {
        // console.log("id", id);
        // console.log("goddteid", goddteid);
        // console.log("props.optiondata", props.optiondata);
        // console.log("props.propsdata", props.propsdata);
        // console.log("props.fromdata", props.fromdata);
        props.fromdata.forEach(v => {
            if (goddteid) {
                if (v.id == goddteid) {
                    v.optiondata.forEach((x) => {
                        if (x.technologyactionId == id) {
                            console.log("e.target.value", e)
                            x.actionValue = e
                        }
                    })
                }
            } else {
                v.optiondata.forEach((x,i) => {
                    if (x.technologyactionId == id &&  v.index==props.index) {
                        console.log("e.target.value", e)
                        x.actionValue = e
                    }
                })
            }


        })
        console.log(props.fromdata)
        props.onSaveClick(props.fromdata)

    }
    const handleselectChange = (e, id, goddteid) => {
        console.log(e)
        console.log(id)
        props.optiondata.forEach(x => {
            if (x.technologyactionId == id) {
                x.actionValue = e.label
            }
        })
        props.onSaveClick(props.fromdata)
        //console.log(props.optiondata)
    }
    return (
        <div>
            {
                props.propsdata.length > 0 ?
                    props.propsdata.map((x, index) => {
                        let value=props.optiondata.find(p=>p.id==x.technologyactionId && p.actionName==x.actionName).actionValue;
                        if (x.actionType == "text") {
                            return <>
                                <div className={style['formlable']} style={{ display: 'block', float: 'left', backgroundColor: '#dcf4ff',marginBottom:5 }}>{x.actionName}</div>
                                <div style={{ display: 'block', float: 'left',marginBottom:5 }}><Input key={x.id} defaultValue={value} style={{ width: 240 }} onChange={(value) => { handleChange(value, x.id, x.goddteid) }} /></div>
                            </>
                        }
                        if (x.actionType == "digit") {
                            return <>
                                <div className={style['formlable']} style={{ display: 'block', float: 'left', backgroundColor: '#dcf4ff',marginBottom:5 }}>{x.actionName}</div>
                                <div style={{ display: 'block', float: 'left',marginBottom:5 }}><InputNumber key={x.id} defaultValue={value} style={{ width: 240 }} onChange={(value) => { handlenumChange(value, x.id, x.goddteid) }} /></div>
                            </>
                        }
                        if (x.actionType == "textarea") {
                            return <>
                                <div className={style['formlable']} style={{ display: 'block', float: 'left', backgroundColor: '#dcf4ff',marginBottom:5 }}>{x.actionName}</div>
                                <div style={{ display: 'block', float: 'left',marginBottom:5 }}><TextArea key={x.id} defaultValue={value} style={{ width: 240}} onChange={(value) => { handleChange(value, x.id, x.goddteid) }} /></div>
                            </>
                        }
                        if (x.actionType == "switch") {
                            return <>
                                <div className={style['formlable']} style={{ display: 'block', float: 'left', backgroundColor: '#dcf4ff',marginBottom:5 }}>{x.actionName}</div>
                                <div style={{ display: 'block', float: 'left',marginBottom:5 }}><Switch key={x.id} defaultValue={value} onChange={(value) => { handleChange(value, x.id, x.goddteid) }} /></div>
                            </>
                        }
                        if (x.actionType == "select") {
                            var va = []
                            if (x.actionValue && x.actionValue.length > 0) {
                                va = JSON.parse(x.actionValue);
                            }
                            var op = va.map((p, index) => {
                                return { value: index, label: p.actionValueName }
                            })
                            return <>
                                <div className={style['formlable']} style={{ display: 'block', float: 'left', backgroundColor: '#dcf4ff',marginBottom:5 }}>{x.actionName}</div>
                                <div style={{ display: 'block', float: 'left',marginBottom:5 }}><Select key={x.id} defaultValue={value} labelInValue options={op} style={{ width: 240 }} onChange={(value) => { handleselectChange(value, x.id, x.goddteid) }} /></div>
                            </>
                            
                        }
                       
                    }) : ""
            }
        </div>
    )
}
export default From;