import React from 'react'
import { Checkbox, Radio, Row, Col } from "antd"
import { WeaInput } from "ecCom"
const CheckboxGroup = Checkbox.Group;

export default class CustomForm extends React.Component {
    

    handleChange(params) {
        let request = {...this.props.request, ...params}
        this.props.onChange(request);
    }

    render() {
        const { request } = this.props;
        return (
            <div style={{padding: "20px"}}>
                {
                    this.props.condition.map(item => {
                        return (
                            <Row style={{lineHeight: "40px"}}>
                                <Col span={6}>
                                    {item.label} : 
                                </Col>
                                <Col span={18}>
                                    {
                                        item.conditionType == "INPUT" &&
                                        <WeaInput value={request[item.domkey[0]]} onChange={(value) => {this.handleChange({[item.domkey[0]]: value})}}/>
                                    }

                                    {
                                        item.conditionType == "RADIO" && item.options &&
                                        <Radio.Group onChange={(e) => this.handleChange({[item.domkey[0]]: e.target.value})}>
                                            {
                                                item.options.map(o => (
                                                    <Radio value={o.key}>{o.showname}</Radio>
                                                ))
                                            }
                                        </Radio.Group>
                                    }

                                    {
                                        item.conditionType == "CHECKBOX" && 
                                        item.options && 
                                        <CheckboxGroup options={item.options.map(o => ({label: o.showname, value: o.key}))} onChange={(value) => this.handleChange({[item.domkey[0]]: value}) }/>
                                    }
                                </Col>
                            </Row>
                        )
                    })
                }
                
            </div>
        )
    }
}