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 ecHighQuality 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() {
		api.system.getListHighQuality( 1, 10, {'gmsfzh': null, 'yzdj': null}).then(res => {
			const pagination = { ...this.state.pagination }
			pagination.current = 1
			pagination.total = res.data.total
			this.setState({
				dataSource: res.data.list,
				pagination
			})
		})
	}
	// 搜索
	search = () => {
		this.props.form.validateFields((err, values)=>{
			this.setState({
				searchValues: values
			})
			api.system.getListHighQuality(1, 10, values).then(res => {
				const pagination = { ...this.state.pagination }
				pagination.current = 1
				pagination.total = res.data.total
				this.setState({
					dataSource: res.data.list,
					pagination
				})
			})
		})
	}
	// 选择上传文件
	handleUpload = () => {
		this.setState({
			uploading: true,
		})
		setTimeout(() => {
			this.setState({
				uploading: false,
			})
			message.success('上传成功！')
		}, 5000)
	}
	// 匹配公民数据库
	showProgress = () => {
		this.setState({
			percentMode: true
		})
		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
			})
		})
	}
	test = () => {
		api.system.getListHighQuality(1, 10, {'gmsfzh': null, 'yzdj': null}).then(res => {
			console.log(res)
		})
	}
	test1 = () => {
		api.system.getListPayAlarm(1, 10, {'hylx': null, 'zzjgdm': null}).then(res => {
			console.log(res)
		})
	}
	test2 = () => {
		api.system.getListPayAlarmChart('B1104736HTE0HC43Q1').then(res => {
			console.log(res)
		})
	}
	// 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.getListHighQuality( 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: 'gmsfzh',
				key: 'gmsfzh'
			},
			{
				title: '姓名',
				dataIndex: 'xm',
				key: 'xm'
			},
			{
				title: '学历',
				dataIndex: 'xl',
				key: 'xl'
			},
			{
				title: '学历评分',
				dataIndex: 'xlPf',
				key: 'xlPf'
			},
			{
				title: '收入',
				dataIndex: 'sr',
				key: 'sr'
			},
			{
				title: '收入评分',
				dataIndex: 'srPf',
				key: 'srPf'
			},
			{
				title: '资产',
				dataIndex: 'zc',
				key: 'zc'
			},
			{
				title: '资产评分',
				dataIndex: 'zcPf',
				key: 'zcPf'
			},
			{
				title: '贷款',
				dataIndex: 'dk',
				key: 'dk'
			},
			{
				title: '贷款评分',
				dataIndex: 'dkPf',
				key: 'dkPf'
			},
			{
				title: '婚姻生育',
				dataIndex: 'hysy',
				key: 'hysy'
			},
			{
				title: '婚姻生育评分',
				dataIndex: 'hysyPf',
				key: 'hysyPf'
			},
			{
				title: '综合评分',
				dataIndex: 'zhpf',
				key: 'zhpf'
			},
			{
				title: '优质等级',
				dataIndex: 'yzdj',
				key: 'yzdj'
			}
		]
    const { loading, selectedRowKeys } = this.state
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
    }
    const hasSelected = selectedRowKeys.length > 0
		return ( 
			<div>
				<div>
					<Card title="信用卡潜在优质客户">
						
						<FormItem label="身份证" {...formItemLayout}
							style={{ display: 'inline-block', width: 'calc( 40% - 12px )' }}
						>
							{
								getFieldDecorator('gmsfzh', {
									rules: [
										{
											required: false,
											message: '请输入身份证',
										},
									],
								})(<Input placeholder='请输入身份证号码'/>)
							}
						</FormItem>
						
						<FormItem label="优质等级" {...formItemLayout}
							style={{ display: 'inline-block', width: 'calc( 40% - 12px )' }}
						>
							{
								getFieldDecorator('yzdj', {
									initialValue: '0',
									rules: [
										{
											required: false,
											message: '请输入优质等级',
										},
									],
								})(<Select style={{ width: '200px' }}>
									<option value='0'>全部</option>
									<option value="1星">1星</option>
									<option value="2星">2星</option>
									<option value="3星">3星</option>
									<option value="4星">4星</option>
									<option value="5星">5星</option>
								</Select>)
							}
						</FormItem>
						
						<FormItem
							style={{ display: 'inline-block', width: 'calc(10% - 12px)' }}
						>
							<Button icon='search' onClick={this.search} type='primary'>搜索</Button>
						</FormItem>
						
						<Table
							pagination={this.state.pagination}
							loading={this.state.loading}
							onChange={this.handleTableChange}
							columns={columns}
							dataSource={this.state.dataSource}
						></Table>
					</Card>
				</div>
			</div>
		)
	}
}
export default Form.create({ name: 'ecHighQuality' })(ecHighQuality);
//export default EcTashAdd;