import React from 'react';
import { Button,Cascader,Input, Select, Spin, Table, message, Form ,AutoComplete} from 'antd';
import ajax from 'jquery/src/ajax/xhr.js';
import $ from 'jquery/src/ajax';

import { citySelect, provinceList } from '@/NewDicProvinceList';
import Detaile from './detail.jsx';

const QueryCustomer = React.createClass({
	loadData(pageNo, apiUrl) {
		this.setState({
			visitModul:false,
			loading: true,
			ispage:pageNo,
			modalVisible:false
		});
		let api=apiUrl?apiUrl:this.props.ApiUrl;
		$.ajax({
			method: "post",
			dataType: "json",
			crossDomain: false,
			url: globalConfig.context + api,
			data: {
				pageNo: pageNo || 1,
				pageSize: this.state.pagination.pageSize,
				name: this.state.nameSearch,
				departmentId: this.state.departmenttSearch,
				aid: this.state.theTypes,
			},
			success: function(data) {
				let theArr = [];
				if(data.error.length || data.data.list == "") {
					if(data.error && data.error.length) {
						message.warning(data.error[0].message);
					};
				} else {
					for(let i = 0; i < data.data.list.length; i++) {
						let thisdata = data.data.list[i];
						let diqu=(thisdata.province==null?"":thisdata.province)+(thisdata.city==null?"":"-"+thisdata.city)+(thisdata.area==null?"":"-"+thisdata.area);
						theArr.push({
							key: i,
							id: thisdata.uid,
							name: thisdata.name,
							adminName: thisdata.adminName,
							informationMaintainer:thisdata.informationMaintainer,
							createTime: thisdata.createTime&&thisdata.createTime.split(' ')[0],
							locationProvince: diqu
						});
					};
					this.state.pagination.current = data.data.pageNo;
				    this.state.pagination.total = data.data.totalCount;
				};
				if(data.data&&data.data.list&&!data.data.list.length){
					this.state.pagination.current=0
					this.state.pagination.total=0
				}
				this.setState({
					dataSource: theArr,
					pagination: this.state.pagination,
					selectedRowKeys:[]
				});
			}.bind(this),
		}).always(function() {
			this.setState({
				loading: false
			});
		}.bind(this));
	},
	//部门
	departmentList() {
		this.setState({
			loading: true
		});
		$.ajax({
			method: "get",
			dataType: "json",
			crossDomain: false,
			url: globalConfig.context + "/api/admin/organization/selectSuperId",
			data: {

			},
			success: function(data) {
				let thedata = data.data;
				let theArr = [];
				if(!thedata) {
					if(data.error && data.error.length) {
						message.warning(data.error[0].message);
					};
					thedata = {};
				} else {
					thedata.map(function(item, index) {
						theArr.push({
							key: index,
							name: item.name,
							id: item.id,
						})
					})
				}
				this.setState({
					departmentArr: theArr,
				})
			}.bind(this),
		}).always(function() {
			this.setState({
				loading: false
			});
		}.bind(this));
	},
	getInitialState(){
		return {
			addressSearch: [],
			dataSource:[],
			loading:false,
			departmentArr: [],
			selectedRowKeys: [],
			selectedRowKey: [],
			selectedRows: [],
			pagination: {
				defaultCurrent: 1,
				defaultPageSize: 10,
				showQuickJumper: true,
				pageSize: 10,
				onChange: function(page) {
					this.loadData(page);
				}.bind(this),
				showTotal: function(total) {
					return '共' + total + '条数据';
				}
			},
			columns: [{
					title: '客户名称',
					dataIndex: 'name',
					key: 'name',
				}, {
					title: '地区',
					dataIndex: 'locationProvince',
					key: 'locationProvince',
				},{
					title: '创建时间',
					dataIndex: 'createTime',
					key: 'createTime',
				}, 
				{
					title: '客户所属人',
					dataIndex: 'adminName',
					key: 'adminName',
				}, 
				{
					title: '资料所属人',
					dataIndex: 'informationMaintainer',
					key: 'informationMaintainer',
				},
				{
					title: '操作',
					dataIndex: 'abc',
					key: 'abc',
					render: (text, record, index) => {
						return <div>
                            <Button onClick={(e) =>{ e.stopPropagation(), this.seeDetail(record)}} type="primary">查看详情</Button>                            							    
                        </div>
					}
				}
			],
		}
	},
	seeDetail(record){
		this.setState({
			data:record,
			visitModul:true
		})
	},
	closeDesc(e) {
		this.state.visitModul = e;
	},
	search() {
		this.loadData();
	},
	reset() {
		this.state.nameSearch='';
		this.state.departmenttSearch=undefined;
		this.state.theTypes='';
		this.state.auto='';
		this.state.provinceSearch=undefined;
		this.state.addressSearch=[];
		this.loadData()
	},
	componentWillReceiveProps(nextProps) {
		
		if(nextProps.ApiUrl!=this.props.ApiUrl) {
			this.state.nameSearch='';
			this.state.provinceSearch=undefined;
			this.state.addressSearch=[];
			this.loadData(null,nextProps.ApiUrl);
		};
	},
	
	componentWillMount() {
		this.departmentList();
		//城市
		let Province = [];
		provinceList.map(function(item) {
			var id = String(item.id)
			Province.push(
				<Select.Option value={id} key={item.name}>{item.name}</Select.Option>
			)
		});
		this.state.Provinces = Province;
		this.loadData();
	},
	//指定转交人自动补全
	supervisor(e){ 
		$.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/admin/customer/listAdminByName",
            data:{
            	adminName:e
            },
            success: function (data) {                	  
				       let thedata=data.data;
				    if (!thedata) {
                    if (data.error && data.error.length) {
                        message.warning(data.error[0].message);
                    };	
                    thedata = {}; 
              }; 
					this.setState({
						customerArr:thedata,	
                    });
				}.bind(this),
			}).always(function () {
            this.setState({
                loading: false
            });
        }.bind(this));  
	},
	//输入转交人输入框失去焦点是判断客户是否存在
	selectAuto(value,options){
		this.setState({
			auto:value
		})
	},
	blurChange(e){
		let theType='';
		let contactLists=this.state.customerArr||[];
			if (e) {
            contactLists.map(function (item) {
                if (item.name == e.toString()) {
                    theType = item.id;
                }
           });     
   	    }
		this.setState({
			theTypes:theType
		})
	},
	//值改变时请求客户名称
	httpChange(e){
		if(e.length>=1){
			this.supervisor(e); 
		}	
		this.setState({
			auto:e
		})
	},
	render(){
		let departmentArr = this.state.departmentArr || [];
		const intentionState=this.props.intentionState;
		const FormItem = Form.Item;
		const rowSelection = {
			selectedRowKeys: this.state.selectedRowKeys,
			onChange: (selectedRowKeys, selectedRows) => {
				this.setState({
					modalVisible:false,
					selectedRows: selectedRows.slice(-1),
					selectedRowKeys: selectedRowKeys.slice(-1)
				});
			},
			onSelect: (recordt, selected, selectedRows) => {
				this.setState({
					modalVisible:false,
					recordt: recordt.id
				})
			},
		};
		const dataSources=this.state.customerArr || [];
		const options = dataSources.map((group) =>
				      <Select.Option key={group.id} value={group.name}>{group.name}</Select.Option>
				     )
		const hasSelected = this.state.selectedRowKeys.length > 0;
		return(
			<div className="user-content" >
                <div className="content-title">                  
                    <span>{!intentionState?'单位客户查询':'个人客户查询'}</span>
                </div>
                <div className="user-search">                    
                    <Input placeholder="客户名称"
                        value={this.state.nameSearch}
                        onChange={(e) => { this.setState({ nameSearch: e.target.value }); }} />    
                   <Select placeholder="选择部门"
                            style={{ width: 150 ,marginRight:'10px',marginLeft:'10px'}}
                            value={this.state.departmenttSearch}
                            onChange={(e) => { this.setState({ departmenttSearch: e }) }}>
                            {
                                departmentArr.map(function (item) {
                                        return <Select.Option key={item.id} >{item.name}</Select.Option>
                                })
                            }
                    </Select>  
                    <AutoComplete
				        className="certain-category-search"
				        dropdownClassName="certain-category-search-dropdown"
				        dropdownMatchSelectWidth={false}
				        dropdownStyle={{ width: 120 }}
				        style={{ width: '120px'}}
				        dataSource={options}
				        placeholder="客户所有人姓名"
				        value={this.state.auto}
				        onChange={this.httpChange}
				        filterOption={true}
				        onBlur={this.blurChange}
				        onSelect={this.selectAuto}
				    >
				        <Input />
				    </AutoComplete>  
                    <Button type="primary" onClick={this.search}>搜索</Button>
                    <Button onClick={this.reset}>重置</Button> 
                </div>  
                <div className="patent-table">
                    <Spin spinning={this.state.loading}>
                        <Table columns={this.state.columns}
                            dataSource={this.state.dataSource}    
                            rowSelection={rowSelection}
                            pagination={this.state.pagination} 
                           />
                    </Spin>
                </div> 
                <Detaile 
                	visitModul={this.state.visitModul}
                	data={this.state.data}
                	detailApi={this.props.detailApi}
                	closeDesc={this.closeDesc}
                />
            </div>    
		)
	}
})
export default QueryCustomer;