import React from 'react'
import ajax from 'jquery/src/ajax/xhr.js';
import $ from 'jquery/src/ajax';
import {Modal,Form,layout,Radio,Button,Input,Spin,Table,Select,Popconfirm,message} from 'antd';
import {intentionalService,newFollow,customerStatus} from '@/dataDic.js';
import {getCompanyIntention} from '@/tools.js';
const FormItem =Form.Item;
import AddContact from './followDetail/addContact.jsx';
import BusName from './followDetail/businessName.jsx';

const FollowDetail = React.createClass({
	getInitialState(){
		return{
			visitModul:false,
			loading:false,
			data:[],
			businessName:'',
			projectName:'',
			busModul:false,
			intentionList:[{
					title: '业务名称',
					dataIndex: 'businessGlossoryId',
					width:120,
					key: 'businessGlossoryId',
					render: (text, record, index) => {
						return (
							<div>
								{!record.id?<Select  placeholder="选择业务名称"  value={record.businessGlossoryId}  onChange={(e) => { record.businessGlossoryId = e; this.setState({ data: this.state.data }); }}>
                                    {
                                        this.props.categoryArr.map(function (item) {
                                            return <Select.Option key={item.value} >{item.key}</Select.Option>
                                        })
                                    }
                               </Select>:
                               <span>{record.businessVarietiesName}</span>}
							</div>
						)
					}
				},
				{
					title: '项目名称',
					dataIndex: 'businessName',
					key:'businessName',
					width:120,
					render:(text,record,index)=>{
						return(
							<div>
								{!record.id?<div>
									<Button onClick={(e)=>{e.stopPropagation(),this.businessFn(record,index)}} type="small">{record.projectName}</Button>
								</div>:
								<span>{record.businessProjectName}</span>
								}
							</div>
							)
						}
				},
				{
					title: '最新进度',
					width:120,
					dataIndex: 'followSituation',
					key: 'followSituation',
					render: (text, record, index) => {
						return <Select  placeholder="选择最新进度" value={record.followSituation}  onChange={(e) => { record.followSituation = e; this.setState({ data: this.state.data }); }}>
                                    {
                                        newFollow.map(function (item) {
                                            return <Select.Option key={item.value} >{item.key}</Select.Option>
                                        })
                                    }
                               </Select>
					}
				}, {
					title: '最新状态',
					width:120,
					dataIndex: 'customerStatus',
					key: 'customerStatus',
					render: (text, record, index) => {
						return <Select value={record.customerStatus} placeholder="选择最新状态" onChange={(e) => { record.customerStatus = e; this.setState({ data: this.state.data }); }}>
                                    {
                                        customerStatus.map(function (item) {
                                            return <Select.Option key={item.value} >{item.key}</Select.Option>
                                        })
                                    }
                               </Select>
					}
				}, {
					title: '跟进说明',
					width:120,
					dataIndex: 'remarks',
					key: 'remarks',
					render: (text, record, index) => {
						return <Input value={record.remarks} placeholder="跟进说明" 
	                             onChange={(e) => { record.remarks = e.target.value; this.setState({ data: this.state.data }); }}
	                             />
					}
				}, {
					title: '操作',
					width:120,
					dataIndex: 'rrr',
					key: 'rrr',
					render: (text, record, index) => {
						return <div>
                          {!record.id&&<Popconfirm title="是否删除?" onConfirm={(e)=>{this.intentionDelet(record,index)}} okText="删除" cancelText="不删除">
							    <Button style={{marginRight:'10px',color:'#ffffff',background:'#f00',border:'none'}}>删除</Button>
							</Popconfirm>}
                        </div>
					}
				}
			],
		}
	},
	//选择子项目
	businessFn(record,index){
		if(!record.businessGlossoryId){
			message.warn('请先选择业务名称!');
			return;
		}
		this.setState({
			businessId:record.businessGlossoryId,
			busModul:true,
			index:index,
			addcontactModul:false
		})
	},
	closeBus(datas,e,s){
		this.state.addcontactModul=e;
		this.state.busModul=false;
		if(s){
			this.state.data[this.state.index].businessName=datas.id;
			this.state.data[this.state.index].projectName=datas.name;
			this.setState({
				busModul:false,
				data:this.state.data
			})
		}
	},
	//拜访意向服务列表单个删除
	intentionDelet(e, index) {
		let deteluserBusinessList = (this.state.data).splice(index, 1)
		this.setState({
			selectedRowKeys: [],
		});
	},
	//拜访modul函数
	visitOk(e) {
		this.setState({
			addcontactModul:false,
			visitModul: false
		});
	},
	visitCancel(e) {
		this.setState({
			addcontactModul:false,
			visitModul: false
		});
		this.props.closeDesc(false,false)
	},
	//获取联系人下拉框
	getNewWoman(ids) {
		this.state.data = []
		$.ajax({
			method: "get",
			dataType: "json",
			crossDomain: false,
			url: globalConfig.context + "/api/admin/customer/findCustomerContacts",
			data: {
				uid: ids,
			},
			success: function(data) {
				let theArr = [];
				let thedata = data.data;
				if(!thedata) {
					if(data.error && data.error.length) {
						message.warning(data.error[0].message);
					};
					thedata = {};
				};
				var telNum = [];
				var contactIds = [];
				thedata.map(function(item, index) {
					contactIds.push(thedata[index].id);
					telNum.push(thedata[index].mobile);
				});
				for(let item in data.data) {
					let theData = data.data[item];
					theArr.push(
						<Select.Option value={item} key={theData.name}>{theData.name}</Select.Option>
					);
				};
				this.setState({
					contactsIdArr: thedata,
					telNum: telNum,
					orderStatusOption: theArr,
				});
			}.bind(this),
		}).always(function() {
			this.setState({
				deletId: ids,
				loading: false
			});
		}.bind(this));
	},
	//刷新新增拜访记录刷新
	deletelist(e) {
		this.setState({
			loading:true
		});
		$.ajax({
			method: "get",
			dataType: "json",
			url: globalConfig.context + '/api/admin/customer/toAddFollowOnHistory',
			data: {
				uid: e,
			},
			success: function(data) {
				let listArr = [];
				let thedata = data.data;
				if(!thedata) {
					if(data.error && data.error.length) {
						message.warning(data.error[0].message);
					};
					thedata = {};
				};
				for(let i = 0; i < data.data.userBusinessList.length; i++) {
					let thisdata = data.data.userBusinessList[i];
					listArr.push({
						id: thisdata.businessId,
						businessName:thisdata.businessProjectId,
						businessGlossoryId:i,
						businessVarietiesName:thisdata.businessVarietiesName,
						businessProjectName:thisdata.businessProjectName,
						followSituation: String(thisdata.followSituation),
						customerStatus: String(thisdata.customerStatus),
						remarks: thisdata.remarks,
					});
				};
				this.setState({
					contacts: thedata.contacts,
					uid: thedata.uid,
					data: listArr,
					followTime: thedata.followTime,
					remarks: thedata.remarks,
				});
			}.bind(this),
		}).always(function() {
			this.setState({
				loading: false
			});
		}.bind(this));
	},
	//当选择联系人的列表变化时，则执行
	hundleName(e) {
		let changNub = this.state.telNum[e];
		this.setState({
			nub: this.state.telNum[e],
			lastName: e,
		});
	},
	//点击添加联系人
	newContacts() {
		this.setState({
			busModul:false,
			uids: this.state.uid,
			addcontactModul: true
		});
	},
	//页面刷新
	closeFollow(e, s) {
		this.state.addcontactModul=false;
		this.state.visitModul = true;
		if(s) {
			this.getNewWoman(this.props.followData.id);
			this.deletelist(this.props.followData.id)
		};
	},
	//详情保存
	visitSubmit(e){
		e.preventDefault();
		let GlossoryId=false;
		this.state.data.map(function(item) {
			if(!item.followSituation||!item.customerStatus||!item.businessName) {
				GlossoryId = true
			}
		})
		if(this.state.contactType == undefined) {
			message.warning('请选择拜访方式')
			return false;
		};
		if(this.state.lastName == undefined) {
			message.warning('请选择联系人')
			return false;
		}
		if(this.state.data.length&&GlossoryId) {
			message.warning("项目名称/最新进度/最新状态不能为空!")
			return false;
		};
		let dataList=this.state.data,
			idsList=[];
		dataList.map((item,index) => {
			idsList.push({
				businessId:item.id||'',
				businessProjectId:item.businessName,
				customerStatus:item.customerStatus,
				followSituation:item.followSituation,
				remarks:item.remarks||''
			})
		})
		this.setState({
			loading: true
		});
		let contactsId = '';
		let conts = this.state.lastName;
		contactsId = this.state.contactsIdArr[conts].id;
		//新增
		
		$.ajax({
			method: "post",
			dataType: "json",
			url:  globalConfig.context + '/api/admin/customer/addFollow',
			data: {
				userBusinessList: JSON.stringify(idsList),
				uid: this.state.uid,
				ocbId: contactsId,
				contactType: this.state.contactType,
				result: this.state.result,
				followTime: this.state.followTime,
			}
		}).done(function(data) {
			this.setState({
				loading: false
			});
			if(!data.error.length) {
				message.success('保存成功！');
				this.props.closeDesc(false,true)
				this.visitCancel();
			} else {
				message.warning(data.error[0].message);
			}
		}.bind(this));
	},
	//添加新业务
	addNew(){
		this.state.data.push({
			projectName:'选择',
			businessName:'',
			customerStatus: undefined,
			businessGlossoryId: undefined,
			followSituation: undefined,
			remarks: '',
		});
		this.setState({
			addcontactModul:false,
			data: this.state.data
		})
	},
	componentWillReceiveProps(nextProps) {
        if (nextProps.visitModul && nextProps.followData.id) {
            this.setState({
				result: '',
				contactType: undefined,
				visitModul: true,
				loading: true,
				lastName:undefined,
				nub:'',
				busModul:false,
				addcontactModul:false,
			})
			this.getNewWoman(nextProps.followData.id);
			this.deletelist(nextProps.followData.id)
        };
    },
	render() {
		const formItemLayout = {
			labelCol: { span: 8 },
			wrapperCol: { span: 14 },
		};
		return(
			<div>
				<Modal	
				      className="customeDetails"
				      footer=''
			          title="客户跟进详情"
			          width='1000px'
			          visible={this.state.visitModul}
			          onOk={this.visitOk}
					  onCancel={this.visitCancel}							          							          
			        >				    
					    <Form layout="horizontal" id="demand-form" onSubmit={this.visitSubmit}>
			    			<Spin spinning={this.state.loading}>
			    			   	<div className="clearfix">
			    			   		<FormItem 
			                            labelCol={{ span: 4 }}
										wrapperCol={{ span: 20 }}
			                            label="跟进方式" >
			    			   			<Radio.Group value={this.state.contactType} onChange={(e) => {
										        this.setState({ contactType: e.target.value }) 
						                    }}>
						                        <Radio value={0}>外出</Radio>
						                        <Radio value={1}>电话</Radio>
						                        <Radio value={2}>QQ</Radio>
						                        <Radio value={3}>微信</Radio>
						                        <Radio value={4}>邮箱</Radio>
						                </Radio.Group>
						                <span className="mandatory">*</span>
					                </FormItem>
					                <div className="clearfix">
						                {this.state.contacts?<span></span>:
							                <FormItem className="half-item"
					                            {...formItemLayout}
					                             label="联系人"
					                             >
							                	<Select placeholder="选择联系人" style={{ width: 140 }}
							                        value={this.state.lastName}
							                        onChange={this.hundleName}>
							                        {this.state.orderStatusOption}
				                    			</Select>
				                    			<span className="mandatory">*</span>
							                </FormItem>
						                }
						                <FormItem className="half-item"
			                          		 {...formItemLayout}
			                             	>
					                			<Button type="primary" onClick={this.newContacts} style={{marginLeft:'100px'}}>添加新联系人</Button>
					                	</FormItem>
					                	<FormItem className="half-item"
				                            {...formItemLayout}
				                             label="联系电话"
				                             >
						                	<span>{this.state.nub}</span>
						                </FormItem>
						                <FormItem className="half-item"
				                            {...formItemLayout}
				                             label="跟进时间"
				                             >
						                	<span>{this.state.followTime}</span>
						                </FormItem>
					                </div>
					                <div className="clearfix">
					                	<FormItem
					                        labelCol={{ span: 4 }}
							                wrapperCol={{ span: 16 }}
					                        label="跟进备注" >
					                            <Input type="textarea" rows={4} value={this.state.result} 
					                              onChange={(e)=>{this.setState({result:e.target.value})}}/>
					                    </FormItem>
					                </div>
					                <div className="clearfix">
					                 	<div style={{fontSize:'18px',marginLeft:'100px',marginTop:'15px',marginBottom:'10px'}}>业务意向<Button onClick={this.addNew} style={{marginLeft:'420px',background:'green',color:'#ffffff'}}>添加新业务</Button></div>
					                 	<div className="clearfix" >
		                    			    <Spin spinning={this.state.loading}>
										      <Table 
										         rowKey={record => record.id}
								            	 pagination={false}
								            	 columns={this.state.intentionList} 
								            	 dataSource={this.state.data}
								            	 />
										    </Spin> 
										</div>	 
					                </div>
			    			   	</div>
			    			   	<FormItem wrapperCol={{ span: 12, offset: 6 }}>
								    <Button  type="primary" size="large" htmlType="submit" style={{marginRight:'150px',marginTop:'20px'}}>保存</Button>
						           	<Button  size="large" onClick={this.visitCancel}>取消</Button>
					   			</FormItem>
					   		</Spin>
					    </Form>
				</Modal> 
				<AddContact 
					addcontactModul={this.state.addcontactModul}
					uids={this.state.uids}
					closeFollow={this.closeFollow}
				/>
				<BusName 
					businessId={this.state.businessId}
					mid={this.props.followData.id}
					busModul={this.state.busModul}
					closeBus={this.closeBus}
				/>
			</div>
		)
	}
})
export default FollowDetail;