import React from 'react'
import { Form, Select, Icon } from 'antd'
import { connect } from 'dva'
import CHART_TYPE from './chartType.json'
import './baseConfigForm.less'
const FormItem = Form.Item
const { Option } = Select

class baseConfigForm extends React.Component {
	state =  {
		formItemLayout: {
			labelCol: { span: 8 },
			wrapperCol: { span: 16 },
		},
	}
	componentDidMount() {
		this.props.dispatch({ type: 'dataSource/fetchList' });
	}
	render() {
		const props = this.props;
		const { formItemLayout } = this.state;
		const { dataSource, chartDesigner } = props
		const { baseConfig } = chartDesigner;

		return (
			<Form hideRequiredMark={true}>
				<FormItem label='数据源' {...formItemLayout}>
					<Select
						disabled
						value={{ key: baseConfig.dataSource.code, label: baseConfig.dataSource.name }}
						labelInValue={true}
						onChange={(value) => {
							props.dispatch({
								type: 'chartDesigner/changeDataSource',
								dataSource: { code: value.key, name: value.label }
							});
						}}
					>
						{dataSource.list.map(l => <Option key={l.code} value={l.code}>{l.name}</Option>)}
					</Select>
				</FormItem>
				<FormItem label='可视化模式' {...formItemLayout}>
					<Select
						className='viewtype-field'
						dropdownClassName='baseconfig-viewtype'
						value={props.chartDesigner.baseConfig.viewType}
						dropdownMatchSelectWidth={false}
						onChange={(value, item) => {
							props.dispatch({ type: 'chartDesigner/changeFields', fields: [
								{ name: 'baseConfig', value: { ...props.chartDesigner.baseConfig, viewType: value } },
								{ name: 'chartOption', value: { } }
							] });
						}}
					>
					{
						CHART_TYPE.map( c => (
							<Option key={c.type} value={c.type} title={c.label}>
								<div className='viewtype-box'>
									<Icon className='viewtype-icon' type={c.icon} />
									<div className='viewtype-text'>
										{c.label}
									</div>
								</div>
							</Option>
						))
					}
					</Select>
				</FormItem>
			</Form>
		);
	}
}

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

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