import React from 'react';
import { Icon,  Modal, message,  Spin, Input, Select, Button, Form ,Col,Cascader} from 'antd';
import ajax from 'jquery/src/ajax/xhr.js';
import $ from 'jquery/src/ajax';
import { citySelect, provinceList ,areaSelect} from '@/NewDicProvinceList';
import {socialAttribute,customerSource} from '@/dataDic.js';
const AchievementDetailForm = Form.create()(React.createClass({
    getInitialState() {
        return {
            loading: false,
            data: {},  
            detailApi:''
        };
    },
    handleSubmit(e) {
    	e.preventDefault();
        this.props.form.validateFields((err, values) => {   
        	console.log(values.ProvinceCity)
        	if(values.name.length>64){
    		message.warning('客户名称字数不超过64个')
    		return false;
	    	};
	    	if(!values.ProvinceCity[1]) {
			message.warning('请选择地区');
			return false;
			};
	    	if(values.content.length>32){
	    		message.warning('联系人字数不超过32个')
	    		return false;
	    	};
	    	if(values.length>13){
	    		message.warning('电话号码字数不超过13个')
	    		return false;
	    	};
            if (!err) {
                this.setState({
                    loading: true
                });
                $.ajax({
                    method: "POST",
                    dataType: "json",
                    crossDomain: false,
                    url: globalConfig.context + '/api/admin/customer/addCustomer',
                    data: {
                        name: values.name, 
                        contacts:values.content,
                        contactMobile:values.telnum,
                        societyTag:values.societyTagt,
                        source:values.customerSource,
                        province:(values.ProvinceCity)[0],//省
						city:(values.ProvinceCity)[1],//市
						area:(values.ProvinceCity)[2],//区
                        type:'1'
                    }
                }).done(function (data) { 
                    this.setState({
                        loading: false
                    });
                    if (!data.error.length) {
                        message.success('保存成功！');
                        this.props.handleOk();
                    } else {
                        message.warning(data.error[0].message);
                    }
                }.bind(this));
            }
        });
    },
    componentWillMount() {
        this.state.name='';
    	this.state.content='';
    	this.state.telnum='';
    	this.state.societyTagt='0';
    	this.state.customerSource='0'
    },
    componentWillReceiveProps(nextProps) {
        if (!this.props.visible && nextProps.visible) {
            this.state.name='';
	    	this.state.content='';
	    	this.state.telnum='';
	    	this.state.societyTagt='0';
            this.props.form.resetFields(); 
        };
    },
    
    render() {
        const theData = this.state.data || {};
        const { getFieldDecorator } = this.props.form;
        const FormItem = Form.Item
        const formItemLayout = {
            labelCol: { span: 6 },
            wrapperCol: { span: 14 },
        };  

        return (
        <div>
            <Form layout="horizontal" onSubmit={this.handleSubmit} id="demand-form">
                <Spin spinning={this.state.loading}>
                	<div>
               	    	<Col style={{color:'red',marginBottom:'10px'}} span={12} offset={6}>注意:请录入真实有效的客户信息</Col>
	                    <div className="clearfix">
	                    	<FormItem className="mid-item"
		                            {...formItemLayout}
		                            label="公司名称" >
	                    	     {getFieldDecorator('name', {
	                                rules: [{ required: true, message: '此项为必填项!' }],
	                                initialValue: this.state.name
	                            })(
	                                <Input placeholder="公司名称" />
	                                )}
		                    </FormItem>
	                    </div>
	                    <div className="clearfix">
	                    	<FormItem  
	                            {...formItemLayout}
	                           label="省-市-区"
	                          > 
	                          {getFieldDecorator('ProvinceCity', {
		                                rules: [{ required: true, message: '此项为必填项!' }],
		                                initialValue: this.state.ProvinceCity
	                                })(
								   <Cascader options={areaSelect()}   placeholder="选择城市"  />
	                            )}
		                    </FormItem>
	                    </div>
	                    <div className="clearfix">
	                    	<FormItem className="mid-item"
		                            {...formItemLayout}
		                            label="联系人" >
		                            {getFieldDecorator('content', {
		                                rules: [{ required: true, message: '此项为必填项!' }],
		                                initialValue: this.state.content
	                                })(
	                                    <Input placeholder="联系人" />
	                                )}     
		                    </FormItem>
	                    </div>
	                    <div className="clearfix">
	                    	<FormItem className="mid-item"
		                            {...formItemLayout}
		                            label="联系电话" >
		                            {getFieldDecorator('telnum', {
		                                rules: [{ required: true, message: '此项为必填项!' }],
		                                initialValue: this.state.telnum
	                                })(
	                               		<Input placeholder="联系电话" />
	                                )}        
		                    </FormItem>
	                    </div>
	                    <div className="clearfix">
	                    	<FormItem className="mid-item" 
	                          {...formItemLayout}
	                           label="社会属性"
	                         > 
	                         {getFieldDecorator('societyTagt', {
		                                rules: [{ required: true, message: '此项为必填项!' }],
		                                initialValue: this.state.societyTagt
	                                })(
								  <Select placeholder="客户社会属性"> 
	                                {
	                                    socialAttribute.map(function (item) {
	                                        return <Select.Option key={item.value} >{item.key}</Select.Option>
	                                    })
	                                }
	                              </Select>
	                            )}
	                   		 </FormItem>
	                    </div>
	                    <div className="clearfix">
	                    	<FormItem className="mid-item" 
	                          {...formItemLayout}
	                           label="客户来源"
	                         > 
	                         {getFieldDecorator('customerSource', {
		                                rules: [{ required: true, message: '此项为必填项!' }],
		                                initialValue: this.state.customerSource
	                                })(
								  <Select placeholder="客户来源"> 
	                                {
	                                    customerSource.map(function (item) {
	                                        return <Select.Option key={item.value} >{item.key}</Select.Option>
	                                    })
	                                }
	                              </Select>
	                            )}
	                   		 </FormItem>
	                    </div>
	                </div> 
                    <FormItem wrapperCol={{ span: 12, offset: 6 }}>
                        <Button type="primary" htmlType="submit" style={{marginRight:'50px'}}>保存</Button>  
                        <Button type="ghost" onClick={this.props.closeDesc}>取消</Button>
                    </FormItem> 
                </Spin>
            </Form >
    	</div>
        )
    }
}));

