import React from 'react'
import { Form, Input, Cascader } from 'antd'
import { connect } from 'dva'
import { arrayToTree } from '../../utils/baseUtils'
import './otherConfig.less'
const FormItem = Form.Item

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

    const getParens = (group) => {
        const groupData = dataSource.groupList;
        let pgroups = [group];
        let fgroup = groupData.find(g => g.code === group.pcode);
        if(fgroup) {
            pgroups = getParens(fgroup).concat(pgroups);
        }
        return pgroups;
    }

    const getGroup = () => {
        const { group: key } = dataSourceDetail;
        if(key === '-1') {
            return ['-1'];
        }else {
            let group = dataSource.groupList.find(g => g.code === key);
            if(group) {
                let groups = getParens(group);
                let val = groups.map(g => g.code);
                return val;
            }else {
                return null;
            }
        }
    }

    const generateGroupOptions = (treeData) => {
        return treeData.map(t => {
            t.children = t.children instanceof Array ? t.children : [];
            return {
                key: t.code,
                value: t.code,
                label: t.label,
                children: generateGroupOptions(t.children)
            }
        })
    }

    const treeData = arrayToTree(dataSource.groupList, '-1', 'code', 'pcode', 'children');

    return (
        <Form className='other-config' size='small'>
            <FormItem label='数据源名称' {...formItemLayout}>
                <Input
                    value={dataSourceDetail.name}
                    onChange={(e) => { dispatch({ type: 'dataSourceDetail/setField', name: 'name', value: e.target.value }) }}>
                </Input>
            </FormItem>
            <FormItem label='数据链接' {...formItemLayout}>
                <Input
                    readOnly
                    value={dataSourceDetail.connectName}
                    onChange={(e) => { dispatch({ type: 'dataSourceDetail/setField', name: 'name', value: e.target.value }) }}>
                </Input>
            </FormItem>
            <FormItem label='所属分组' {...formItemLayout}>
                <Cascader
                    value={getGroup()}
                    allowClear={true}
                    changeOnSelect={true}
                    expandTrigger='hover'
					placeholder='未分组'
					options={generateGroupOptions([{pcode: '-1', code: '-1', label: '未分组'}].concat(treeData))}
					onChange={(value, items) => {
                        let v = value[value.length - 1];
                        dispatch({ type: 'dataSourceDetail/setField', name: 'group', value: v });
					}}
					
				>
				</Cascader>
            </FormItem>
            <FormItem className='textarea-desc' label='说明' {...formItemLayout}>
                <Input.TextArea
                    autosize={{ minRows: 2, maxRows: 5 }}
                    value={dataSourceDetail.description}
                    onChange={(e) => {
                        dispatch({ type: 'dataSourceDetail/setField', name: 'description', value: e.target.value });
                    }}
                />
            </FormItem>
        </Form>
    );
}

function mapStateToProps({ dataSource, dataSourceDetail, dataConnect }) {
    return { dataSource, dataSourceDetail, dataConnect }
}

export default connect(mapStateToProps)(OtherConfig);