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 TranBatchPop extends React.Component {
	constructor(props) {
		super(props)
		this.state = {
			dataSource: [],
			dataSource1: [],
			select1InitialValue: '',
			selectedRowKeys: [], 
			pagination: {},
			loading: false,
			title: this.props.title,
			reportUrl: '#',
			searchValues: {"DATABASE_TYPE": "0"}
		}
	}
	componentDidMount() {
		// api.system.getListTranBatch(1, 999, this.state.searchValues).then(res => {
		// 	const pagination = { ...this.state.pagination }
		// 	pagination.current = 1
		// 	pagination.total = res.data.total
		// 	 for (let data of res.data.list) {
		// 	 	data.odsQualityDo.REGULATION_TYPE = ['SQL任务', 'SHELL任务', '其他任务'][data.odsQualityDo.REGULATION_TYPE]
		// 	 }
		// 	this.setState({
		// 		dataSource: res.data.list,
		// 		pagination
		// 	})
		// })
		api.system.getBatchLists(1, 999, {"MODULE_TYPE": 3}).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 = []
		for (let data of this.state.dataSource) {
			selectArray.push(data.BATCH_ID)
		}
		if(selectArray.length == 0){
			message.warning({
				top: 500,
			
				content:'请选择批次'
			  });
		}else{
		api.system.executeTranBatch(selectArray).then(res => {
			console.log(res)
		})
		this.props.onPopClose()
		this.props.onPopzh(this.state.batchSelect)}
	}
	handelConnectTest = () => {
		
	}
	selectChange = (e) => {
		console.log(e)
		this.setState({
			batchSelect: e.split('-')[0],
			reportUrl: e.split('-')[1]
		})
		api.system.getListTranBatch(1, 999, {"BATCH_ID": e.split('-')[0]}).then(res => {
			const pagination = { ...this.state.pagination }
			pagination.current = 1
			pagination.total = res.data.total
			console.log(res.data)
			// for (let data of res.data.list) {
			// 	data.odsQualityDo.REGULATION_TYPE = ['SQL任务', 'SHELL任务', '其他任务'][data.odsQualityDo.REGULATION_TYPE]
			// }
			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.getListTranBatch( 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: 'BATCH_NAME',
				key: 'BATCH_NAME'
			},
			{
				title: '转换对象表',
				dataIndex: 'cleanAndWarehousingDo.CLEAN_NAME',
				key: 'cleanAndWarehousingDo.CLEAN_NAME'
			},
			{
				title: '转换规则',
				dataIndex: 'odsTableDo.TABLE_NAME_CN',
				key: 'odsTableDo.TABLE_NAME_CN'
			}
		]
    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}>
							{/* <Button type="primary" onClick={this.start} disabled={!hasSelected} loading={loading}>
								重置选择
							</Button>
							<span style={{ marginLeft: 8 }}>
								{hasSelected ? `已选择 ${selectedRowKeys.length} 条数据` : ''}
							</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
								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>
						</Card>
					</div>
				</div>
			</div>
		)
	}
}

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