import React from 'react';
import { Form, Select, Checkbox } from 'antd';
const FormItem = Form.Item;
const { Option } = Select;
const CheckboxGroup = Checkbox.Group;
import { connect } from 'dva';
import chartDesigner from '../../../models/chartDesigner';

class AggregateTableConfigForm extends React.Component {
	render() {
		const props = this.props;
        const columns = props.chartDesigner.columns;
        
        const statisticsOptions = [
            { value: 'count', label: '条数', checked: true }, 
            { value: 'max', label: '最大值', checked: true },
            { value: 'percentage', label: '百分比', checked: true },
            { value: '75th', label: '75th值', checked: true },
            { value: 'sum', label: '总和', checked: true },
            { value: 'median', label: '中位数', checked: false },
            { value: 'avg', label: '平均数', checked: true },
            { value: '25th', label: '25th值', checked: true },
            { value: 'std', label: '标准差', checked: true },
            { value: 'min', label: '最小值', checked: true }
        ];

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

		const { formItemLayout } = props
        
		return (
			<Form>
				<FormItem label='分析目标' {...formItemLayout}>
					<Select
						value={props.chartDesigner.aggregateTable.targetColumn}
						mode='multiple'
						labelInValue={true}
						onChange={(value) => {
							props.dispatch({ type: 'chartDesigner/aggregateTable/setTargetColumn', targetColumn: value});
						}}
					>
						{columns.map((c, i)=>{
							return (<Option key={i} value={c.name}>{c.label}</Option>)
						})}
					</Select>
				</FormItem>
				<FormItem label='显示总体数据' {...formItemLayout}>
					<CheckboxGroup
						value={props.chartDesigner.aggregateTable.statistics}
						options={statisticsOptions.map((s)=>{return s.label})}
						onChange={(value) => {
							props.dispatch({ type: 'chartDesigner/aggregateTable/setStatistics', statistics: value});
						}}
					/>
				</FormItem>
			</Form>
		);
	}
}

function mapStateToProps({ present: { chartDesigner } }) {
    return { chartDesigner: chartDesigner }
}

export default Form.create()(connect(mapStateToProps)(AggregateTableConfigForm));