import React from 'react'
import { Form, Input, Cascader } from 'antd'
import { connect } from 'dva'
import './otherConfigForm.less'
const FormItem = Form.Item
const InputTextArea = Input.TextArea

const OtherConfigForm = ({ chart, chartDesigner, dispatch, formItemLayout }) => {
    let getGroup = () => {
        const { group } = chartDesigner;
        const { groupList } = chart;
        let g1 = groupList.filter(g => g.code+'' === group+'')[0];
        if(!g1) {
            return ['-1']
        }
        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-otherconfig'>
            <FormItem label='所属分组' {...formItemLayout}>
                <Cascader
                    value={getGroup()}
                    allowClear={true}
                    changeOnSelect={true}
                    expandTrigger='hover'
					placeholder='未分组'
					options={[{pcode: '-1', code: '-1', label: '未分组'}].concat(chart.groupList).filter(g => g.pcode === '-1').map((p, i)=>{
						return {
                            key: p.code,
							value: p.code,
							label: p.label,
							children: chart.groupList.filter(g => g.pcode === p.code && p.code !== '-1').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: 'chartDesigner/setField', name: 'group', value: v });
					}}
					
				>
				</Cascader>
            </FormItem>
            <FormItem label='备注' {...formItemLayout}>
                <InputTextArea
                    className='inputarea-description'
                    value={chartDesigner.description}
                    autosize={{ minRows: 2, maxRows: 6 }}
                    onChange={(e) => {
                        dispatch({ type: 'chartDesigner/setField', name: 'description', value: e.target.value });
                    }}
                />
            </FormItem>
        </Form>
    );
}

function mapStateToProps({ present: {chart, chartDesigner}}) {
    return { chart, chartDesigner };
}

export default connect(mapStateToProps)(OtherConfigForm);