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 TagGalaPop extends React.Component {
	constructor(props) {
		super(props)
		this.state = {
			pagination: {},
			// dataSource: [],
			// dataSource1: [],
			// select1InitialValue: '',
			// selectedRowKeys: [],
			// loading: false,
			title: this.props.title,
			// reportUrl: '#',
			// searchValues: {"DATABASE_TYPE": "0"}
		}
	}
	componentDidMount() {
		// api.system.getListTagBatch(1, 999, this.state.searchValues).then(res => {
		// 	this.setState({
		// 		dataSource: res.data.list,
		// 	})
		// })
		// api.system.getBatchLists(1, 999, {"MODULE_TYPE": 4}).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)
		}
		console.log(selectArray)
		if(selectArray.length == 0){
			message.warning({
				top: 500,
			
				content:'请选择批次'
			  });
		}else{
		api.system.executeTagBatch(selectArray).then(res => {
			console.log(res)
		})
		this.props.onPopClose()
		this.props.onPopbt(this.state.batchSelect)}
	}
	handelConnectTest = () => {
		
	}
	selectChange = (e) => {
		this.setState({
			batchSelect: e.split('-')[0],
			reportUrl: e.split('-')[1]
		})
		api.system.getListTagBatch(1, 999, {"BATCH_ID": e.split('-')[0]}).then(res => {
			this.setState({
				dataSource: res.data.list,
			})
		})
	}
	// 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.getListTagBatch( pagination.current, pagination.pageSize, this.state.searchValues).then(res => {
	// 		const pagination = { ...this.state.pagination }
	// 		pagination.total = res.data.total
	// 		this.setState({
	// 			dataSource: res.data.list,
 //        pagination
	// 		})
	// 	})
	// }
	
	render() {
		const { getFieldDecorator, getFieldsError, getFieldError, isFieldTouched } = this.props.form
		const { pagination } = this.state
		const columns = [
			{
				title: '标签名称',
				dataIndex: 'labelName',
				key: 'labelName',
				width: '200px'
			},
			{
				title: '标签值',
				dataIndex: 'labelValue',
				key: 'labelValue',
				width: '200px'
			},
			{
				title: '标签描述',
				dataIndex: 'labelDesc',
				key: 'labelDesc',
				width: '200px'
			}
		]
    const { dataSource } = this.props
		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 + '：标签信息'}>
							<Table
								loading={this.state.loading}
								columns={columns}
								pagination={false}
								dataSource={dataSource}
								scroll={{ y: 500 }}
							></Table>
						</Card>
					</div>
				</div>
			</div>
		)
	}
}

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