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 BatchSetPop extends React.Component {
	constructor(props) {
		super(props)
		this.state = {
			setMode: this.props.setMode,
			title: this.props.title,
			databaseType: '0',
			data: this.props.data,
			detailMode: this.props.detailMode,
			radioMode: 'select',
			dataSource2: [],
			select2InitialValue: '',
			dataSource3: [],
			select3InitialValue: '',
			dataSource4: [],
			select4InitialValue: '',
		}
	}
	
	componentDidMount() {
		api.system.getBatchLists(1, 999, {'MODULE_TYPE': 3}).then(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,
			})
		})
		api.system.getListRegulation(1, 999, {"DATABASE_TYPE": "0"}).then(res => {
			var dataBaseId2 = []
			for (let data of res.data.list) {
				dataBaseId2.push({name: data.CLEAN_NAME, id: data.id})
			}
			console.log(dataBaseId2)
			this.setState({
				dataSource4: dataBaseId2,
				select4InitialValue: dataBaseId2[0].id
			})
		})
		api.system.odsTableList(1, 999, {"DATABASE_TYPE": "0"}).then(res => {
			var dataBaseId = []
			for (let data of res.data) {
				dataBaseId.push({name: data.TABLE_NAME, id: data.id})
			}
			this.setState({
				dataSource3: dataBaseId,
				select3InitialValue: 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)
			}
		})
	}
	handelConnectTest = () => {
		
	}
	handleSizeChange = e => {
	  this.setState({
			radioMode: e.target.value,
			select2InitialValue: ''
		})
	}
	
	render() {
		const { getFieldDecorator, getFieldsError, getFieldError, isFieldTouched } = this.props.form
		const { data, dataSource2, select2InitialValue, dataSource3, select3InitialValue, dataSource4, select4InitialValue, 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.BATCH_ID ? data.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.BATCH_NAME ? data.BATCH_NAME : '',
											rules: [
												{
													required: true,
													message: '请输入批次名',
												},
											],
										})
										(<Input placeholder="请输入批次名" />)
									}
								</FormItem>
								
								<FormItem label="转换对象表" {...formItemLayout}>
									{
										getFieldDecorator('ODS_TABLE_ID', {
											initialValue: data.odsTableDo ? data.odsTableDo.id : select3InitialValue,
											rules: [
												{
													required: true,
													message: '请输入评估对象表',
												},
											],
										})
										(<Select
											showSearch
											optionFilterProp="children"
											filterOption={(input, option) =>
												option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
											}
										>
											{dataSource3.map((data) => (
												<option value={data.id}>{data.name}</option>
											))}
										</Select>)
									}
								</FormItem>
								
								<FormItem label="清洗业务类型" {...formItemLayout}>
									{
										getFieldDecorator('CLEAN_BUSINESS_TYPE', {
											initialValue: data.CLEAN_BUSINESS_TYPE ? data.CLEAN_BUSINESS_TYPE + '' : '1',
											rules: [
												{
													required: false,
													message: 'Please select your habitual residence!'
												},
											],
										})(<Select>
											<Option value="1">公民类型</Option>
											<Option value="2">法人类型</Option>
											<Option value="3">舆情类型</Option>
											<Option value="4">其它类型</Option>
										</Select>)
									}
								</FormItem>
								
								<FormItem label="转换规则" {...formItemLayout}>
									{
										getFieldDecorator('CLEAN_ID', {
											initialValue: data.cleanAndWarehousingDo ? data.cleanAndWarehousingDo.id : select4InitialValue,
											rules: [
												{
													required: false,
													message: 'Please select your habitual residence!'
												},
											],
										})(<Select
											showSearch
											optionFilterProp="children"
											filterOption={(input, option) =>
												option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
											}
										>
											{dataSource4.map((data) => (
												<option value={data.id}>{data.name}</option>
											))}
										</Select>)
									}
								</FormItem>
								
								<FormItem label="所需传参" {...formItemLayout}>
									{
										getFieldDecorator('TRANS_PARAM', {
											initialValue: data.TRANS_PARAM,
											rules: [
												{
													required: false,
													message: '请输入所需传参',
												},
											],
										})
										(<Input placeholder="请输入所需传参" />)
									}
								</FormItem>
								
								<FormItem label="描述" {...formItemLayout}>
									{
										getFieldDecorator('RESULT_DESCRIBE', {
											initialValue: data.RESULT_DESCRIBE,
											rules: [
												{
													required: false,
													message: '请输入描述',
												},
											],
										})
										(<Input placeholder="请输入描述" />)
									}
								</FormItem>
								
								<div style={{ display: !this.state.detailMode ? 'block' : 'none' }}>
									<FormItem label="运行状态" {...formItemLayout}>
										{
											getFieldDecorator('STATUS', {
												initialValue: data.STATUS ? data.STATUS : '0',
												rules: [
													{
														required: false,
														message: 'Please select your habitual residence!'
													},
												],
											})(<Select>
												<option value="0">未运行</option>
												<option value="1">正运行</option>
												<option value="2">已完成</option>
											</Select>)
										}
									</FormItem>
								
									<FormItem label="运行结果" {...formItemLayout}>
										{
											getFieldDecorator('RESULT', {
												initialValue: data.RESULT ? data.RESULT : '0',
												rules: [
													{
														required: false,
														message: 'Please select your habitual residence!'
													},
												],
											})(<Select>
												<option value="0">未有结果</option>
												<option value="1">正常</option>
												<option value="2">不正常</option>
												<option value="3">严重不正常</option>
											</Select>)
										}
									</FormItem>
								</div>
								
								<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: 'BatchSetPop' })(BatchSetPop);