import React from 'react';
import { Form, Select } from 'antd';
const FormItem = Form.Item;
const { Option } = Select;

class LineConfigForm extends React.Component {

	constructor(props) {
		super(props);
		this.state = {
		}
	}

	render() {
        const columns = [
			{ value: 'c1', label: '列1' },
			{ value: 'c2', label: '列2' },
			{ value: 'c3', label: '列3' },
			{ value: 'c4', label: '列4' },
			{ value: 'c5', label: '列5' },
        ];
        let targetColumn = ['c3'];
		const { getFieldDecorator, getFieldsError, getFieldError, isFieldTouched } = this.props.form;
		const formItemLayout = {
			labelCol: { span: 10 },
			wrapperCol: { span: 14 },
        };
        
		return (
            <Form layout='horizontal'>
				<FormItem label='横轴' {...formItemLayout}>
					{getFieldDecorator('xAxis', {
						initialValue : targetColumn
					})(
						<Select mode='multiple'>
							{columns.map((c, i)=>{
								return (<Option key={`xaxis-${i}`} value={c.value}>{c.label}</Option>)
							})}
						</Select>
					)}
				</FormItem>
                <FormItem label='纵轴' {...formItemLayout}>
					{getFieldDecorator('yAxis', {
						initialValue : targetColumn
					})(
						<Select mode='multiple'>
							{columns.map((c, i)=>{
								return (<Option key={`yaxis-${i}`} value={c.value}>{c.label}</Option>)
							})}
						</Select>
					)}
				</FormItem>
			</Form>
        );
	}
}
export default Form.create()(LineConfigForm);