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,getCustomerSource} 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 = {};
				};
				this.setState({
					Accountuid: thisData.id,
					mobile: thisData.mobile,
					nickname: thisData.nickname,
					email: thisData.email,
					type: getcustomerTyp(String(thisData.type)),
					source: thisData.source,
					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>{getCustomerSource(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">
			                <Button className='saveBtn' type="primary" htmlType="submit">保存</Button>  
                            <Button  type="ghost" onClick={this.detailsModal}>取消</Button>
			            </div>
    				</Spin>
    			</Form>	
    		</div>
		)
	}
})
export default Account;
