import React from "react";
import { Col, Row } from "antd";
import { WeaInput, WeaSelect } from "ecCom";

export default class CustomForm extends React.Component {
  handleChange(params) {
    let request = { ...this.props.request, ...params };
    this.props.onChange(request);
  }

  render() {
    const { request, disable } = this.props;
    return (
      <div className="customFLWrapper">
        {
          this.props.condition.map(item => {
            let disabledValue = disable && disable.indexOf(item.domkey[0]) >= 0;
            return (
              <Row style={{ lineHeight: "40px" }}>
                <Col span={6}>
                  {item.label}:
                </Col>
                <Col span={18}>
                  {
                    item.conditionType === "INPUT" &&
                    <WeaInput viewAttr={item.rules === "required" ? 3 : 2} value={request[item.domkey[0]]}
                              disabled={disabledValue} onChange={(value) => {
                      this.handleChange({ [item.domkey[0]]: value });
                    }}/>
                  }

                  {
                    item.conditionType === "RADIO" && item.options &&
                    <WeaSelect
                      detailtype={3} value={request[item.domkey[0]]}
                      disabled={disabledValue}
                      viewAttr={item.rules === "required" ? 3 : 2}
                      onChange={(value) => this.handleChange({ [item.domkey[0]]: value })}
                      options={item.options.map(o => ({ showname: o.showname, key: o.key }))}
                    />
                  }

                  {
                    item.conditionType === "CHECKBOX" &&
                    item.options &&
                    <WeaSelect
                      detailtype={2}
                      // disabled={disabledValue}
                      viewAttr={item.rules === "required" ? 3 : 2}
                      value={request[item.domkey[0]]}
                      options={item.options.map(o => ({ showname: o.showname, key: o.key }))}
                      onChange={(value) => this.handleChange({ [item.domkey[0]]: value })}/>
                  }
                </Col>
              </Row>
            );
          })
        }
      </div>
    );
  }
}