import React, { Component } 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, Table, Popconfirm, Divider, Upload, Progress } from 'antd';
import TagGalaPop from '../popComponents/TagGalaPop'
import echarts from 'echarts';

const FormItem=Form.Item;
const TextArea=Input.TextArea;

const formItemLayout = {
	labelCol: { span: 8 },
	wrapperCol: { span: 16 },
}
const formTailLayout = {
	labelCol: { span: 4 },
	wrapperCol: { span: 12, offset: 4 },
}
const formButtom={
	wrapperCol: { span: 12, offset: 6 }
}
const residences=["baijing","hunian","guangxi"];

class ecTagGala extends Component {
	constructor(props) {
			super(props)
			this.state = {
				data: [],
				dataSource: [],
				popMode: false,
				popTitle: '',
				batchNameList: [],
				selectInitialValue: '',
				loading: false,
				pagination1: {},
				pagination2: {},
				searchValues: {"gmsfzh": "", "xm": ""}
			}
	}

	// 页面加载函数
	componentDidMount() {
		api.system.getListTagGala(1, 10, this.state.searchValues).then(res => {
			const pagination1 = { ...this.state.pagination1 }
			pagination1.total = res.data.total
			this.setState({
				data: res.data.data.list,
				pagination1
			})
		})
	}
	// 选择一条数据
	sourceDetailSet = (gmsfzh, xm) => {
		api.system.getListCitizenTagGala(1, 999, {'gmsfzh': gmsfzh}).then(res => {
			this.setState({
				popMode: true,
				popTitle: xm,
				dataSource: res.data.list
			})
		})
	}
	// 关闭弹窗
	onPopClose = () => {
		this.setState({
			popMode: false
		})
	}
	// 搜索
	search = () => {
		this.props.form.validateFields((err, values)=>{
			this.setState({
				searchValues: values
			})
			api.system.getListTagGala(1, 10, values).then(res => {
				const pagination1 = { ...this.state.pagination1 }
				pagination1.total = res.data.total
				this.setState({
					data: res.data.list,
					pagination1
				})
			})
		})
	}
	// 点击翻页
	handleTableChange = pagination1 => {
		const pager = { ...this.state.pagination1 }
		pager.current = pagination1.current
		this.setState({
			pagination1: pager,
		})
		api.system.getListTagGala( pagination1.current, pagination1.pageSize, this.state.searchValues).then(res => {
			const pagination1 = { ...this.state.pagination1 }
			this.setState({
				data: res.data.list,
        pagination1
			})
		})
	}
		
	render() { 
		const { getFieldDecorator, getFieldsError, getFieldError, isFieldTouched } = this.props.form
		const { data, dataSource, pagination1, pagination2 } = this.state
		// 点击展开子表格
		// var dataExpand
		// const expandedRowRender = (gmsfzh) => {
		// 	api.system.getListCitizenTagGala(1, 10, {"gmsfzh": gmsfzh}).then(res => {
		// 		dataExpand = res.data.list
		// 		const pagination2 = { ...this.state.pagination2 }
		// 		pagination2.total = res.data.total
		// 		this.setState({
		// 			// dataSource: res.data.list,
		// 		 	pagination2
		// 		})
		// 	})
		// 	const columns = [
		// 		{ title: '标签名称', dataIndex: 'labelName', key: 'labelName' },
		// 		{ title: '标签值', dataIndex: 'labelValue', key: 'labelValue' },
		// 		{ title: '标签描述', dataIndex: 'labelDesc', key: 'labelDesc' }
		// 	]
		// 	return <Table columns={columns} dataSource={dataExpand} pagination={pagination2} />
		// }
		const columns = [
			{
				title: '身份证',
				dataIndex: 'gmsfzh',
				key: 'gmsfzh',
				width: '200px'
			},
			{
				title: '姓名',
				dataIndex: 'xm',
				key: 'xm',
				width: '200px'
			},
			{
				title: '标签',
				dataIndex: 'action',
				key: 'action',
				render: (text, record) => (<Button icon='eye' type='default' size='small' onClick={() => this.sourceDetailSet(record.gmsfzh, record.xm)}>查看标签</Button>)
			}
		]
		
		return ( 
			<div>
				<div>
					<Card title="标签信息">
						
						<FormItem label="身份证" {...formItemLayout}
							style={{ display: 'inline-block', width: 'calc( 40% - 12px )' }}
						>
							{
								getFieldDecorator('gmsfzh', {
									initialValue: null,
									rules: [
										{
											required: false,
											message: '请输入身份证',
										},
									],
								})(<Input placeholder='请输入身份证'/>)
							}
						</FormItem>
						
						<FormItem label="姓名" {...formItemLayout}
							style={{ display: 'inline-block', width: 'calc( 40% - 12px )' }}
						>
							{
								getFieldDecorator('xm', {
									initialValue: null,
									rules: [
										{
											required: false,
											message: '请输入姓名',
										},
									],
								})(<Input placeholder='请输入姓名'/>)
							}
						</FormItem>
						
						<FormItem
							style={{ display: 'inline-block', width: 'calc(10% - 12px)', marginLeft: '10px' }}
						>
							<Button icon='search' onClick={this.search} type='primary'>搜索</Button>
						</FormItem>
						
						<Table
							className="components-table-demo-nested"
							columns={columns}
							dataSource={data}
							onChange={this.handleTableChange}
							pagination={pagination1}
						/>
						
						{this.state.popMode &&
							<TagGalaPop
								onPopClose={this.onPopClose}
								dataSource={dataSource}
								title={this.state.popTitle}
							></TagGalaPop>
						}
						
					</Card>
				</div>
			</div>
		)
	}
}
export default Form.create({ name: 'ecTagGala' })(ecTagGala);
//export default EcTashAdd;