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, Table } 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: 24, offset: 12 }
  }
const residences=["baijing","hunian","guangxi"];

class DataSourcePop extends React.Component {
	constructor(props) {
		super(props)
		this.state = {
			dataSource: [],
			dataSource1: [],
			select1InitialValue: '',
			selectedRowKeys: [], 
			pagination: {},
			loading: false,
			title: this.props.title,
			searchValues: {"DATABASE_TYPE": "0"},
			reportUrl: '#',
			batchSelect: ''
		}
	}
	componentDidMount() {
		// api.system.getListTash(1, 999, this.state.searchValues).then(res => {
		// 	const pagination = { ...this.state.pagination }
		// 	pagination.current = 1
		// 	pagination.total = res.data.total
		// 	this.setState({
		// 		dataSource: res.data.list,
		// 		pagination
		// 	})
		// })
		api.system.getBatchLists(1, 999, {"MODULE_TYPE": 1}).then(res => {
			const batchNameList = []
			 for (let data of res.data.list) {
			 	batchNameList.push({name: data.BATCH_NAME, id: data.BATCH_ID, url: data.RESULT_REPORT_URL})
		}
			this.setState({
				dataSource1: batchNameList,
				select1InitialValue: batchNameList[0].id
			})
		})
	}
	close = () => {
		this.props.onPopClose()
	}
	handelsubmit = () => {
		const selectArray = []
		console.log(selectArray)
		for (let data of this.state.dataSource) {
			selectArray.push(data.BATCH_ID)
		}
		console.log(selectArray)
		if(selectArray.length == 0){
			message.warning({
				top: 500,
			
				content:'请选择批次'
			  });
		}else{
		api.system.executeTashDataSource(selectArray).then(res => {
			console.log(res)
		})
		this.props.onPopClose()
		this.props.onPopgj(this.state.batchSelect)}
	}
	handelConnectTest = () => {
		
	}
	selectChange = (e) => {
		console.log(e)
		this.setState({
			batchSelect: e.split('-')[0],
			reportUrl: e.split('-')[1]
		})
		api.system.getListTash(1, 999, {"BATCH_ID": e.split('-')[0]}).then(res => {
			console.log(res)
			const pagination = { ...this.state.pagination }
			pagination.current = 1
			pagination.total = res.data.total
			this.setState({
				dataSource: res.data.list,
				pagination
			})
		})
	}
	// reload选项
	start = () => {
		this.setState({ loading: true })
		// ajax request after empty completing
		setTimeout(() => {
			this.setState({
				selectedRowKeys: [],
				loading: false,
			})
		}, 1000)
	}
	// 点击选择一行
  onSelectChange = selectedRowKeys => {
    console.log('selectedRowKeys changed: ', selectedRowKeys)
    this.setState({ selectedRowKeys })
  }
	// 点击翻页
	handleTableChange = pagination => {
		const pager = { ...this.state.pagination }
		pager.current = pagination.current
		this.setState({
			pagination: pager,
		})
		api.system.getListTash( pagination.current, pagination.pageSize, this.state.searchValues).then(res => {
			const pagination = { ...this.state.pagination }
			this.setState({
				dataSource: res.data.list,
        pagination
			})
		})
	}
	
	render() {
		const { getFieldDecorator, getFieldsError, getFieldError, isFieldTouched } = this.props.form
		const { reportUrl, dataSource1, select1InitialValue } = this.state
		const columns = [
			{
				title: '任务名称',
				dataIndex: 'TASK_NAME',
				key: 'TASK_NAME'
			},
			{
				title: '数据源名称',
				dataIndex: 'dataBaseDo.datatbase_NAME',
				key: 'dataBaseDo.datatbase_NAME'
			},
			{
				title: '数据源类型',
				dataIndex: 'dataBaseDo.datasource_TYPE',
				key: 'datasource_TYPE',
				render (datasource_TYPE) {
					let config = {
						'0': '数据库',
						'1': 'API',
						'2': '文件',
						
					}
					return config[datasource_TYPE]
				}
			}
		]
    const { loading, selectedRowKeys } = this.state
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
    }
    const hasSelected = selectedRowKeys.length > 0
		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>
								{/* <Button type="primary" onClick={this.start} disabled={!hasSelected} loading={loading}>
									重置选择
								</Button>
								<span style={{ marginLeft: 8 }}>
									{hasSelected ? `Selected ${selectedRowKeys.length} items` : ''}
								</span> */}
							<Form layout='horizontal'>
							
								<FormItem
									label="批次" {...formItemLayout}
									style = {{ display: 'inline-block', width: 'calc( 70% - 12px )' }}
								>
									{
										getFieldDecorator('BATCH_ID', {
											initialValue: undefined,
											rules: [
												{
													required: false,
													message: '请选择批次',
												},
											],
										})(<Select
											onChange={this.selectChange}
											placeholder='请选择批次' 
										>
												{dataSource1.map((data) => (
													<option value={`${data.id}-${data.url}`}>{data.name}</option>
												))}
											</Select>)
									}
								</FormItem>
								
								<a
									href={reportUrl} {...formButtom} type='dashed'
									style = {{
										display: this.state.batchSelect ? 'inline-block' : 'none',
										width: 'calc( 30% - 12px )',
										lineHeight: '40px',
										color: '#0066cc',
									}}
								>下载执行报告</a>
								
							</Form>
								<Table
									// rowSelection={rowSelection}
									loading={this.state.loading}
									onChange={this.handleTableChange}
									columns={columns}
									pagination={false}
									dataSource={this.state.dataSource}
								></Table>
								<FormItem {...formButtom}>
									<Button type="primary" onClick={this.handelsubmit} loading={loading}>
										提交该批次
									</Button>&nbsp;&nbsp;&nbsp;&nbsp;
									<Button type='danger' onClick={this.close}>取消</Button>
								</FormItem>
							</Form>
						</Card>
					</div>
				</div>
			</div>
		)
	}
}

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