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 DataTashSetPop from '../popComponents/DataTashSetPop'

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 ecStuckPerson extends Component {
	constructor(props) {
			super(props)
			this.state = {
				dataSource: [],
				batchNameList: [],
				selectInitialValue: '',
				selectedRowKeys: [], // Check here to configure the default column
				loading: false,
				popShow: true,
				popMode: '',
				popData: {},
				setMode: '',
				pagination: {},
				fileList: [],
				percent: 0,
				percentMode: false,
				resultMode: false,
				uploading: false,
				fileName: '点击右侧按钮上传文件',
				searchValues: {"DATABASE_TYPE": "0"}
			}
	}

	// 页面加载函数
	componentDidMount() {
		
	}
	// 选择上传文件
	handleUpload = () => {
		this.setState({
			uploading: true,
		})
		setTimeout(() => {
			this.setState({
				uploading: false,
			})
			message.success('上传成功！')
		}, 5000)
	}
	// 匹配公民数据库
	showProgress = () => {
		this.setState({
			percentMode: true,
			resultMode: false,
			percent: 0
		})
		const timer = setInterval(() => {
			this.setState({
				percent: this.state.percent + 2
			})
			if (this.state.percent == 100) {
				this.setState({
					resultMode: true
				})
				clearInterval(timer)
			}
		}, 100)
	}
	// 显示匹配结果
	getListHeldcard = () => {
		api.system.getListHeldcard(1, 10, {"DATABASE_TYPE": "0"}).then(res => {
			const pagination = { ...this.state.pagination }
			pagination.current = 1
			pagination.total = res.data.total
			this.setState({
				dataSource: res.data.list,
				pagination,
				percentMode: false,
				percent: 0
			})
		})
	}
	// 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.getListHeldcard( pagination.current, pagination.pageSize, {"DATABASE_TYPE": "0"}).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 { batchNameList, selectInitialValue, uploading, fileList, percent } = this.state
    const props = {
      onRemove: file => {
        this.setState(state => {
          const index = state.fileList.indexOf(file);
          const newFileList = state.fileList.slice();
          newFileList.splice(index, 1);
          return {
            fileList: newFileList,
          }
        })
      },
      beforeUpload: file => {
        this.setState(state => ({
          fileList: [file],
					fileName: file.name
        }))
        return false
      },
      // fileList,
			showUploadList: false
    }
		const columns = [
			{
				title: '补贴发放人员身份证号',
				dataIndex: 'zlksfzh',
				key: 'zlksfzh'
			},
			{
				title: '姓名',
				dataIndex: 'xm',
				key: 'xm'
			},
			{
				title: '最新地址',
				dataIndex: 'zxdz',
				key: 'zxdz'
			},
			{
				title: '曾用地址',
				dataIndex: 'cydz',
				key: 'cydz'
			},
			{
				title: '最新手机',
				dataIndex: 'zxsj',
				key: 'zxsj'
			},
			{
				title: '曾用手机',
				dataIndex: 'cysj',
				key: 'cysj'
			},
			{
				title: '最新固话',
				dataIndex: 'zxgh',
				key: 'zxgh'
			},
			{
				title: '曾用固话',
				dataIndex: 'cygh',
				key: 'cygh'
			},
		]
    const { loading, selectedRowKeys } = this.state
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
    }
    const hasSelected = selectedRowKeys.length > 0
		return ( 
			<div>
				<div>
					<Card title="补贴发放人员分析">
						<FormItem
							label='上传人员名单(可用excel/csv格式)'
							style={{display: 'inline-block', width: '50%'}}
						>
							<div style={{border: '1px dashed skyblue', borderRadius: '5px', color: '#ccc', textAlign: 'center'}}>{this.state.fileName}</div>
						</FormItem>
						<div style={{display: 'inline-block', marginTop: '42px'}}>
							<Divider type="vertical" />
							<Upload {...props}>
								<Button>
									选择
								</Button>
							</Upload>
							<Divider type="vertical" />
							<Button
								type="primary"
								onClick={this.handleUpload}
								disabled={fileList.length === 0}
								loading={uploading}
							>
								{uploading ? '上传中' : '上传'}
							</Button>
						</div>
						<div>
							<Button onClick={this.showProgress}>与公民数据库进行匹配</Button>
							<Divider type="vertical" />
							<Progress
								percent={percent}
								style={{display: this.state.percentMode && !this.state.resultMode ? 'inline-block' : 'none', width: '50%'}}
							></Progress>
							<Button type='primary' onClick={this.getListHeldcard} style={{display: this.state.resultMode ? 'inline-block' : 'none'}}>显示匹配结果</Button>
							<a href='http://114.55.169.84:9701/dataPlatform/ecent/scene/heldcard.xls' target='_blank' style={{display: this.state.resultMode ? 'inline-block' : 'none'}}>下载文件</a>
						</div>
						<Table
							pagination={this.state.pagination}
							loading={this.state.loading}
							onChange={this.handleTableChange}
							columns={columns}
							dataSource={this.state.dataSource}
						></Table>
					</Card>
					{!this.state.popShow &&
						<DataTashSetPop
							title={this.state.popMode}
							onPopClose={this.closePop}
							onAdd={this.addDataSource}
							onUpdate={this.updateDataSource}
							data={this.state.popData}
							setMode={this.state.setMode}
						></DataTashSetPop>
					}
				</div>
			</div>
		)
	}
}
export default Form.create({ name: 'ecStuckPerson' })(ecStuckPerson);
//export default EcTashAdd;