import React from 'react';
import {
  Form,
  Button,
  Spin,
  message,
  Table,
  Popconfirm,
  Modal,
  AutoComplete,
  Input,
  Select
} from "antd";
import ajax from 'jquery/src/ajax/xhr.js';
import $ from 'jquery/src/ajax';
import {getfllowSituation,getcustomerStatue} from '@/tools.js';
import BusinessDetail from './businessDetail.jsx';

const Business = React.createClass({
	getInitialState(){
		return{
			selectedRowKeys:[],
			bVisible: false,
			loading:false,
			dataBusiness:[],
			followData:{},
			paginationt: {
				defaultCurrent: 1,
				defaultPageSize: 10,
				showQuickJumper: true,
				pageSize: 10,
				onChange: function(page) {
					this.BusinessList(page, false);
				}.bind(this),
				showTotal: function(total) {
					return '共' + total + '条数据';
				}
			},
			businessIntentionList: [{
				title: '意向时间',
				dataIndex: 'createTime',
				key: 'createTime'
			}, {
				title: '客户名称',
				dataIndex: 'identifyName',
				key: 'identifyName'
			}, {
				title: '业务名',
				dataIndex: 'businessName',
				key: 'businessName'
			}, {
				title: '营销员',
				dataIndex: 'adminName',
				key: 'adminName'
			}, {
				title: '业务意向进度',
				dataIndex: 'followSituation',
				key: 'followSituation',
				render: text => { return getfllowSituation(text) }
			}, {
				title: '客户状态',
				dataIndex: 'customerStatus',
				key: 'customerStatus',
				render: text => { return getcustomerStatue(text) }
			}, {
				title: '操作',
				dataIndex: 'ooo',
				key: 'ooo',
				render: (text, record) => { 
					const dataSources = this.state.customerArr || [];
					const options = dataSources.map(group => (
						<Select.Option key={group.id} value={group.name}>
						{group.name}
						</Select.Option>
					));
					return (
            <div className="control">
              <Button
                onClick={e => {
                  this.businessIntentionDetails(record);
                }}
              >
                查看
              </Button>
              <AutoComplete
                className="certain-category-search"
                dropdownClassName="certain-category-search-dropdown"
                dropdownMatchSelectWidth={false}
                dropdownStyle={{ width: 120 }}
                style={{
                  width: "120px",
                  marginLeft: 10,
                  transition: "all .5s",
                  display:
                    record.followSituation == 5
                      ? "inline-block"
                      : "none"
                }}
                dataSource={options}
                placeholder="输入转交人姓名"
                onChange={this.httpChange}
                filterOption={true}
                onBlur={this.blurChange}
                onSelect={this.selectAuto}
              >
                <Input />
              </AutoComplete>
              <Button
                style={{ marginLeft: 10 }}
                onClick={e => {
                  this.changeBusiness(record);
                }}
                type={"primary"}
                style={{
                  marginLeft: 10,
                  transition: "all .5s",
                  display:
                    record.followSituation == 5
                      ? "inline-block"
                      : "none"
                }}
              >
                转交业务
              </Button>
            </div>
          ); }
			}],
		}
	},
	//指定转交人自动补全
	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
		})
	},
	businessIntentionDetails(record){
		this.setState({
			followData: record,
			businessModul:true
		})
	},
	//业务意向
	BusinessList(pageNo) {
		this.setState({
			loading: true
		});
		$.ajax({
			method: "post",
			dataType: "json",
			crossDomain: false,
			url: globalConfig.context + '/api/admin/customer/listBusiness',
			data: {
				pageNo: pageNo || 1,
				pageSize: this.state.paginationt.pageSize,
				uid: this.props.data.id
			},
			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];
						theArr.push({
							key: i,
							businessId: thisdata.businessId,
							businessProjectId:thisdata.businessProjectId,
							businessName: thisdata.businessName,
							identifyName: thisdata.identifyName,
							followSituation: thisdata.followSituation,
							customerStatus: thisdata.customerStatus,
							adminName: thisdata.adminName,
							createTime: thisdata.createTime
						});
					};
					this.state.paginationt.current = data.data.pageNo;
					this.state.paginationt.total = data.data.totalCount;
				};
				if(data.data&&data.data.list&&!data.data.list.length){
					this.state.paginationt.current=0
					this.state.paginationt.total=0
				}
				this.setState({
					dataBusiness: theArr,
					paginationt: this.state.paginationt||[]
				});
				console.log(this.state.dataBusiness);
				
			}.bind(this),
		}).always(function() {
			this.setState({
				loading: false
			});
			window.setTimeout(() => {
			let dom = document.querySelectorAll(".control");
			for (let i = 0; i < dom.length; i++) {
			document.querySelectorAll(".control")[i].parentNode.style.width =
				"300px";
			}
		}, 100);
		}.bind(this));
	},
	componentWillMount(){
		this.BusinessList();
		console.log(this.state.dataBusiness);
		
	},
	detailsModal(){
		this.props.closeDetail(false, false)
	},
	componentWillReceiveProps(nextProps) {
		if(nextProps.data.id&&nextProps.businessState){
			this.BusinessList();
		}
		this.setState({
			businessModul:false
		})
	},
	changeBusiness(e) {
		this.setState({
			loading: true
		});
		$.ajax({
			method: "post",
			dataType: "json",
			crossDomain: false,
			url: globalConfig.context + '/api/admin/customer/privateBusinessTransfer',
			data: {
				inputId: this.state.theTypes,
				pid: e.businessProjectId,
				uid: this.props.data.id
			},
			success: function(data) {
				if(data.error.length || data.data.list == "") {
					if(data.error && data.error.length) {
						message.warning(data.error[0].message);
					};
				} else {
						message.success("转交成功！")
						this.props.closeDesc(false,true)
						this.props.closeDetail()
						this.BusinessList()
						this.setState({
							selectedRowKeys: []
						})
				}
			}.bind(this),
		}).always(function() {
			this.setState({
				loading: false
			});
		}.bind(this));
	},
	onSelectChange(selectedRowKeys) {
		this.setState({
			selectedRowKeys,
			businessModul: false
		})
	},
	render(){
		console.log("数组",this.state.dataBusiness);
		
		return (
			<div className="clearfix">
				<Spin spinning={this.state.loading}>
				<Table
					pagination={this.state.paginationt}
					columns={this.state.businessIntentionList}
					dataSource={this.state.dataBusiness}
				/>
				</Spin>
				<BusinessDetail
					ids={this.props.data.id}
					data={this.state.followData}
					businessModul={this.state.businessModul}
				/>
			</div>
    	);
	}
})

export default Business;