import React from 'react';
import {Form,Button,Spin,message,Input,Select,Radio} from 'antd';
import ajax from 'jquery/src/ajax/xhr.js';
import $ from 'jquery/src/ajax';
const FormItem =Form.Item;
import {statuslist,lvl,currentMember} from '@/dataDic.js';
import {getcustomerTyp} from '@/tools.js';
const Account =React.createClass({
	httpAccount(record) {
		$.ajax({
			method: "get",
			dataType: "json",
			crossDomain: false,
			url: globalConfig.context + '/api/admin/customer/findUserAccountDetail',
			data: {
				uid: record
			},
			success: function(data) {
				let thisData = data.data;
				if(!thisData) {
					if(data.error && data.error.length) {
						message.warning(data.error[0].message);
					};
					thisData = {};
				};
				let sourcecustomer = ''
				switch(String(thisData.source)) {
					case '0':
						sourcecustomer = '注册客户'
						break;
					case '1':
						sourcecustomer = '录入客户'
						break;
				}
				this.setState({
					Accountuid: thisData.id,
					mobile: thisData.mobile,
					nickname: thisData.nickname,
					email: thisData.email,
					type: getcustomerTyp(String(thisData.type)),
					source: sourcecustomer,
					isMember: thisData.isMember,
					currentMemberStatus: String(thisData.currentMemberStatus),
					lvl: String(thisData.lvl),
					status: String(thisData.status),
					createTimes: thisData.createTimes,
				});
			}.bind(this),
		}).always(function() {
			this.setState({
				loading: false
			});
		}.bind(this));
	},
	getInitialState(){
		return{
			loading:false
		}
	},
	//账户信息保存
	accountSave(e) {
		e.preventDefault();
		if(!this.state.mobile) {
			message.warning('手机号码不能为空！')
			return false;
		}
		this.setState({
			loading: true
		});
		$.ajax({
			method: "post",
			dataType: "json",
			url: globalConfig.context + '/api/admin/customer/updateUserAccount',
			data: {
				id: this.state.Accountuid,
				mobile: this.state.mobile,
				nickname: this.state.nickname,
				email: this.state.email,
				isMember: this.state.isMember,
				currentMemberStatus: this.state.currentMemberStatus,
				lvl: this.state.lvl,
				status: this.state.status,
			}
		}).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.httpAccount(this.props.data.id);
	},
	detailsModal(){
		this.props.closeDetail(false, false)
	},
	componentWillReceiveProps(nextProps) {
		if(nextProps.data.id&&nextProps.accountState){
			this.httpAccount(nextProps.data.id)
		}
	},
	render(){
		const formItemLayout = {
			labelCol: { span: 8 },
			wrapperCol: { span: 14 },
		};
		return(
			<div className="clearfix">
    			<Form layout="horizontal" id="demand-form" onSubmit={this.accountSave} >
    				<Spin spinning={this.state.loading} >
    					<FormItem className="half-item"
	                            {...formItemLayout}
	                            label="注册手机号" >
    							<span>{this.state.mobile}</span>
	                    </FormItem>
	                    <FormItem className="half-item"
	                            {...formItemLayout}
	                            label="注册用户名" >
	                         <Input value={this.state.nickname}  onChange={(e) => { this.setState({ nickname: e.target.value }); }} />        
	                    </FormItem>
	                    <FormItem className="half-item"
	                            {...formItemLayout}
	                            label="注册邮箱" >
	                         <Input value={this.state.email}  onChange={(e) => { this.setState({ email: e.target.value }); }} />        
	                    </FormItem>
	                    <div className="clearfix">
		                    <FormItem className="half-item"
		                            {...formItemLayout}
		                            label="客户来源" >
		                            <span>{this.state.source}</span>   
		                    </FormItem>
		                    <FormItem className="half-item"
		                            {...formItemLayout}
		                            label="客户类型" >
		                            <span>{this.state.type}</span>   
		                    </FormItem>
		                    <FormItem className="half-item"
		                            {...formItemLayout}
		                            label="创建时间" >
		                            <span>{this.state.createTimes}</span>   
		                    </FormItem>
		                    <FormItem className="half-item" 
	                           {...formItemLayout}
	                           label="账户状态"
	                         > 
							    <Select placeholder="账户状态" value={this.state.status}  onChange={(e) => { this.setState({ status: e }); }} >
                                {
                                    statuslist.map(function (item) {
                                        return <Select.Option key={item.value} >{item.key}</Select.Option>
                                    })
                                }
                              </Select>
	                   		</FormItem>
	                   	</div>
                   		<div className="clearfix">
				            <FormItem className="half-item"
				                {...formItemLayout}
		                        label="会员"
				            > 
		                   		 <Radio.Group value={this.state.isMember} onChange={(e) => {
				                        this.setState({ isMember:  e.target.value })
				                    }}>
				                        <Radio value={0}>否</Radio>
				                        <Radio value={1}>是</Radio>
				                  </Radio.Group>
				            </FormItem>
				            <FormItem className="half-item" 
		                          {...formItemLayout}
		                           label="会员等级"
		                         > 
							    <Select placeholder="客户状态" value={this.state.lvl}  onChange={(e) => { this.setState({ lvl: e }); }} >
                                 {
                                    lvl.map(function (item) {
                                        return <Select.Option key={item.value} >{item.key}</Select.Option>
                                    })
                                 }
                               </Select>
	                   		</FormItem>
	                   		<FormItem className="half-item" 
	                           {...formItemLayout}
	                           label="会员状态"
	                         > 
							    <Select placeholder="会员状态" value={this.state.currentMemberStatus}  onChange={(e) => { this.setState({ currentMemberStatus: e }); }} >
                                {
                                    currentMember.map(function (item) {
                                        return <Select.Option key={item.value} >{item.key}</Select.Option>
                                    })
                                }
                                </Select>
	                   		</FormItem>
	                   	</div>
			            <div className="clearfix">
			                <Button className='saveBtn' type="primary" htmlType="submit">保存</Button>  
                            <Button  type="ghost" onClick={this.detailsModal}>取消</Button>
			            </div>
    				</Spin>
    			</Form>	
    		</div>
		)
	}
})
export default Account;
