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: 6 },
    wrapperCol: { span: 18, offset: 0 },
  };
  const formButtom={
    wrapperCol: { span: 12, offset: 6 }
  }
const residences=["baijing","hunian","guangxi"];

class MapperSetPop extends React.Component {
	constructor(props) {
		super(props)
		this.state = {
			setMode: this.props.setMode,
			title: this.props.title,
			databaseType: '0',
			data: this.props.data,
			dataSource1: [],
			dataSource2: [],
			dataSource3: [],
			select1InitialValue: '',
			select2InitialValue: '',
			select3InitialValue: ''
		}
	}
	
	// 页面加载函数
	componentDidMount() {
		api.system.getListStdcodeType(1, 999, {"DATABASE_TYPE": "0"}).then(res => {
			var dataBaseId = []
			for (let data of res.data.list) {
				dataBaseId.push({name: data.TYPE_NAME, id: data.TYPE_ID})
			}
			this.setState({
				dataSource1: dataBaseId,
				select1InitialValue: dataBaseId[0].id
			})
		})
		api.system.getListStdcode(1, 999, {"TYPE_ID": this.state.data.sysStandardCode ? this.state.data.sysStandardCode.codeType.type_ID : ""}).then(res => {
			var dataBaseId = []
			for (let data of res.data.list) {
				dataBaseId.push({name: data.STANDARD_CODE, id: data.id})
			}
			this.setState({
				dataSource2: dataBaseId,
				select2InitialValue: dataBaseId[0].id
			})
		})
		api.system.odsTableList({'dtName': ''}).then(res => {
			var dataBaseId = []
			for (let data of res.data.list) {
				dataBaseId.push({tableName: data.tableName, tableNameCn: data.tableNameCn, tableId: data.tableId})
			}
			this.setState({
				dataSource3: dataBaseId,
				select3InitialValue: dataBaseId[0].id
			})
		})
	}
	// 联动选择
	handelSelect = (id) => {
		api.system.getListStdcode(1, 999, {"TYPE_ID": id}).then(res => {
			var dataBaseId = []
			for (let data of res.data.list) {
				dataBaseId.push({name: data.STANDARD_CODE, id: data.id})
			}
			this.setState({
				dataSource2: dataBaseId,
				select2InitialValue: dataBaseId[0].id
			})
		})
	}
	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 = () => {
		
	}
	changeValues = (rule, value, callback)=> {
		const { setFieldsValue } = this.props.form
		let newArr
		if (value.length > 1){
			newArr = [].concat(value.slice(0, 0), value.slice(-1) )
			setFieldsValue({
				"SOURCE_TABLE": newArr ,
			})
				callback('不支持多选')
		} else {
			newArr = value
			callback()
		}
	}
	selectChange = (e) => {
		// console.log(e)
		api.system.odsTableList({'dtName': e}).then(res => {
			var dataBaseId = []
			for (let data of res.data.list) {
				dataBaseId.push({tableName: data.tableName, tableNameCn: data.tableNameCn, tableId: data.tableId})
			}
			this.setState({
				dataSource3: dataBaseId,
				select3InitialValue: dataBaseId[0].id
			})
		})
	}
	
	render() {
		const { getFieldDecorator, getFieldsError, getFieldError, isFieldTouched } = this.props.form
		const { data, dataSource1, dataSource2, dataSource3, select1InitialValue, select2InitialValue, select3InitialValue } = 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="标准码类型"
									{...formTailLayout}
									style={{ display: 'inline-block', width: 'calc( 50% - 12px )' }}
								>
									{
										getFieldDecorator('TYPE_ID', {
											initialValue: data.sysStandardCode ? data.sysStandardCode.codeType.TYPE_NAME : select1InitialValue,
											rules: [
												{
													required: false,
													message: 'Please select your habitual residence!'
												},
											],
										})(<Select onChange={this.handelSelect}>
											{dataSource1.map((data) => (
												<option value={data.id}>{data.name}</option>
											))}
										</Select>)
									}
								</FormItem>
								
								<FormItem
									label="标准码"
									{...formTailLayout}
									style={{ display: 'inline-block', width: 'calc( 50% - 12px )' }}
								>
									{
										getFieldDecorator('STANDARD_CODE_ID', {
											initialValue: data.STANDARD_CODE ? data.STANDARD_CODE : select2InitialValue,
											rules: [
												{
													required: false,
													message: 'Please select your habitual residence!'
												},
											],
										})(<Select>
												{dataSource2.map((data) => (
													<option value={data.id}>{data.name}</option>
												))}
										</Select>)
									}
								</FormItem>
								
								<FormItem label="来源表" {...formItemLayout}>
									{
										getFieldDecorator('SOURCE_TABLE', {
											initialValue: data.SOURCE_TABLE ? data.SOURCE_TABLE : select3InitialValue,
											rules: [
												{
													required: false,
													message: '请输入来源表',
												},
											],
										})
										(<Select
											showSearch
											allowClear
											onSearch={this.selectChange}
											optionFilterProp="children"
											filterOption={(input, option) =>
												option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
											}
										>
												{dataSource3.map((data) => (
													<Select.Option value={data.tableName}>{data.tableName + '-' + data.tableNameCn}</Select.Option>
												))}
										</Select>)
									}
								</FormItem>
									
								<FormItem label="来源字段" {...formItemLayout}>
									{
										getFieldDecorator('SOURCE_COLUMN', {
											initialValue: data.SOURCE_COLUMN,
											rules: [
												{
													required: false,
													message: '请输入来源字段',
												},
											],
										})
										(<Input placeholder="请输入来源字段" />)
									}
								</FormItem>
								
								<FormItem label="来源字段值" {...formItemLayout}>
									{
										getFieldDecorator('SOURCE_CODE', {
											initialValue: data.SOURCE_CODE,
											rules: [
												{
													required: false,
													message: '请输入来源字段值',
												},
											],
										})
										(<Input placeholder="请输入来源字段值" />)
									}
								</FormItem>
								
								<FormItem label="组织机构" {...formItemLayout}>
									{
										getFieldDecorator('ORGANIZATION', {
											initialValue: data.ORGANIZATION,
											rules: [
												{
													required: false,
													message: '请输入组织机构',
												},
											],
										})
										(<Input placeholder="请输入组织机构" />)
									}
								</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: 'MapperSetPop' })(MapperSetPop);