const AddPerson = Form.create()(React.createClass({
    getInitialState() {
        return {
            loading: false,
            data: {},  
            detailApi:''
        };
    },

    handleSubmit(e) {
    	e.preventDefault();
        this.props.form.validateFields((err, values) => { 
        	if(values.companyNamet.length>64){
    		message.warning('联系人字数不超过64个')
    		return false;
	    	};
	    	if(!values.ProvinceCity[1]) {
			message.warning('请选择地区');
			return false;
			};
	    	if(values.telnums.length>13){
	    		message.warning('电话号码字数不超过13个')
	    		return false;
	    	};
            if (!err) {
                this.setState({
                    loading: true
                });
                $.ajax({
                    method: "POST",
                    dataType: "json",
                    crossDomain: false,
                    url: globalConfig.context + '/api/admin/customer/addCustomer',
                    data: {
                        contacts:values.companyNamet,
                        societyTag:values.societyTagt,
                        name: values.companyNamet, 
                        contactMobile: values.telnums,
                        source:values.customerSource,
                        province:(values.ProvinceCity)[0],//省
						city:(values.ProvinceCity)[1],//市
						area:(values.ProvinceCity)[2],//区
                        type:'0'
                    }
                }).done(function (data) { 
                    this.setState({
                        loading: false
                    });
                    if (!data.error.length) {
                        message.success('保存成功！');
                        this.props.handleOk();
                    } else {
                        message.warning(data.error[0].message);
                    }
                }.bind(this));
            }
        });
    },
    componentWillMount() {
        this.state.companyNamet='';
    	this.state.telnum='';
    	this.state.societyTagt='0';
    	this.state.customerSource='0';
    },
    componentWillReceiveProps(nextProps) {
        if (!this.props.visible && nextProps.visible) {
            this.state.companyNamet='';
	    	this.state.telnum='';
	    	this.state.societyTagt='0';
	    	this.state.customerSource='0';
            this.props.form.resetFields(); 
        };
    },
    
    render() {
        const theData = this.state.data || {};
        const { getFieldDecorator } = this.props.form;
        const FormItem = Form.Item
        const formItemLayout = {
            labelCol: { span: 6 },
            wrapperCol: { span: 14 },
        };  

        return (
        <div>
            <Form layout="horizontal" onSubmit={this.handleSubmit} id="demand-form">
                <Spin spinning={this.state.loading}>
               	    <Col style={{color:'red',marginBottom:'10px'}} span={12} offset={6}>注意:请录入真实有效的客户信息</Col>
	                <div className="clearfix">
                    	<FormItem className="mid-item"
	                            {...formItemLayout}
	                            label="客户姓名" >   
	                           {getFieldDecorator('companyNamet', {
	                                rules: [{ required: true, message: '此项为必填项!' }],
	                                initialValue: this.state.companyNamet
                                })(
                                    <Input placeholder="客户姓名" />
                                )} 
	                    </FormItem>
	                </div>
	                <div className="clearfix">
	                    	<FormItem  
	                            {...formItemLayout}
	                           label="省-市-区"
	                          > 
	                          {getFieldDecorator('ProvinceCity', {
		                                rules: [{ required: true, message: '此项为必填项!' }],
		                                initialValue: this.state.ProvinceCity
	                                })(
								   <Cascader options={areaSelect()}   placeholder="选择城市"  />
	                            )}
		                    </FormItem>
	                    </div>
	                <div className="clearfix">
                    	<FormItem className="mid-item"
	                            {...formItemLayout}
	                            label="联系电话" >
	                    		{getFieldDecorator('telnums', {
	                                rules: [{ required: true, message: '此项为必填项!' }],
	                                initialValue: this.state.telnums
                                })(
                                    <Input placeholder="联系电话" />
                                )} 
	                    </FormItem>
                    </div>
                    <div className="clearfix">
                    	<FormItem className="mid-item" 
                          {...formItemLayout}
                           label="社会属性"
                         > 
                         {getFieldDecorator('societyTagt', {
	                                rules: [{ required: true, message: '此项为必填项!' }],
	                                initialValue: this.state.societyTagt
                                })(
							  <Select placeholder="客户社会属性"> 
                                {
                                    socialAttribute.map(function (item) {
                                        return <Select.Option key={item.value} >{item.key}</Select.Option>
                                    })
                                }
                              </Select>
                            )}
                   		 </FormItem>
                    </div>
                    <div className="clearfix">
                    	<FormItem className="mid-item" 
                          {...formItemLayout}
                           label="客户来源"
                         > 
                         {getFieldDecorator('customerSource', {
	                                rules: [{ required: true, message: '此项为必填项!' }],
	                                initialValue: this.state.customerSource
                                })(
							  <Select placeholder="客户来源"> 
                                {
                                    customerSource.map(function (item) {
                                        return <Select.Option key={item.value} >{item.key}</Select.Option>
                                    })
                                }
                              </Select>
                            )}
                   		 </FormItem>
	                </div>
                    <FormItem wrapperCol={{ span: 12, offset: 6 }}>
                        <Button style={{marginRight:'50px'}} type="primary" htmlType="submit">保存</Button>  
                        <Button  type="ghost" onClick={this.props.closeDesc}>取消</Button>
                    </FormItem> 
                </Spin>
            </Form >
    	</div>
        )
    }
}));

