import React from 'react'
import { Form, Select, InputNumber, Button } from 'antd'
import { connect } from 'dva'
import DisplayColumnBox from './displayColumnBox'
const FormItem = Form.Item
const { Option } = Select

class DataViewConfigForm extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			showBox: false,
			visibleDisplayColumnBox: false
		}
	}
	
	render() {
		const { autoRefresh, dispatch, chartDesigner, formItemLayout } = this.props;
		return (
            <Form layout='horizontal'>
				<FormItem label="展示列" {...formItemLayout}>
					{/* <Select
						mode='multiple'
						allowClear 
						showArrow={true}
						value={chartDesigner.dataViewConfig.viewColumns}
						showSearch
						labelInValue={true}
						onChange={(value) => {
							dispatch({ type: 'chartDesigner/changeField', name: 'dataViewConfig', value: { ...chartDesigner.dataViewConfig, viewColumns: value }, autoRefresh });
						}}
					>
						{columns.map((c, i)=>{
							return <Option key={i} value={c.name}>{c.label}</Option>
						})}
					</Select> */}
					<Button onClick={() => {this.setState({visibleDisplayColumnBox:true})}}>设置展示列</Button>
				</FormItem>
				<FormItem label='排序列' {...formItemLayout}>
					<Select
						allowClear
						value={chartDesigner.dataViewConfig.sortColumn}
						labelInValue={true}
						showSearch
						filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
						onChange={(value) => {
							dispatch({ type: 'chartDesigner/changeField', name: 'dataViewConfig', value: { ...chartDesigner.dataViewConfig, sortColumn: value }, autoRefresh });
						}}
					>
						{chartDesigner.dataViewConfig.viewColumns.map((c, i)=>{
							return <Option key={i} name={c.name}>{c.label}</Option>
						})}
					</Select>
				</FormItem>
				<FormItem label='排序方式' {...formItemLayout}>
					<Select
						defaultValue='asc'
						value={chartDesigner.dataViewConfig.sortType}
						onChange={(value) => {
							dispatch({ type: 'chartDesigner/changeField', name: 'dataViewConfig', value: { ...chartDesigner.dataViewConfig, sortType: value }, autoRefresh });
						}}
					>
						<Option value="asc">升序</Option>
						<Option value="desc">降序</Option>
					</Select>
				</FormItem>
				<FormItem label='数据条数' {...formItemLayout}>
					<InputNumber
						min={0}
						defaultValue={chartDesigner.dataViewConfig.count}
						onChange={(value) => {
							dispatch({ type: 'chartDesigner/changeField', name: 'dataViewConfig', value: { ...chartDesigner.dataViewConfig, count: value }, autoRefresh });
						}}
					>
					</InputNumber>
				</FormItem>
				<DisplayColumnBox
					key={Math.random()}
					autoRefresh={autoRefresh} 
					visibleDisplayColumnBox={this.state.visibleDisplayColumnBox}
					hideBox={() => this.setState({visibleDisplayColumnBox:false})}
					targetColumns={chartDesigner.dataViewConfig.viewColumns.map(c => c.key)}
				/>	
			</Form>
        );
	}
}

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

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