<h2>设置个人资料</h2>
<div class="panel panel-default">
	<div class="panel-body">
		<h3 class="page-header">设置头像<small>&nbsp;(设置一个宽度大于300px、小于3M的JPG头像，让小伙伴们迅速认识你.)</small></h3>
		<form role="form" name="userInfoForm" ng-submit="putUserInfo(user)">
			<div class="row">
				<div class="col-md-4">
					<a href="#">
						<img class="img-responsive img-circle" ng-src="{[user.avatar]}" title="我的头像" />
					</a>
				</div>
				<div class="col-md-16">
					<!--头像上传croppic插件-->
					<div class="form-group cropHeaderWrapper">
						<div id="croppic" ng-show="showMe"></div>
						<span class="btn" id="cropContainerHeaderButton" ng-click="showMe=true">选择图片</span>
					</div>
					<!--头像上传croppic插件-->
				</div>
			</div>

			<h3 class="page-header">详细资料</h3>

			<div class="row">
				<div class="col-md-10">
					<div class="form-group">
						<label for="">姓名：</label>
						<input class="form-control" type="text" ng-model="user.realname" autofocus/>
					</div>
				</div>
				<div class="col-md-10">
					<div class="form-group">
						<label for="">性别：</label>
						<select class="form-control" ng-model="user.sex">
							<option value="0">女</option>
							<option value="1">男</option>
						</select>
					</div>
				</div>
			</div>

			<div class="row">
				<div class="col-md-10">
					<div class="form-group">
						<label for="">职业：</label>
						<input class="form-control" type="text" placeholder="" ng-model="user.job" />
					</div>
				</div>
				<div class="col-md-10">
					<div class="form-group">
						<label for="">城市：</label>
						<input class="form-control" type="text" placeholder="" ng-model="user.city" />
					</div>
				</div>
			</div>

			<div class="row">
				<div class="col-md-10">
					<div class="form-group">
						<label for="">手机：</label>
						<input class="form-control" type="text" placeholder="" ng-model="user.phone" />
					</div>
				</div>
			</div>

			<div class="row">
				<div class="col-md-20">
					<div class="form-group">
						<label for="">地址：</label>
						<input class="form-control" type="text" placeholder=""  ng-model="user.address" />
					</div>
				</div>
			</div>

			<div class="row">
				<div class="col-md-20">
					<div class="form-group">
						<label for="">我的亮点：</label>
						<textarea class="form-control" rows="2" placeholder="" ng-model="user.highlight" ></textarea>
					</div>
				</div>
			</div>

			<div class="row">
				<div class="col-md-20">
					<div class="form-group">
						<label for="">个人简介：</label>
						<textarea class="form-control" rows="6" placeholder="" ng-model="user.intro" ></textarea>
					</div>
				</div>
			</div>

			<div class="row">
				<div class="col-md-20 text-center">
					<button class="btn btn-success" type="submit">确认提交</button>
				</div>
			</div>

		</form>
	</div>
</div>
<script>

	//头像上传截图
	var croppicHeaderOptions = {
				uploadUrl:'/accounts/api/upload_avatar/',
				cropData:{
					"dummyData":1,
					"dummyData2":"asdas"
				},
				cropUrl:'/accounts/api/resize_avatar/',
				customUploadButtonId:'cropContainerHeaderButton',
				modal:true,
				loaderHtml:'<div class="loader bubblingG"><span id="bubblingG_1"></span><span id="bubblingG_2"></span><span id="bubblingG_3"></span></div> ',
				onBeforeImgUpload: function(){ console.log('onBeforeImgUpload') },
				onAfterImgUpload: function(){ console.log('onAfterImgUpload') },
				onImgDrag: function(){ console.log('onImgDrag') },
				onImgZoom: function(){ console.log('onImgZoom') },
				onBeforeImgCrop: function(){ console.log('onBeforeImgCrop') },
				onAfterImgCrop:function(){ console.log('onAfterImgCrop') }
		}
	var cropperHeader = new Croppic('croppic', croppicHeaderOptions);

</script>
