import React 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, 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 DataSourceSetPop extends React.Component {
	constructor(props) {
		super(props)
		this.state = {
			setMode: this.props.setMode,
			title: this.props.title,
			databaseType: '0',
			data: this.props.data,
			testResult: ''
		}
	}
	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 = () => {
		this.props.form.validateFields((err, values)=>{
			api.system.testDataSource(values).then(res => {
				message.success(`${values.DATABASE_URL} 调用接口成功，返回值为：${res.msg}`)
			}).catch(err => {
				message.error(`${values.DATABASE_URL} 调用接口失败，返回值为：${err.msg}`)
			})
		})
	}
	selectChange = (e) => {
		// console.log(e)
		this.setState({
			databaseType: e
		})
	}
	
	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('DATATBASE_NAME', {
										initialValue: data.DATATBASE_NAME,
										rules: [
											{
												required: true,
												message: '请输入数据源名称',
											},
										],
									})(<Input placeholder="请输入数据源名称" />)}
								</FormItem>
									
								<FormItem label="数据源类型" {...formItemLayout}>
									{getFieldDecorator('DATASOURCE_TYPE', {
										initialValue: data.DATASOURCE_TYPE ? data.DATASOURCE_TYPE + '': '1',
										rules: [
											{ required: false, message: 'Please select your habitual residence!' },
										],
									})(<Select onChange={this.selectChange}>
										<option value="1">数据库</option>
										<option value="2">API</option>
										<option value="3">文件</option>
									</Select>)}
								</FormItem>
										
								<FormItem label="数据库URL" {...formItemLayout}
									style={{ display: this.state.databaseType === '3' ? 'none' : 'block' }}
								>
									{getFieldDecorator('DATABASE_URL', {
										initialValue: data.DATABASE_URL,
										rules: [
											{
												required: false,
												message: '请输入数据库URL',
											},
										],
									})(<Input placeholder="请输入数据库URL" />)}
								</FormItem>
								
								<div style={{ display: this.state.databaseType === '0' || this.state.databaseType === '1' ? 'block' : 'none' }}>
									<FormItem label="数据库类型" {...formItemLayout}>
										{getFieldDecorator('DATABASE_TYPE', {
											initialValue: data.DATABASE_TYPE ? data.DATABASE_TYPE : '0',
											rules: [
												{ required: true, message: 'Please select your habitual residence!' },
											],
										})(<Select>
											<option value="0">全部</option>
											<option value="1">MYSQL</option>
											<option value="2">ORACLE</option>
										</Select>)}
									</FormItem>
									
									<FormItem label="数据库IP" {...formItemLayout}>
										{getFieldDecorator('DATABASE_IP', {
											initialValue: data.DATABASE_IP,
											rules: [
												{
													required: false,
													message: '请输入数据库IP',
												},
											],
										})(<Input placeholder="请输入数据库IP" />)}
									</FormItem>
										
									<FormItem label="数据库驱动" {...formItemLayout}>            
										{getFieldDecorator('DATABASE_DRIVER', {
											initialValue: data.DATABASE_DRIVER,
											rules: [
												{
													required: false,
													message: '请输入数据库驱动',
												},
											],
										})(<Input placeholder="请输入数据库驱动" />)}
									</FormItem>
								
									<FormItem label="用户" {...formItemLayout}>            
										{getFieldDecorator('DATABASE_USER', {
											initialValue: data.DATABASE_USER,
											rules: [
												{
													required: false,
													message: '请输入用户',
												},
											],
										})(<Input placeholder="请输入用户" />)}
									</FormItem>
								
									<FormItem label="密码" {...formItemLayout}>            
										{getFieldDecorator('DATABASE_PWD', {
											initialValue: data.DATABASE_PWD,
											rules: [
												{
													required: false,
													message: '请输入密码',
												},
											],
										})(<Input placeholder="请输入密码" />)}
									</FormItem>
								
									<FormItem label="说明" {...formItemLayout}>            
										{getFieldDecorator('DATABASE_DESC', {
											initialValue: data.DATABASE_DESC,
											rules: [
												{
													required: false,
													message: '请输入说明',
												},
											],
										})(<TextArea placeholder="请输入说明" minRows="2" maxRows="6" />)}
									</FormItem>
								</div>
								
								<div style={{ display: this.state.databaseType === '3' ? 'block' : 'none' }}>
									<FormItem label="文件名" {...formItemLayout}>
										{getFieldDecorator('FILE_NAME', {
											initialValue: data.FILE_NAME,
											rules: [
												{
													required: false,
													message: '请输入文件名',
												},
											],
										})(<Input placeholder="请输入文件名" />)}
									</FormItem>
									
									<FormItem label="原服务器路径" {...formItemLayout}>
										{getFieldDecorator('FILE_SOURCE_PATH', {
											initialValue: data.FILE_SOURCE_PATH,
											rules: [
												{
													required: false,
													message: '请输入原服务器路径',
												},
											],
										})(<Input placeholder="请输入原服务器路径" />)}
									</FormItem>
									
									<FormItem label="存入服务器路径" {...formItemLayout}>
										{getFieldDecorator('FILE_SAVE_PATH', {
											initialValue: data.FILE_SAVE_PATH,
											rules: [
												{
													required: false,
													message: '请输入存入服务器路径',
												},
											],
										})(<Input placeholder="请输入存入服务器路径" />)}
									</FormItem>
								</div>
							
								<FormItem label="添加人" {...formItemLayout}>            
									{getFieldDecorator('DATABASE_BY', {
										initialValue: data.DATABASE_BY,
										rules: [
											{
												required: false,
												message: '请输入添加人',
											},
										],
									})(<Input placeholder="请输入添加人" />)}
								</FormItem>
							
								<FormItem  {...formButtom}>            
									<Button type='primary' onClick={this.handelsubmit}>保存</Button>&nbsp;&nbsp;&nbsp;&nbsp;
									<Button type='danger' onClick={this.close}>取消</Button>&nbsp;&nbsp;&nbsp;&nbsp;
									{this.state.databaseType === '1' && <Button type='dashed' onClick={this.handelConnectTest}>测试</Button>}
								</FormItem>
								
							</Form>
						</Card>
					</div>
				</div>
			</div>
		)
	}
}

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