/**
 * 总体统计数据表
 */
import React from 'react';
import { Form, Select, Checkbox, Row, Col } from 'antd';
import { connect } from 'dva';
import STATISTICS_OPTION from './statisticsOption.json'
const FormItem = Form.Item;
const { Option } = Select;
const CheckboxGroup = Checkbox.Group;

class AggregateTableConfigForm extends React.Component {

	constructor(props) {
		super(props);
		this.state = {
			formItemLayout: {
                labelCol: { span: 8 },
                wrapperCol: { span: 16 },
            },
			searchKey: '',
		};
		
	}

	handleSearch = (value) => {
		this.setState({
			searchKey: value
		});
	}
	render() {
		const props = this.props;
		const { autoRefresh, chartDesigner, dispatch } = props;
		const{ searchKey, formItemLayout } = this.state;
		const { columns, aggregateTableConfig } = chartDesigner;
		
		let options = columns.filter(c => c.label.toLowerCase().indexOf(searchKey.toLowerCase()) !== -1);
		return (
			<Form>
				<FormItem label='分析目标' {...formItemLayout}>
					<Select
						value={aggregateTableConfig.targetColumn.name}
						dropdownMatchSelectWidth={false}
						showSearch
						filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
						onChange={(value) => {
							let column = columns.filter(c => c.name === value)[0];
							dispatch({ type: 'chartDesigner/changeField', name: 'aggregateTableConfig', value: { ...chartDesigner.aggregateTableConfig, targetColumn: column, statistics: [] }, autoRefresh });
						}}
					>
						{options.map((c, i)=>{
							return (<Option key={i} value={c.name}>{c.label}</Option>)
						})}
					</Select>
				</FormItem>
				<FormItem label='显示总体数据' {...formItemLayout}>
					<CheckboxGroup
						className='checkbox-group-statistics'
						value={aggregateTableConfig.statistics}
						onChange={(value) => {
							dispatch({ type: 'chartDesigner/changeField', name: 'aggregateTableConfig', value: { ...props.chartDesigner.aggregateTableConfig, statistics: value }, autoRefresh });
						}}
					>
						<Row>
							{STATISTICS_OPTION.map((s)=>{return <Col span={12} key={s.value}><Checkbox disabled={s.columnType.indexOf(aggregateTableConfig.targetColumn.type) === -1} value={s.value}>{s.label}</Checkbox></Col>})}
						</Row>
						
					</CheckboxGroup>
				</FormItem>
				<FormItem label='分组' {...formItemLayout}>
					<Select
						mode='multiple'
						labelInValue={true}
						dropdownMatchSelectWidth={false}
						placeholder='请选择...'
						allowClear={true}
						showSearch
						filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
						onChange={(values) => {
							const groupBy = [];
							values.forEach(value => {
								const column = value.key ? columns.find(c => c.name === value.key) : null;
								const g = column ? { ...value, type: column.type } : undefined;
								groupBy.push(g);
							});
							
							dispatch({ type: 'chartDesigner/changeField', name: 'aggregateTableConfig', value: { ...props.chartDesigner.aggregateTableConfig, groupBy }, autoRefresh });
						}}
						value={chartDesigner.aggregateTableConfig.groupBy}
					>
						{columns.filter(c => c.groupable).map((c, i)=>{
							return (<Option key={i} value={c.name}>{c.label}</Option>)
						})}
					</Select>
				</FormItem>
			</Form>
		);
	}
}

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

export default connect(mapStateToProps)(AggregateTableConfigForm);