import React from 'react';
import { Form, Select, Checkbox } from 'antd';
import { connect } from 'dva';
import XAxisItem from './xAxisItem';
import YAxisItem from './yAxisItem';
import DrillList from './drillList';
import GRANULARITY from './granularity.json';
const FormItem = Form.Item;
const { Option } = Select;
const formItemLayout = {
	labelCol: { span: 8 },
	wrapperCol: { span: 16 },
};
const LineConfigForm = ({ autoRefresh, chartDesigner, dispatch }) => {
	const { columns, baseConfig, lineConfig } = chartDesigner;

	return (
		<Form hideRequiredMark={true}>
			<FormItem label='横轴' {...formItemLayout}>
				<XAxisItem value={lineConfig.xAxis} options={columns.filter(c =>['time'].indexOf(c.type) > -1)}
					onChange={({ column, granularity }) => {
						dispatch({ type: 'chartDesigner/changeField', name: 'lineConfig', value: {
							...lineConfig,
							xAxis: { column, granularity },
							drillable: false,
							drillList: [{ column, granularity }] 
						}, autoRefresh });
					}}
				/>
			</FormItem>
			<FormItem label='纵轴' {...formItemLayout}>
				<YAxisItem value={lineConfig.yAxis} options={columns} gaugeType={baseConfig.viewType} onChange={({ column, gauge }) => {
					dispatch({ type: 'chartDesigner/changeField', name: 'lineConfig', value: { ...lineConfig, yAxis: { column, gauge } }, autoRefresh });
				}}/>
			</FormItem>
			<FormItem label='分组' {...formItemLayout}>
				<Select
					maxTagCount={1}
					labelInValue={true}
					allowClear={true}
					showSearch
					filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
					placeholder='请选择...'
					onChange={(value) => {
						const column = value ? columns.find(c => c.name === value.key) : null;
						const groupBy = column ? { ...value, type: column.type } : undefined;
						dispatch({ type: 'chartDesigner/changeField', name: 'lineConfig', value: { ...chartDesigner.lineConfig, groupBy }, autoRefresh });
					}}
					value={chartDesigner.lineConfig.groupBy}
				>
					{columns.filter(c => c.groupable).map((c, i)=>{
						return (<Option key={i} value={c.name}>{c.label}</Option>)
					})}
				</Select>
			</FormItem>
			{lineConfig.xAxis.column.value && <FormItem label='钻取' {...formItemLayout}>
				<Checkbox
					checked={!!lineConfig.drillable}
					onChange={e => {
						let checked = e.target.checked;
						let drillList = [{ column: lineConfig.xAxis.column, granularity: lineConfig.xAxis.granularity }];
						if(lineConfig.xAxis.column.type === 'time') { // 如果x轴字段是时间类型，自动生成其维度钻取层级
							const granularitys = GRANULARITY['time'];
							let idx = granularitys.findIndex(g => g.value === lineConfig.xAxis.granularity.value);
							for(let i = idx + 1; i < granularitys.length; i++) {
								drillList.push({
									column: lineConfig.xAxis.column,
									granularity: granularitys[i]
								});
							}
						}
						dispatch({ type: 'chartDesigner/changeField', name: 'lineConfig', value: { ...lineConfig, drillable: checked, drillList }, autoRefresh });
					}}
				/>
			</FormItem>}
			{lineConfig.xAxis.column.value && lineConfig.drillable && <FormItem label='钻取层级' {...formItemLayout}>
				<DrillList
					// 可选钻取字段包括时间、类别类型，且当x轴选择的是时间类型时允许重复作为钻取字段（之后会限制年月周等维度的选择）
					list={columns.filter(c => ['time'].indexOf(c.type) > -1)}
					value={lineConfig.drillList || []}
					onChange={list => {
						dispatch({ type: 'chartDesigner/changeField', name: 'lineConfig', value: { ...lineConfig, drillList: list }, autoRefresh });
					}}
				/>
			</FormItem>}
		</Form>
	);
}

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

export default connect(mapStateToProps)(LineConfigForm);