import React from 'react'
import { Form, Input, Cascader } from 'antd'
import { connect } from 'dva'
const FormItem = Form.Item

const OtherConfig = ({ dataSource, dataConnect, dispatch, mode }) => {
    
    dispatch({ type: 'dataSource/remoteGroupList' });
    
    const formItemLayout = {
        labelCol: { span: 4 },
        wrapperCol: { span: 20 },
    };

    let getGroup = () => {
        const { group } = dataSource.newOne;
        const { groupList } = dataSource;
        let g1 = groupList.filter(g => g.code+'' === group+'')[0];
        if(!g1) {
            return ['nogroup']
        }
        if(g1.pcode === '-1') {
            return [g1.code]
        }else {
            let g2 = groupList.filter(g => g.code+'' === g1.pcode+'')[0];
            return [g2.code, g1.code]
        }
    }

    return (
        <Form className='form-base' size='small'>
            <FormItem label='数据源名称' {...formItemLayout}>
                <Input
                    value={dataSource.newOne.name}
                    onChange={(e) => { dispatch({ type: 'dataSource/setNewModelField', name: 'name', value: e.target.value }) }}>
                </Input>
            </FormItem>
            <FormItem label='所属分组' {...formItemLayout}>
                <Cascader
                    value={getGroup()}
                    allowClear={true}
                    changeOnSelect={true}
                    expandTrigger='hover'
					placeholder='未分组'
					options={[{pcode: '-1', code: 'nogroup', label: '未分组'}].concat(dataSource.groupList).filter(g => g.pcode === '-1').map((p, i)=>{
						return {
                            key: p.code,
							value: p.code,
							label: p.label,
							children: dataSource.groupList.filter(g => g.pcode === p.code).map(c => {
                                return {
                                    key: c.code,
                                    value: c.code,
                                    label: c.label
                                }
                            })
						}
					})}
					onChange={(value, items) => {
                        let v = value[1] !== undefined ? value[1] : value[0];
                        dispatch({ type: 'dataSource/setNewModelField', name: 'group', value: v });
					}}
					
				>
				</Cascader>
            </FormItem>
            <FormItem className='textarea-desc' label='说明' {...formItemLayout}>
                <Input.TextArea
                    autosize={{ minRows: 2, maxRows: 5 }}
                    value={dataSource.newOne.description}
                    onChange={(e) => {
                        dispatch({ type: 'dataSource/setNewModelField', name: 'description', value: e.target.value });
                    }}
                />
            </FormItem>
        </Form>
    );
}

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

export default connect(mapStateToProps)(OtherConfig);