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, Radio } 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 DataTashSetPop extends React.Component {
	constructor(props) {
		super(props)
		this.state = {
			setMode: this.props.setMode,
			title: this.props.title,
			databaseType: '0',
			data: this.props.data,
			radioMode: 'select',
			dataSource: [],
			selectInitialValue: '',
			dataSource2: [],
			select2InitialValue: '',
			dataSource3: [],
			select3InitialValue: '',
			increMode: true
		}
	}
	
	// 页面加载函数
	componentDidMount() {
		api.system.getListDataSource(1, 999, {"DATABASE_TYPE": "0"}).then(res => {
			var dataBaseId = []
			for (let data of res.data.list) {
				dataBaseId.push({name: data.DATATBASE_NAME, id: data.id})
			}
			this.setState({
				dataSource: dataBaseId,
				selectInitialValue: dataBaseId[0].id
			})
		})
		api.system.getBatchLists(1, 999, {"MODULE_TYPE": 1}).then(res => {
			console.log(res)
			var dataBaseId = []
			for (let data of res.data.list) {
				dataBaseId.push({name: data.BATCH_NAME, id: data.BATCH_ID})
			}
			this.setState({
				dataSource2: dataBaseId,
				select2InitialValue: dataBaseId[0].id
			})
		})
	}
	close = () => {
		this.props.onPopClose()
	}
	//表单提交
	handelsubmit=()=>{
		this.props.form.validateFields((err, values)=>{
			if (values.BATCH_ID) {
				for (let data of this.state.dataSource2) {
					if (data.id === values.BATCH_ID) {
						values.BATCH_NAME = data.name
					}
				}
			}
			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)
			}
		})
	}
	//取消
	handelConcel=()=>{
		console.log(this.state.dataSource)
	}
	//打开数据增量类型
	handleOpenDataAddType=()=>{
		
	}
	// 选择“增量”时出现
	selectChange = (e) => {
		if (e - 1) {
			this.setState({
				increMode: false
			})
		} else {
			this.setState({
				increMode: true
			})
		}
	}
	handleSizeChange = e => {
    this.setState({
			radioMode: e.target.value,
			select2InitialValue: ''
		})
	}
	
	render() {
		const { getFieldDecorator, getFieldsError, getFieldError, isFieldTouched } = this.props.form;
		const { data, dataSource, selectInitialValue, dataSource2, select2InitialValue, dataSource3, select3InitialValue, radioMode } = 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'>
								
								<Radio.Group value={radioMode} onChange={this.handleSizeChange}>
									<Radio.Button value="select">选择批次</Radio.Button>
									<Radio.Button value="new">新增批次</Radio.Button>
								</Radio.Group>
								
								<FormItem
									style={{ display: this.state.radioMode === 'select' ? 'block' : 'none' }}
									label="批次"
									{...formItemLayout}
									showSearch
									optionFilterProp="children"
									filterOption={(input, option) =>
										option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
									}
								>
									{
										getFieldDecorator('BATCH_ID', {
											initialValue: data.statusDo ? data.statusDo.BATCH_ID : select2InitialValue,
											rules: [
												{
													required: true,
													message: '请选择批次',
												},
											],
										})
										(<Select>
											{dataSource2.map((data) => (
												<option value={data.id}>{data.name}</option>
											))}
										</Select>)
									}
								</FormItem>
								
								<FormItem
									style={{ display: this.state.radioMode === 'new' ? 'block' : 'none' }}
									label="批次"
									{...formItemLayout}
								>
									{
										getFieldDecorator('BATCH_NAME', {
											initialValue: data.statusDo ? data.statusDo.BATCH_NAME : '',
											rules: [
												{
													required: true,
													message: '请输入批次名',
												},
											],
										})
										(<Input placeholder="请输入批次名" />)
									}
								</FormItem>
								
								<FormItem label="任务名称" {...formItemLayout}>            
							    {getFieldDecorator('TASK_NAME', {
										initialValue: data.TASK_NAME,
							      rules: [
							        {
							          required: true,
							          message: '请输入任务名称',
							        },
							      ],
							    })(<Input placeholder="请输入任务名称" />)}
							  </FormItem>
								
								<FormItem label="数据源" {...formItemLayout}>
							    {
										getFieldDecorator('DATABASE_ID', {
											initialValue: data.DATABASE_ID ? data.DATABASE_ID : selectInitialValue,
											rules: [
												{ required: true, message: '请选择数据源' },
											],
										})(<Select
											showSearch
											optionFilterProp="children"
											filterOption={(input, option) =>
												option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
											}
										>
											{dataSource.map((data) => (
												<option value={data.id}>{data.name}</option>
											))}
										</Select>)
									}
							  </FormItem>
								
								<FormItem label="任务类型" {...formItemLayout}>
							    {getFieldDecorator('TASK_TYPE', {
							      initialValue: data.TASK_TYPE ? data.TASK_TYPE + '' : '1',
							      rules: [
							        { required: true, message: '请选择任务类型' },
							      ],
							    })(<Select>
							        <option value="1">数据库</option>
							        <option value="2">脚本</option>
							    </Select>)}
							  </FormItem>
								
							  <FormItem label="任务周期" {...formItemLayout}>
							    {getFieldDecorator('ADD_PERIOD', {
							      initialValue: data.ADD_PERIOD ? data.ADD_PERIOD : 'day',
							      rules: [
							        { required: true, message: '请选择任务周期' },
							      ],
							    })(<Select>
										<option value="day">天</option>
										<option value="week">周</option>
										<option value="month">月</option>
									</Select>)}
								</FormItem>
							
							  <FormItem label="自动运行时间" {...formItemLayout}>            
							    {getFieldDecorator('RUN_TIME', {
										initialValue: data.RUN_TIME,
							      rules: [
							        {
							          required: false
							        },
							      ],
							    })(<DatePicker 
										showTime={{format:'MM-DD HH:mm'}}
										format="MM-DD HH:mm"
									></DatePicker>)}
								</FormItem>
								
							  <FormItem label="同步任务路径" {...formItemLayout}>            
							    {getFieldDecorator('SYNCHRO_SCRIPT_PATH', {
										initialValue: data.SYNCHRO_SCRIPT_PATH,
							      rules: [
							        {
							          required: false,
							          message: '请输入同步任务路径',
							        },
							      ],
							    })(<Input placeholder="请输入同步任务路径" />)}
							  </FormItem>
								
								<FormItem label="脚本所在服务器IP" {...formItemLayout}>            
									{getFieldDecorator('SYNCHRO_SCRIPT_IP', {
										initialValue: data.SYNCHRO_SCRIPT_IP,
										rules: [
											{
												required: false,
												message: '请输入脚本所在服务器IP',
											},
										],
									})(<Input placeholder="请输入脚本所在服务器IP" />)}
								</FormItem>
								
								<FormItem label="同步表名称" {...formItemLayout}>            
									{getFieldDecorator('TABLE_NAME', {
										initialValue: data.TABLE_NAME,
							      rules: [
							        {
							          required: this.state.checkNick,
							          message: '请输入同步表名称',
							        },
							      ],
							    })(<Input placeholder="请输入同步表名称" />)}
							  </FormItem>
							
							  <FormItem label="数据新增类型" {...formItemLayout}>            
							    {getFieldDecorator('DATA_ADD_TYPE', {
							      initialValue: '1',
							      rules: [
							        { required: true, message: '请选择类型' },
							      ],
							    })(<Select onChange={this.selectChange}>
										<option value="1">全量</option>
										<option value="2">增量</option>
							    </Select>)}
							  </FormItem>
								
								{!this.state.increMode && 
									<div>
										<FormItem label="增量字段" {...formItemLayout}>
										  {getFieldDecorator('DATA_ADD_FIELD', {
												initialValue: data.DATA_ADD_FIELD,
												rules: [
													{
														required: false,
														message: '请输入增量字段',
													},
												],
											})(<TextArea placeholder="请输入增量字段" minRows="2" maxRows="6" />)}
										</FormItem>
										
										<FormItem label="增量限定条件" {...formItemLayout}>            
										  {getFieldDecorator('DATA_ADD_CONDITION', {
												initialValue: data.DATA_ADD_CONDITION,
												rules: [
													{
														required: false,
														message: '请输入增量限定条件',
													},
												],
											})(<TextArea placeholder="请输入增量限定条件" minRows="2" maxRows="6" />)}
										</FormItem>
									</div>
								}
									
								<FormItem  {...formButtom} style={{ display: this.state.setMode ? 'block' : 'none' }}>
									<Button type="primary" onClick={this.handelsubmit}>保存</Button>&nbsp;&nbsp;&nbsp;&nbsp;
									<Button onClick={this.close}>取消</Button>
								</FormItem>
									
							</Form>
						</Card>
					</div>
				</div>
			</div>
		)
	}
}

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