import React from 'react'
import { Card, Form, Input, Button, message, Icon, Checkbox, Select, Cascader, DatePicker } from 'antd';
require('./assets/TaskSelect.css')

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

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

class RuleSetPop extends React.Component {
	constructor(props) {
		super(props)
		this.state = {
			setMode: this.props.setMode,
			title: this.props.title,
			databaseType: '0',
			data: this.props.data
		}
	}
	close = () => {
		this.props.onPopClose()
	}
	handelsubmit = () => {
		this.props.form.validateFields((err, values)=>{
			if (this.state.setMode === 'add') {
				this.props.onAdd(values)
			} else if (this.state.setMode === 'update') {
				values.id = this.state.data.id
				this.props.onUpdate(values)
			}
		})
	}
	handelConnectTest = () => {
		
	}
	
	render() {
		const { getFieldDecorator, getFieldsError, getFieldError, isFieldTouched } = this.props.form
		const { data } = this.state
		return (
			<div>
				<div className='mask'></div>
				<div className='wrap'>
					<div className='topbar'>
						<div className='close' onClick={this.close}>x</div>
					</div>
					<div className='content'>
						<Card title={this.state.title}>
							<Form layout='horizontal'>
								<FormItem label="规则名称" {...formItemLayout}>
									{
										getFieldDecorator('REGULATION_NAME', {
											initialValue: data.REGULATION_NAME,
											rules: [
												{
													required: true,
													message: '请输入规则名称',
												},
											],
										})
										(<Input placeholder="请输入规则名称" />)
									}
								</FormItem>
								
								<FormItem label="任务描述" {...formItemLayout}>
									{
										getFieldDecorator('DESCRIBE', {
											initialValue: data.DESCRIBE,
											rules: [
												{
													required: false,
													message: '请输入任务描述',
												},
											],
										})
										(<Input placeholder="请输入任务描述" />)
									}
								</FormItem>
									
								<FormItem label="任务类型" {...formItemLayout}>
									{
										getFieldDecorator('REGULATION_TYPE', {
											initialValue: data.REGULATION_TYPE ? data.REGULATION_TYPE + '' : '1',
											rules: [
												{
													required: false,
													message: 'Please select your habitual residence!'
												},
											],
										})(<Select>
											<option value="1">SQL</option>
											<option value="2">SHELL</option>
											<option value="3">其他</option>
										</Select>)
									}
								</FormItem>
									
								<FormItem label="API_URL" {...formItemLayout}>
									{
										getFieldDecorator('API_URL', {
											initialValue: data.API_URL,
											rules: [
												{
													required: false,
													message: '请输入API_URL'
												},
											],
										})(<Input placeholder="请输入API_URL" />)
									}
								</FormItem>
								
								<FormItem label="API参数" {...formItemLayout}>
									{
										getFieldDecorator('TRANS_PARAM_FORMAT', {
											initialValue: data.TRANS_PARAM_FORMAT,
											rules: [
												{
													required: false,
													message: '请输入API参数',
												},
											],
										})
										(<Input placeholder="请输入API参数" />)
									}
								</FormItem>
								
								<FormItem label="SQL" {...formItemLayout}>
									{
										getFieldDecorator('SQL', {
											initialValue: data.SQL,
											rules: [
												{
													required: false,
													message: '请输入SQL',
												},
											],
										})
										(<Input placeholder="请输入SQL" />)
									}
								</FormItem>
							
								<FormItem  {...formButtom} style={{ display: this.state.setMode ? 'block' : 'none' }}>
									<Button type='primary' onClick={this.handelsubmit}>保存</Button>&nbsp;&nbsp;&nbsp;&nbsp;
									<Button type='danger' onClick={this.close}>取消</Button>
								</FormItem>
								
							</Form>
						</Card>
					</div>
				</div>
			</div>
		)
	}
}

export default Form.create({ name: 'RuleSetPop' })(RuleSetPop);