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

class OtherConfigForm extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            formItemLayout: {
                labelCol: { span: 8 },
                wrapperCol: { span: 16 },
            },
            description: props.chartDesigner.description,
            validInfo: { description: { status: 'success', help: '' } }
        };
    }

    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: this.generateGroupOptions(t.children)
            }
        })
    }

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

    render() {
        const { chart, chartDesigner, dispatch } = this.props;
        const { description, formItemLayout, validInfo } = this.state;
        const treeData = arrayToTree(chart.groupList, '-1', 'code', 'pcode', 'children');
        let getGroup = () => {
            const { group: key } = chartDesigner;
            if(key === '-1') {
                return ['-1'];
            }else {
                let group = chart.groupList.find(g => g.code === key);
                if(group) {
                    let groups = this.getParents(group);
                    let val = groups.map(g => g.code);
                    return val;
                }else {
                    return null;
                }
            }
        }
        return (
            <Form className='form-otherconfig'>
                <FormItem label='所属分组' {...formItemLayout}>
                    <Cascader
                        value={getGroup()}
                        allowClear={true}
                        changeOnSelect={true}
                        expandTrigger='hover'
                        placeholder='未分组'
                        options={this.generateGroupOptions([{pcode: '-1', code: '-1', label: '未分组'}].concat(treeData))}
                        onChange={(value, items) => {
                            let v = value[value.length - 1];
                            dispatch({ type: 'chartDesigner/setField', name: 'group', value: v });
                        }}
                        
                    >
                    </Cascader>
                </FormItem>
                <FormItem label='备注' {...formItemLayout} validateStatus={validInfo.description.status} help={validInfo.description.help}>
                    <InputTextArea
                        className='inputarea-description'
                        value={description}
                        autosize={{ minRows: 2, maxRows: 6 }}
                        onChange={e => {
                            let val = e.target.value;
                            let status = 'success', help = '';
                            if(val.length > 150) {
                                status = 'error';
                                help = '备注不能超过150个字符'
                            }
                            this.setState({
                                description: val,
                                validInfo: {
                                    description: { status, help, }
                                }
                            });
                            window.clearTimeout(this.descriptionKey);
                            this.descriptionKey = window.setTimeout(() => {
                                if(val.trim().length <= 150) {
                                    dispatch({ type: 'chartDesigner/setField', name: 'description', value: val });
                                }
                            }, 200);
                        }}
                        onBlur={(e) => {
                            if(validInfo.description.status === 'success') {
                                dispatch({ type: 'chartDesigner/setField', name: 'description', value: e.target.value });
                            }else {
                                this.setState({
                                    description: chartDesigner.description
                                }, () => {
                                    window.setTimeout(() => {
                                        this.setState({
                                            validInfo: {
                                                description: { status: 'success', help: '', }
                                            }
                                        });
                                    }, 500);
                                })
                            }
                        }}
                    />
                </FormItem>
            </Form>
        );
    }
}

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

export default connect(mapStateToProps)(OtherConfigForm);