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

const ContactPerson = React.createClass({
	getInitialState() {
		return {
			contactList:[],
			loading:false,
			ContactsLists: [{
					title: '姓名',
					dataIndex: 'name',
					key: 'name',
					render: (text, record, index) => {
						return <Input value={record.name} placeholder="姓名(必填项)" key={record.id} required="required"
	                           onChange={(e) => { record.name = e.target.value; 
	                           	this.setState({ contactList: this.state.contactList }); }} style={{width:'120px'}}/>
					}
				}, {
					title: '联系人部门',
					dataIndex: 'depatrment',
					key: 'depatrment',
					render: (text, record, index) => {
						return <Input value={record.depatrment} placeholder="联系人部门" key={record.id}
	                   onChange={(e) => { record.depatrment = e.target.value; this.setState({ contactList: this.state.contactList }); }} style={{width:'120px'}}/>
					}
				}, {
					title: '联系人职务',
					dataIndex: 'position',
					key: 'position',
					render: (text, record, index) => {
						return <Input value={record.position} placeholder="联系人职务" key={record.id}
	                  onChange={(e) => { record.position = e.target.value; this.setState({ contactList: this.state.contactList }); }} style={{width:'120px'}}/>
					}
				}, {
                    title: '主要联系人',
                    dataIndex: 'major',
                    width:100,
                    key: 'major',
                    render:(text) => {
                    	return text?'是':"否"
                    }
                },{
					title: '手机号码',
					dataIndex: 'mobile',
					key: 'mobile',
					render: (text, record, index) => {
						return <Input value={record.mobile} placeholder="手机号码(必填项)" key={record.id} required="required"
	                  onChange={(e) => { record.mobile = e.target.value; this.setState({ contactList: this.state.contactList }); }} style={{width:'120px'}}/>
					}
				}, {
					title: '微信',
					dataIndex: 'wechat',
					key: 'wechat',
					render: (text, record, index) => {
						return <Input value={record.wechat} placeholder="微信" key={record.id}
	                  onChange={(e) => { record.wechat = e.target.value; this.setState({ contactList: this.state.contactList }); }} style={{width:'120px'}}/>
					}
				}, {
					title: '联系人QQ',
					dataIndex: 'qq',
					key: 'qq',
					render: (text, record, index) => {
						return <Input value={record.qq} placeholder="联系人QQ" key={record.id}
	                  onChange={(e) => { record.qq = e.target.value; this.setState({ contactList: this.state.contactList }); }} style={{width:'120px'}}/>
					}
				}, {
					title: '电子邮箱',
					dataIndex: 'email',
					key: 'email',
					render: (text, record, index) => {
						return <Input value={record.email} placeholder="电子邮箱" key={record.id}
	                  onChange={(e) => { record.email = e.target.value; this.setState({ contactList: this.state.contactList }); }} style={{width:'120px'}}/>
					}
				},
				{
					title: '操作',
					dataIndex: 'dels',
					key: 'dels',
					render: (text, record, index) => {
						return <div>{adminData.isSuperAdmin ? 
		                            <Popconfirm title="是否删除?" onConfirm={(e)=>{this.confirmDelet(record)}} okText="删除" cancelText="不删除">
									    <Button style={{marginRight:'10px',color:'#ffffff',background:'#f00',border:'none'}}>删除</Button>
									</Popconfirm>
									:''}
								{record.name?<Button style={{marginRight:'10px',color:'#ffffff',background:'green',border:'none'}} onClick={(e)=>{e.stopPropagation(),this.mainContact(record)}}>设为主要联系人</Button>:''}
                            </div>
					}
				}
			],
		}
	},
	//tab2删除
	confirmDelet(e) {
		this.setState({
			loading: true
		});
		if(e.id) {
			$.ajax({
				method: "get",
				dataType: "json",
				crossDomain: false,
				url: globalConfig.context + "/api/admin/customer/deleteOneContact",
				data: {
					ocbId: e.id, //删除的ID    
				}
			}).done(function(data) {
				if(!data.error.length) {
					message.success('删除成功!');
					this.setState({
						loading: false,
					});
				} else {
					message.warning(data.error[0].message);
				};
				this.contactLists();
			}.bind(this));
		} else {
			this.contactLists();
		}
	},
	//选择主要联系人
	mainContact(record){
		this.setState({
			loading: true
		});
		$.ajax({
			method: "get",
			dataType: "json",
			crossDomain: false,
			url: globalConfig.context + "/api/admin/customer/updateMainContact",
			data: {
				uid:this.props.data.id,
				ocbId: record.id 
			}
		}).done(function(data) {
			if(!data.error.length) {
				message.success('设为主要联系人成功!');
				this.setState({
					loading: false,
				});
			} else {
				message.warning(data.error[0].message);
			};
			this.contactLists();
		}.bind(this));
	},
	//tab2获取联系人详情
	contactLists(ids) {
		this.setState({
			loading: true
		});
		$.ajax({
			method: "get",
			dataType: "json",
			crossDomain: false,
			url: globalConfig.context + '/api/admin/customer/findCustomerContacts',
			data: {
				uid: ids||this.props.data.id, //名称1
			},
			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.length; i++) {
						let thisdata = data.data[i];
						theArr.push({
							id: thisdata.id,
							name: thisdata.name,
							mobile: thisdata.mobile,
							email: thisdata.email,
							qq: thisdata.qq,
							wechat: thisdata.wechat,
							depatrment: thisdata.depatrment,
							position: thisdata.position,
							major:thisdata.major
						});
					};

				};
				this.setState({
					contactList: theArr,
				});
			}.bind(this),
		}).always(function() {
			this.setState({
				loading: false
			});
		}.bind(this));
	},
	//新增
	//tab2新增联系人
	addcontact() {
		this.state.contactList.push({
			id: null,
			name: '',
			mobile: '',
			email: '',
			qq: '',
			wechat: '',
			depatrment: '',
			position: '',
		});

		this.setState({
			contactList: this.state.contactList
		})
	},	
	//tab2联系人保存
	contactSave(e) {
		e.preventDefault();
		this.setState({
			loading: true
		});
		$.ajax({
			url: globalConfig.context + '/api/admin/customer/updateCustomerContacts',
			method: 'post',
			data: {
				uid: this.props.data.id,
				contactList: JSON.stringify(this.state.contactList)
			}
		}).done(function(data) {
			this.setState({
				loading: false
			});
			if(!data.error.length) {
				message.success('保存成功!');
				this.props.closeDetail(false,true)
			} else {
				message.warning(data.error[0].message);
			}
		}.bind(this));
	},
	componentWillMount(){
		this.contactLists(this.props.data.id);
	},
	detailsModal(){
		this.props.closeDetail(false, false)
	},
	componentWillReceiveProps(nextProps) {
		if(nextProps.data.id&&nextProps.contactState){
			this.contactLists(nextProps.data.id)
		}
	},
	render() {
		return(
			<div>
			    <div className="clearfix" >
					 <Button className="ContactsList" type="primary" onClick={this.addcontact}>新增</Button> 
				</div>
		       <div className="clearfix">
    			  <Spin spinning={this.state.loading}>
    			        <Form layout="horizontal" id="demand-form" onSubmit={this.contactSave} >
					      	<Table 
			            	 pagination={false}
			            	 columns={this.state.ContactsLists} 
			            	 dataSource={this.state.contactList}
			            	 />
	            	        <Col span={24} offset={9} style={{marginTop:'15px'}}>
				                <Button  type="primary" htmlType="submit">保存</Button>  
                                <Button  type="ghost" onClick={this.detailsModal} style={{marginLeft:'100px'}}>取消</Button>
				            </Col>
		            	</Form> 
				   </Spin> 
				</div>
			</div>
		)
	}
})
export default ContactPerson;