/**
 * 总体统计数据表
 */
import React from 'react';
import { Form, Select, Checkbox, Row, Col, Tooltip, message } 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.map(s => s.name || s)}
						onChange={(value) => {
							let statistics = value.map(v => {
								let f = STATISTICS_OPTION.find(s => s.value === v);
								return {
									name: f.value,
									label: f.label
								}
							});
							dispatch({ type: 'chartDesigner/changeField', name: 'aggregateTableConfig', value: { ...props.chartDesigner.aggregateTableConfig, statistics }, autoRefresh });
						}}
					>
						<Row>
							{
								STATISTICS_OPTION.map((s)=>{
									let inGroupDisabled = s.value === 'dictinctCount' && aggregateTableConfig.groupBy.length > 0;
									let disabled = s.columnType.indexOf(aggregateTableConfig.targetColumn.type) === -1 ||
									(inGroupDisabled)
									return <Tooltip title={inGroupDisabled ? '存在分组时[条数]即为[去重条数]' : ''} key={s.value}><Col span={12} key={s.value}>
										<Checkbox disabled={disabled}
											value={s.value}
										>
											{s.label}
										</Checkbox>
									</Col></Tooltip>
								})
							}
						</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 = [];
							if(values.length > 2) {
								message.warning('最多支持选择2个分组');
								return false;
							}
							let statisticsArr = chartDesigner.aggregateTableConfig.statistics.filter(s => s.name !== 'dictinctCount');
							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, statistics: statisticsArr }, 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({ chartDesigner }) {
    return { chartDesigner: chartDesigner }
}

export default connect(mapStateToProps)(AggregateTableConfigForm);