import React, { Component } from 'react';
import { ZsearchListHOC } from 'zorod';
import api from '@/Api';
import { Card, Form, Input, Button, message, Icon, Checkbox, Select, Cascader, DatePicker, Divider } from 'antd';

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 EcDataSourceSet 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: 'EcDataSourceSet' })(EcDataSourceSet);