import React from 'react'
import { Form, Row, Col, Input, InputNumber, Select, Divider, Cascader } from 'antd'
import { connect } from 'dva'
const FormItem = Form.Item
const SelectOption = Select.Option

class DataSourceBaseConfig extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            timeout: null
        }
    }

    componentDidMount() {
        const { dispatch } = this.props;
        dispatch({ type: 'dataSource/remoteGroupList' });
    }

    render() {
        const { dataSource, dispatch } = this.props;

        const formItemLayout = {
            labelCol: { span: 4 },
            wrapperCol: { span: 20 },
        };
    
        let getGroup = () => {
            const { groupList } = dataSource;
            const { group } = dataSource.newOne;
            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-base' size='small'>
                <Divider orientation="left">基本配置</Divider>
                <FormItem label='数据源名称' {...formItemLayout}>
                    <Input
                        value={dataSource.newOne.name}
                        onBlur={(e) => {
                            dispatch({ type: 'dataSource/setNewModelField', name: 'name', value: e.target.value });
                            dispatch({ type: 'dataSource/remoteModify' });
                        }}
                        onChange={(e) => {
                            dispatch({ type: 'dataSource/setNewModelField', name: 'name', value: e.target.value });
                            // const timeout = this.state.timeout;
                            // timeout && window.clearTimeout(timeout);
                            // this.setState({
                            //     timeout: window.setTimeout(() => {
                            //         dispatch({ type: 'dataSource/remoteModify' });
                            //     }, 500)
                            // });
                        }}>
                    </Input>
                </FormItem>
                {
                    dataSource.newOne.type==='file'?(
                        <div>
                            <Divider orientation="left">文件</Divider>
                            <div>此处显示文件名</div>
                        </div>
                    ):(
                        <div>
                            <Divider orientation="left">连接配置</Divider>
                            <FormItem label='数据库类型' {...formItemLayout}>
                                <Select
                                    disabled={true}
                                    value={dataSource.newOne.dbType}
                                    onChange={(value) => {
                                        dispatch({ type: 'dataSource/setNewModelField', name: 'dbType', value: value} );
                                        const timeout = this.state.timeout;
                                        timeout && window.clearTimeout(timeout);
                                        this.setState({
                                            timeout: window.setTimeout(() => {
                                                dispatch({ type: 'dataSource/remoteModify' });
                                            }, 500)
                                        });
                                    }}
                                >
                                    <SelectOption value='oracle'>
                                        ORACLE
                                    </SelectOption>
                                    <SelectOption value='mysql'>
                                        MYSQL
                                    </SelectOption>
                                    <SelectOption value='sqlserver'>
                                        SQLSERVER
                                    </SelectOption>
                                    <SelectOption value='sqlite'>
                                        SQLITE
                                    </SelectOption>
                                </Select>
                            </FormItem>
                            <Row>
                                <Col span={19}>
                                    <FormItem label='数据库地址' {...{
                                        labelCol: { span: 5 },
                                        wrapperCol: { span: 19 }
                                    }}>
                                        <Input
                                            disabled={true}
                                            value={dataSource.newOne.address}
                                            onChange={(e) => {
                                                dispatch({ type: 'dataSource/setNewModelField', name: 'address', value: e.target.value });
                                                const timeout = this.state.timeout;
                                                timeout && window.clearTimeout(timeout);
                                                this.setState({
                                                    timeout: window.setTimeout(() => {
                                                        dispatch({ type: 'dataSource/remoteModify' });
                                                    }, 500)
                                                });
                                            }}
                                        />
                                    </FormItem>
                                </Col>
                                <Col span={5}>
                                    <FormItem className='input-port' label='端口' {...{
                                        labelCol: { span: 12 },
                                        wrapperCol: { span: 12 }
                                    }}>
                                        <InputNumber
                                            disabled={true}
                                            value={dataSource.newOne.port}
                                            onChange={(value) => {
                                                dispatch({ type: 'dataSource/setNewModelField', name: 'port', value: value });
                                                const timeout = this.state.timeout;
                                                timeout && window.clearTimeout(timeout);
                                                this.setState({
                                                    timeout: window.setTimeout(() => {
                                                        dispatch({ type: 'dataSource/remoteModify' });
                                                    }, 500)
                                                });
                                            }}
                                        />
                                    </FormItem>
                                </Col>
                            </Row>
                            <FormItem label='数据库名' {...formItemLayout}>
                                <Input
                                    disabled={true}
                                    value={dataSource.newOne.dbName}
                                    onChange={(e) => {
                                        dispatch({ type: 'dataSource/setNewModelField', name: 'dbName', value: e.target.value });
                                        const timeout = this.state.timeout;
                                        timeout && window.clearTimeout(timeout);
                                        this.setState({
                                            timeout: window.setTimeout(() => {
                                                dispatch({ type: 'dataSource/remoteModify' });
                                            }, 500)
                                        });
                                    }}
                                />
                            </FormItem>
                            <Row>
                                <Col span={12}>
                                    <FormItem label='用户名' {...{
                                        labelCol: { span: 8 },
                                        wrapperCol: { span: 16 }
                                    }}>
                                        <Input
                                            disabled={true}
                                            value={dataSource.newOne.userName}
                                            onChange={(e) => {
                                                dispatch({ type: 'dataSource/setNewModelField', name: 'userName', value: e.target.value });
                                                const timeout = this.state.timeout;
                                                timeout && window.clearTimeout(timeout);
                                                this.setState({
                                                    timeout: window.setTimeout(() => {
                                                        dispatch({ type: 'dataSource/remoteModify' });
                                                    }, 500)
                                                });
                                            }}
                                        />
                                    </FormItem>
                                </Col>
                                <Col span={12}>
                                    <FormItem label='密码' {...{
                                        labelCol: { span: 8 },
                                        wrapperCol: { span: 16 }
                                    }}>
                                        <Input
                                            disabled={true}
                                            // value={dataSource.newOne.password}
                                            onChange={(e) => {
                                                let value = e.target.value;
                                                dispatch({ type: 'dataSource/setNewModelField', name: 'password', value: value });
                                                const timeout = this.state.timeout;
                                                timeout && window.clearTimeout(timeout);
                                                this.setState({
                                                    timeout: window.setTimeout(() => {
                                                        dispatch({ type: 'dataSource/remoteModify' });
                                                    }, 500)
                                                });
                                                e.target.removeAttribute('value')
                                            }}
                                        />
                                    </FormItem>
                                </Col>
                            </Row>
                        </div>
                    )
                }
                <Divider orientation="left">其他配置</Divider>
                <FormItem label='所属分组' {...formItemLayout}>
                    <Cascader
                        value={getGroup()}
                        allowClear={true}
                        changeOnSelect={true}
                        expandTrigger='hover'
                        placeholder='未分组'
                        options={[{pcode: '-1', code: '-1', 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 && 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: 'dataSource/setNewModelField', name: 'group', value: v });
                            
                            const timeout = this.state.timeout;
                            timeout && window.clearTimeout(timeout);
                            this.setState({
                                timeout: window.setTimeout(() => {
                                    dispatch({ type: 'dataSource/remoteModify' });
                                }, 500)
                            });
                        }}
                        
                    >
                    </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 });
                        }}
                        onBlur={(e) => {
                            dispatch({ type: 'dataSource/remoteModify' });
                        }}
                    />
                </FormItem>
            </Form>
        );
    }
}

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

export default connect(mapStateToProps)(DataSourceBaseConfig);