import React from 'react'
import { Modal, Form, Row, Col, Input, InputNumber, Select, Button, Icon } from 'antd'
import { connect } from 'dva'
import './dataConnectBox.less'
const FormItem = Form.Item
const SelectOption = Select.Option

class DataConnectBox extends React.Component {

    hideBox() {
        const { dispatch } = this.props;
        dispatch({ type: 'dataConnect/setNewModelField', name: 'visibleBox', value: false });
    }

    okHandler() {
        const { dispatch, dataConnect} = this.props;
        const operation = dataConnect.newOne.boxOperation;
        if(operation === 'create') {
            dispatch({ type: 'dataConnect/remoteAdd' });
        }else if(operation === 'modify') {
            dispatch({ type: 'dataConnect/remoteModify', code: dataConnect.newOne.code });
        }
    }

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

        const formItemLayout = {
            labelCol: { span: 4 },
            wrapperCol: { span: 20 },
        };

        return (
            <Modal
                className='dataconnect-box'
                title={<Row type='flex' justify='space-between'><Col>{`${dataConnect.newOne.boxOperation === 'create'?'新建':'修改'}数据库连接`}</Col><Col style={{ marginRight: '35px', fontSize: '14px', cursor: 'pointer', color: 'red' }} onClick={() => {
                    // 密码input特殊处理
                    document.getElementsByClassName('password')[0].value = '';
                    dispatch({ type:'dataConnect/resetNewModel'})
                }}><Icon type='delete' />清空</Col></Row>}
                visible={dataConnect.newOne.visibleBox}
                onCancel={() => { this.hideBox() }}
                maskClosable={false}
                destroyOnClose={true}
                footer={
                    <Row>
                        <Col className='validatemessage' span={12}>
                            {dataConnect.newOne.invalid !== undefined ? (dataConnect.newOne.invalid ? <span style={{ color: '#F5222D' }}>数据连接配置有误</span> : <span style={{ color: '#52C41A' }}>测试通过</span>) : ''}
                        </Col>
                        <Col span={12}>
                            <Button disabled={dataConnect.newOne.validating} onClick={() => dispatch({ type:'dataConnect/remoteValidate'})}>测试</Button>
                            {/* <Button onClick={() => dispatch({ type:'dataConnect/resetNewModel'})}>清空</Button> */}
                            <Button onClick={() => {this.hideBox()}}>取 消</Button>
                            <Button className={dataConnect.newOne.validating ? 'ant-btn-loading' : ''} type="primary" onClick={() => {this.okHandler()}}>
                                {dataConnect.newOne.validating ? (<Icon type='loading' />) : ''}{dataConnect.newOne.validating ? '校验中' : '保存'}
                            </Button>
                        </Col>
                    </Row>
                }
            >
                <Form size='small'>
                    <FormItem
                        label='连接名'
                        {...formItemLayout}
                        validateStatus={dataConnect.validInfo.name ? dataConnect.validInfo.name.validateStatus : ''}
                        help={dataConnect.validInfo.name ? dataConnect.validInfo.name.help : ''}
                    >
                        <Input
                            placeholder="输入数据库连接名称"
                            value={dataConnect.newOne.name}
                            onChange={(e) => { dispatch({ type: 'dataConnect/setNewModelField', name: 'name', value: e.target.value }) }}
                        >
                        </Input>
                    </FormItem>
                    <FormItem label='数据库类型' {...formItemLayout}>
                        <Select
                            placeholder="选择数据库类型"
                            value={dataConnect.newOne.dbType}
                            onChange={(value) => {
                                dispatch({ type: 'dataConnect/setNewModelField', name: 'dbType', value: value} );
                            }}
                        >
                            <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
                                    placeholder="格式：192.168.1.1"
                                    value={dataConnect.newOne.address}
                                    onChange={(e) => {
                                        dispatch({ type: 'dataConnect/setNewModelField', name: 'address', value: e.target.value });
                                    }}
                                />
                            </FormItem>
                        </Col>
                        <Col span={5}>
                            <FormItem className='input-port' label='端口' {...{
                                labelCol: { span: 12 },
                                wrapperCol: { span: 12 }
                            }}>
                                <InputNumber
                                    value={dataConnect.newOne.port}
                                    onChange={(value) => {
                                        dispatch({ type: 'dataConnect/setNewModelField', name: 'port', value: value });
                                    }}
                                />
                            </FormItem>
                        </Col>
                    </Row>
                    <FormItem label='数据库名(SID)' {...formItemLayout}>
                        <Input
                            value={dataConnect.newOne.dbName}
                            onChange={(e) => {
                                dispatch({ type: 'dataConnect/setNewModelField', name: 'dbName', value: e.target.value });
                            }}
                        />
                    </FormItem>
                    <Row>
                        <Col span={12}>
                            <FormItem label='用户名' {...{
                                labelCol: { span: 8 },
                                wrapperCol: { span: 16 }
                            }}>
                                <Input
                                    value={dataConnect.newOne.userName}
                                    onChange={(e) => {
                                        dispatch({ type: 'dataConnect/setNewModelField', name: 'userName', value: e.target.value });
                                    }}
                                />
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem label='密码' {...{
                                labelCol: { span: 8 },
                                wrapperCol: { span: 16 }
                            }}>
                                <Input
                                    className='password'
                                    type='password'
                                    // value={dataConnect.newOne.password}
                                    onChange={(e) => {
                                        dispatch({ type: 'dataConnect/setNewModelField', name: 'password', value: e.target.value });
                                    }}
                                />
                            </FormItem>
                        </Col>
                    </Row>
                    <FormItem className='textarea-desc' label='说明' {...formItemLayout}>
                        <Input.TextArea
                            autosize={{ minRows: 2 }}
                            value={dataConnect.newOne.description}
                            onChange={(e) => {
                                dispatch({ type: 'dataConnect/setNewModelField', name: 'description', value: e.target.value });
                            }}
                        />
                    </FormItem>
                </Form>
            </Modal>
        )
    }
}

function mapStateToProps(state) {
    const dataConnect = state.present.dataConnect;
    return { dataConnect };
}

export default connect(mapStateToProps)(DataConnectBox)