const AddIntention = React.createClass({
    getInitialState() {
        return {
            visible: false,
            tabsKey: 1,
            loading: false,           
            dataSource: [],
        };
    },    
    handleCancel(e) {
        this.setState({
            visible: false,
        });
        this.props.closeDesc(false);
    },
    handleOk(e) {
        this.setState({
            visible: false,
        });
        this.props.closeDesc(false, true);
    },
    
    componentWillReceiveProps(nextProps) {
        if (!this.state.visible && nextProps.showDesc) {
            this.state.tabsKey = "1";
        };
        this.state.visible = nextProps.showDesc; 
        
    },
    render() {
        
            return (
                <div className="patent-desc">
                    <Modal maskClosable={false} visible={this.state.visible}
                        onOk={this.checkPatentProcess} onCancel={this.handleCancel}
                        width='600px'
                        title='新建客户'                       
                        footer=''
                        className="admin-desc-content">
                        <Spin spinning={this.state.loading}>               
                            {this.props.api.indexOf('Personal')<0?<AchievementDetailForm
                                data={this.props.data} 
                                newmodal={this.props.newmodal}
                                closeDesc={this.handleCancel}
                                visible={this.state.visible}
                                handleOk={this.handleOk} />:<AddPerson 
                                	data={this.props.data} 
	                                newmodal={this.props.newmodal}
	                                closeDesc={this.handleCancel}
	                                visible={this.state.visible}
	                                handleOk={this.handleOk}
                                />}
                        </Spin>
                    </Modal>
                </div>
            );        
    },
});


export default AddIntention;