import React from 'react';
import { Form, Icon, Input, Button, Select, Switch, Checkbox, InputNumber  } from 'antd';
const FormItem = Form.Item;
const { Option } = Select;
const CheckboxGroup = Checkbox.Group;

class DataViewConfigForm extends React.Component {

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

	componentDidMount() {
		// To disabled submit button at the beginning.
		this.props.form.validateFields();
    }
    
    onChange(checkedList) {
        console.log(checkedList);
    }

	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'];

        let rows = 3;

        let sort = 'asc';

        const gaugeOptions = [
            { value: 'z-score', label: '偏差值', checked: true }
        ];

        let filterFunc = function(option) {
            return option.checked == true;
        }
		
		const { getFieldDecorator, getFieldsError, getFieldError, isFieldTouched } = this.props.form;

		const formItemLayout = {
			labelCol: { span: 10 },
			wrapperCol: { span: 14 },
        };
        
		return (
            <Form layout='horizontal'>
				<FormItem label='分析目标' {...formItemLayout}>
					{getFieldDecorator('targetColumn', {
						rules: [{ required: true, message: '分析目标不能为空' }],
						initialValue : targetColumn
					})(
						<Select mode='multiple'>
							{columns.map((c, i)=>{
								return (<Option key={`c-${i}`} value={c.value}>{c.label}</Option>)
							})}
						</Select>
					)}
				</FormItem>
				{/* <FormItem label='横轴' {...formItemLayout}>
					{getFieldDecorator('x', {
						initialValue : targetColumn
					})(
						<Select mode='multiple'>
							{columns.map((c, i)=>{
								return (<SelectOption key={`x-${i}`} value={c.value}>{c.label}</SelectOption>)
							})}
						</Select>
					)}
				</FormItem>
                    <FormItem label='纵轴' {...formItemLayout}>
                    {getFieldDecorator('y', {
                            initialValue : targetColumn
                    })(
                        <Select mode='multiple'>
                            {columns.map((c, i)=>{
                                return (<SelectOption key={`y-${i}`} value={c.value}>{c.label}</SelectOption>)
                            })}
                        </Select>
                    )}
				</FormItem> */}
			</Form>
        );
	}
}

export default Form.create()(DataViewConfigForm);