import React, { Component } from 'react';
//import { getControl } from 'zorod/components/Zform/controls';
import { ZsearchListHOC } from 'zorod';
import api from '@/Api';
import { Card, Form, Input, Button, message, Icon, Checkbox, Select,Cascader} from 'antd';
import EcData from "./ecData"


const FormItem=Form.Item;
const TextArea=Input.TextArea;

const formItemLayout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 12 },
  };
  const formTailLayout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 12, offset: 4 },
  };
  const formButtom={
    wrapperCol: { span: 12, offset: 6 }
  }
const residences=["baijing","hunian","guangxi"];

class EcDataSourceAdd extends Component {
    constructor(props) {
        super(props);
        this.state = {  }
    }

    //表单提交
    handelsubmit=()=>{
        let userInfo=this.props.form.getFieldsValue;
        this.props.form.validateFields((err,values)=>{
              if(!err){
                  console.log(values);
                  EcData.push(values);
                message.success(`${userInfo.DATATBASE_NAME} 添加成功!!!`);
              }
        });
    }

    //测试连接
    handelConnectTest=()=>{
        message.success(`连接成功!!!`);
    }

    //取消
    handelConcel=()=>{

    }

    render() { 
        const { getFieldDecorator, getFieldsError, getFieldError, isFieldTouched } = this.props.form;
        return ( 
            <div>
              <div>
    <Card title="新增数据源设置">
      <Form >
          <FormItem label="数据源名称" {...formItemLayout}>            
            {getFieldDecorator('DATATBASE_NAME', {
            rules: [
              {
                required: true,
                message: '请输入数据源名称',
              },
            ],
          })(<Input placeholder="请输入数据源名称" />)}
          </FormItem>

          

          <FormItem label="数据源类型" {...formItemLayout}>
          {getFieldDecorator('DATABASE_TYPE', {
              initialValue: ['MYSQL'],
            rules: [
              { required: true, message: 'Please select your habitual residence!' },
            ],
          })(<Select>
<option value="MYSQL">MYSQL</option>
<option value="HBASE">HBASE</option>
<option value="EXCEL">EXCEL</option>

          </Select>)}
          </FormItem>

          <FormItem label="数据库IP" {...formItemLayout}>            
            {getFieldDecorator('DATABASE_IP', {
            rules: [
              {
                required: true,
                message: '请输入数据库IP',
              },
            ],
          })(<Input placeholder="请输入数据库IP" />)}
          </FormItem>

          <FormItem label="数据库URL" {...formItemLayout}>            
            {getFieldDecorator('DATABASE_URL', {
            rules: [
              {
                required: this.state.checkNick,
                message: '请输入数据库URL',
              },
            ],
          })(<Input placeholder="请输入数据库URL" />)}
          </FormItem>

          <FormItem label="数据库驱动" {...formItemLayout}>            
            {getFieldDecorator('DATABASE_DRIVER', {
            rules: [
              {
                required: this.state.checkNick,
                message: '请输入数据库驱动',
              },
            ],
          })(<Input placeholder="请输入数据库驱动" />)}
          </FormItem>

          <FormItem label="用户" {...formItemLayout}>            
            {getFieldDecorator('DATABASE_USER', {
            rules: [
              {
                required: this.state.checkNick,
                message: '请输入用户',
              },
            ],
          })(<Input placeholder="请输入用户" />)}
          </FormItem>

          <FormItem label="密码" {...formItemLayout}>            
            {getFieldDecorator('DATABASE_PWD', {
            rules: [
              {
                required: this.state.checkNick,
                message: '请输入密码',
              },
            ],
          })(<Input placeholder="请输入密码" />)}
          </FormItem>

          <FormItem label="说明" {...formItemLayout}>            
            {getFieldDecorator('DATABASE_DESC', {
            rules: [
              {
                required: this.state.checkNick,
                message: '请输入说明',
              },
            ],
          })(<TextArea placeholder="请输入说明" minRows="2" maxRows="6" />)}
          </FormItem>
						
					<FormItem label="添加人" {...formItemLayout}>            
						{getFieldDecorator('DATABASE_BY', {
							rules: [
								{
									required: this.state.checkNick,
									message: '请输入添加人',
								},
							],
						})(<Input placeholder="请输入添加人" />)}
					</FormItem>
          
          <FormItem  {...formButtom}>            
               <Button type="primary" onClick={this.handelsubmit}>保存</Button>&nbsp;&nbsp;&nbsp;&nbsp;
               <Button  onClick={this.handelConcel}>取消</Button>&nbsp;&nbsp;&nbsp;&nbsp;
               <Button  onClick={this.handelConnectTest}>测试</Button>
          </FormItem>

      </Form>
    </Card>
  </div>
            </div>
         );
    }
    
}
export default Form.create({ name: 'EcDataSourceAdd' })(EcDataSourceAdd);
//export default EcDataSourceAdd;