import React from 'react';
import { Modal, message, layout, Spin, Input,  Button, Form, Row, Col, Radio } from 'antd';
import ajax from 'jquery/src/ajax/xhr.js';
import $ from 'jquery/src/ajax';
const FormItem =Form.Item;

const AddContact = React.createClass({
	getInitialState() {
		return {
			addcontactModul: false,
		}
	},
	addcontactModulOK() {
		this.setState({
			addcontactModul: false
		})
		this.props.closeFollow(true, true)
	},
	addcontactModulcancel() {
		this.setState({
			addcontactModul: false
		})
		this.props.closeFollow(false, false)
	},
	//新增联系人保存函数
	submitcontactman(e) {
		e.preventDefault();
		if(!this.state.newname){
			message.warn('请输入姓名');
			return ;
		};
		if(!this.state.newmobile){
			message.warn('请输入手机号码');
			return ;
		};
		this.setState({
			loading: true
		})
		$.ajax({
			method: "post",
			dataType: "json",
			crossDomain: false,
			url: globalConfig.context + "/api/admin/customer/addOneContact",
			data: {
				uid: this.state.uid,
				name: this.state.newname,
				mobile: this.state.newmobile,
				email: this.state.newemail,
				wechat: this.state.newwechat,
				depatrment: this.state.newdepatrment,
				position: this.state.newposition,
				sex: this.state.newsex,
				qq: this.state.newqq
			},
			success: function(data) {
				if(!data.error.length) {
					this.addcontactModulOK()
					this.setState({
						loading: false,
					})
				} else {
					message.warning(data.error[0].message);
				};
			}.bind(this)
		});
	},
	componentWillReceiveProps(nextProps) {
		if(nextProps.addcontactModul && nextProps.uids) {
			this.setState({
				newsex: undefined,
				newname: '',
				newmobile: '',
				newwechat: '',
				newqq: '',
				newdepatrment: '',
				newposition: '',
				newemail: '',
				addcontactModul: true,
				uid: nextProps.uids,
				loading:false
			})
		};
	},
	render() {
		return(
			<div>
				<Modal
				      footer=''
				      width='800px'
			          title="新增联系人"
			          visible={this.state.addcontactModul}
			          onOk={this.addcontactModulOK}
			          onCancel={this.addcontactModulcancel}						          							          
						        >
				        <Form layout="horizontal" onSubmit={this.submitcontactman} id="demand-form">
					      <Spin spinning={this.state.loading}> 											             
					        <Row>	
			                    <FormItem 
			                        labelCol={{ span: 3 }}
			                        wrapperCol={{ span: 14 }}
			                        label="性别:"  style={{marginRight:'10px',marginTop: '-15px'}}>
			                        <Radio.Group value={this.state.newsex} onChange={(e) => {
					                    this.setState({ newsex: e.target.value }) 
					                    }}>
					                        <Radio value='男'>男</Radio>
					                        <Radio value='女'>女</Radio>
				                    </Radio.Group>
			                    </FormItem>	
							</Row>								               
					        <Row style={{ paddingLeft:'50px' }}>
		                        <Col span={2}><span style={{color:'red'}}>*</span>姓名:</Col>
                                <Col span={8}>
                                    <Input value={this.state.newname}
                                        onChange={(e) => { this.setState({ newname: e.target.value }) }} />
                                </Col>
                                <Col span={2} style={{ marginLeft: '50px' }}><span style={{color:'red'}}>*</span>手机:</Col>
                                <Col span={8}>
                                    <Input value={this.state.newmobile} 
                                        onChange={(e) => { this.setState({ newmobile: e.target.value }) }} />
                                </Col>
                                
                            </Row>
		                    <Row style={{ marginTop: '20px',paddingLeft:'50px' }}>
                                <Col span={2}>微信:</Col>
                                	<Col span={8}>
                                    <Input value={this.state.newwechat}
                                        onChange={(e) => { this.setState({ newwechat: e.target.value }) }} />
                                </Col>
                                <Col span={2} style={{ marginLeft: '50px' }}>Q Q:</Col>
                                <Col span={8}>
                                    <Input value={this.state.newqq}
                                        onChange={(e) => { this.setState({ newqq: e.target.value }) }} />
                                </Col>
                            </Row>
                            <Row style={{ marginTop: '20px' ,paddingLeft:'50px'}}>
                        		<Col span={2}>部门:</Col>
                        		<Col span={8}>
                           		 	<Input value={this.state.newdepatrment}
                               		 onChange={(e) => { this.setState({ newdepatrment: e.target.value }) }} />
                                </Col>
                                <Col span={2} style={{ marginLeft: '50px' }}>职位:</Col>
                                <Col span={8}>
                                    <Input value={this.state.newposition}
                                        onChange={(e) => { this.setState({ newposition: e.target.value }) }} />
                                </Col>
                            </Row>	
                            <Row style={{ marginTop: '20px',paddingLeft:'50px' }}>						                       
                                <Col span={2}>邮箱:</Col>
                                <Col span={8}>
                                    <Input value={this.state.newemail}
                                        onChange={(e) => { this.setState({ newemail: e.target.value }) }} />
                                </Col>
                            </Row>
                            <Row style={{ marginTop: '20px',paddingLeft:'50px' ,marginBottom:'50px'}}>
		                          <Button className="set-submit" type="primary" htmlType="submit"  id="change_keep" style={{marginLeft:'60px'}}>保存</Button>
					              <Button className="set-submit" type="ghost" onClick={this.addcontactModulcancel} id='change_rem'>取消</Button>
			            	</Row>
			            </Spin>
			        </Form>   
			    </Modal>
			</div>
		)
	}
})
export default AddContact;