/**
 * Created by baoyinghai on 5/31/17.
 */
import React from 'react';
import { Form, Input, Col, Row, Radio, Select } from '../../../../components/mxa';
const RadioGroup = Radio.Group;
const FormItem = Form.Item;
const Option = Select.Option;

class SettingForm extends React.Component {

  static defaultProps = {
    getKeys: keys => keys,
    setFormItems: (key, oldValue={}) => {
      return {
        key,
        label: key,
        comp: <Input />,
        initData: oldValue[key]
      };
    }
  };

  state = {
    methodType: 1
  };

  constructor(props) {
    super(props);
  };

  renderItem = (keys, configFunc, oldValue) => {
    const formItemLayout = {
      labelCol: 22,
      wrapperCol: 22
    };
    const { getFieldDecorator } = this.props.form;
    return keys.map(key => {
      return configFunc(key, oldValue);
    }).map(({label, key, initData, comp}) => {
      return (
        <Col span={22}>
          <FormItem
            key={key}
            {...formItemLayout}
            label={label}
          >
            {
              getFieldDecorator(key, {
                rules: [{ required: true, message: '请输入列' + label + '的描述' }],
                initialValue: initData
              })(comp)
            }
          </FormItem>
        </Col>
      );
    });
  };

  triggerAction = () => {
    const { onClick, submit, form } = this.props;
    form.validateFieldsAndScroll({ force: true }, (err, value) => {
      if (!err) {
        submit && submit(value);
        onClick && onClick();
      }
    });
  };

  renderButtons = () => {
    return [(
      <a key="cancel" onClick={this.props.onClick} className="cancel-btn">取消</a>
    ),
      (
        <div key="submit" onClick={this.triggerAction} className={'common-btn'} >
          <a>确定</a>
        </div>
      )];
  };

  componentDidMount() {
    const { createBottomButtons } = this.props;
    createBottomButtons && createBottomButtons(this.renderButtons());
  }

  methodChange = event => {
    const value = event.target.value;
    this.setState({
      methodType: value
    });
  };

  render() {
    const { dataSource } = this.props;
    return (
      <Form horizontal={true} >
        <div className="form-box" >
          <Row className="cell" type="flex" justify="start">
            <section className="detail-sec">
              <span className="anchorTag">新增方式</span>
            </section>
            {this.renderItem(['methodType'], (key, oldValue) => {
              return {
                key,
                label: '数据源设置',
                comp: <RadioGroup onChange={this.methodChange}>
                  <Radio value={1}>现有卡片</Radio>
                  <Radio value={2}>数据源</Radio>
                </RadioGroup>,
                initData: oldValue[key]
              };
            }, {methodType: 1})}
            {(() => {
              if (this.state.methodType === 1) {
                return (
                  <div style={{width: '100%'}}>
                    <section className="detail-sec">
                      <span className="anchorTag">{this.props.title}</span>
                    </section>
                    {this.renderItem(['panelDefinitionId'], (key, oldValue) => {
                      return {
                        key,
                        label: '卡片选择',
                        comp: <Select>
                          {dataSource.map(f => (<Option value={f.panelDefinitionId}>{f.dataDesc}</Option>))}
                        </Select>,
                        initData: oldValue[key]
                      };
                    }, {})}
                  </div>
                );
              } else {
                return (
                  <div style={{width: '100%'}}>
                    <section className="detail-sec">
                      <span className="anchorTag">{this.props.title}</span>
                    </section>
                    {this.renderItem(['panelDefinitionId'], (key, oldValue) => {
                      return {
                        key,
                        label: '数据源设置',
                        comp: <Select>
                          {[{panelDefinitionId: -1, dataDesc: '新增', querySql: ''}, ...dataSource].map(f => (<Option value={f.panelDefinitionId}>{f.dataDesc}</Option>))}
                        </Select>,
                        initData: oldValue[key]
                      };
                    }, {panelDefinitionId: -1})}
                  </div>);
              }
            })()}
          </Row>
        </div>
      </Form>
    );
  }
}

export default Form.create()(SettingForm);