{template 'headertoo'}
<script>
	require(['angular', 'bootstrap', 'util'], function(angular, $, u){
		angular.module('app', []).controller('loginPanel', function($scope, $http){
			$scope.label = {
				basic: {
					error: false
				},
				code: {
					countDown : '',
					error: false
				},
				running: false
			};
			$scope.ret = {
				basic: {
					mobile : '',
					oldmobile : '',
					password : ''
				},
				code: {
					mobile : '',
					oldmobile : '',
					password : ''
				}
			};
			$scope.login = function(){
				if($scope.label.running) {
					return;
				}
				var ret = $scope.ret;
				var mode = angular.element('li.active a[data-toggle="tab"]').attr('href') == '#basic' ? 'basic' : 'code';

				if(ret[mode].mobile == '' {if $smsbalance > 0} || ret[mode].password == ''{/if}) {
					$scope.label[mode].error = true;
					return;
				}
				
				var regBox = {
       				regMobile : /^13[0-9]{1}[0-9]{8}$|15[0-9]{1}[0-9]{8}$|18[0-9]{1}[0-9]{8}$/,//手机
    			}
				var mflag = regBox.regMobile.test(ret[mode].mobile);
				if (!mflag) {
				    u.message('请输入正确的手机号.');
					return;
    			}
				$scope.label[mode].error = false;

				$scope.label.running = true;
				var params = angular.copy(ret[mode]);
				params.mode = mode;
				$http.post(location.href, params).success(function(dat){
					if(dat != 'success') {
						u.message(dat);
					} else {
						location.reload();
					}
					$scope.label.running = false;
				});
			};
		});
		angular.bootstrap(document, ['app']);

		$(function(){
			$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
				if($(e.target).attr('href') == '#code') {
					$('#code').addClass('fadeInRight');
				} else {
					$('#basic').addClass('fadeInLeft');
				}
			});
			$('.btn-sender').on('click', function(){
				var mode = $('li.active a[data-toggle="tab"]').attr('href') == '#basic' ? 'basic' : 'code';
				if(mode == 'basic') {
					return;
				}
				var scope = angular.element('.ng-container').scope();
				if(!scope.ret.code.mobile) {
					u.message('请输入手机号码..');
					return;
				}
				var regBox = {
       				regMobile : /^13[0-9]{1}[0-9]{8}$|15[0-9]{1}[0-9]{8}$|18[0-9]{1}[0-9]{8}$/,//手机
    			}
				var mflag = regBox.regMobile.test(scope.ret.code.mobile);
				if (!mflag) {
				    u.message('请输入正确的手机号.');
					return;
    			}
				{if $smsbalance}
				u.sendCode(this, scope.ret.code.mobile, function(ret, message){
					if(ret == 'failed') {
						u.message('发送验证码失败. 详情: ' + message);
					}
				});
				{/if}
			});
		});
	});
</script>
<style>
	body{background:#d2e6e9;}
	.panel{margin:.5em; border:none;}
	.panel-info>.panel-heading {background: -webkit-gradient(linear, 0 0, 100% 0, from(#ebebeb), to(#f3f9fa), color-stop(30%, #f5f9f9)); color:#666666; border:none;}
	a{color:#666666;}a:hover{color: #3ebacc;}
	.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus{color: #3ebacc;}
	.actions{margin:.8em auto;}
	.nav.nav-tabs{margin-bottom:.8em;}
	.btn.btn-primary{background: #56c6d6; color: #FFF; border: 0;}
</style>
<div class="ng-cloak panel panel-info ng-container" ng-controller="loginPanel">
	<div class="panel-heading">
		<h4>{if $mobile_exist == 0}绑定{else}重新绑定{/if}手机号</h4>
	</div>
	<div class="panel-body">
	<form name="theform" method="post" role="form" ng-submit="login();">
		<ul class="nav nav-tabs" role="tablist">
			<li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li>
			<li class="active"><a href="#code" role="tab" data-toggle="tab">温馨提示</a></li>
		</ul>
		<div class="tab-content">
			<div class="tab-pane animated active" id="code">
				
				{if $mobile_exist == 1}
				<div class="form-group has-feedback">
					<label class="control-label sr-only"></label>
					<input type="tel" value="已绑定手机号码：{php echo mb_substr($profilemobile['mobile'],0,3,'utf-8')} ***** {php echo mb_substr($profilemobile['mobile'],8,4,'utf-8')}" class="form-control" disabled="disabled">
				</div>
				<div class="form-group has-feedback" ng-class="{'has-error': label.code.error}">
					<label class="control-label sr-only"></label>
					<input ng-model="ret.code.oldmobile" type="tel" class="form-control" placeholder="老手机号">
					<span class="glyphicon glyphicon-remove form-control-feedback" ng-show="label.code.error"></span>
				</div>
				<div class="form-group has-feedback" ng-class="{'has-error': label.code.error}">
					<label class="control-label sr-only"></label>
					<input ng-model="ret.code.mobile" type="tel" class="form-control" placeholder="新手机号">
					<span class="glyphicon glyphicon-remove form-control-feedback" ng-show="label.code.error"></span>
				</div>
				{else}
				<div class="form-group has-feedback" ng-class="{'has-error': label.code.error}">
					<label class="control-label sr-only"></label>
					<input ng-model="ret.code.mobile" type="tel" class="form-control" placeholder="手机号">
					<span class="glyphicon glyphicon-remove form-control-feedback" ng-show="label.code.error"></span>
				</div>
				{/if}				
				{if $smsbalance > 0}
				<div class="form-group">
					<button class="btn btn-warning btn-block btn-sender" uniacid="{$_W['uniacid']}">获取验证码</button>
				</div>
				<div class="form-group has-feedback" ng-class="{'has-error': label.code.error}">
					<label class="control-label sr-only"></label>
					<input ng-model="ret.code.password" type="tel" class="form-control" placeholder="验证码">
					<span class="glyphicon glyphicon-remove form-control-feedback" ng-show="label.code.error"></span>
				</div>
				{/if}
			</div>
		</div>
		<button type="submit" class="btn btn-primary btn-block">{if $mobile_exist == 0}绑定{else}重新绑定{/if}手机号</button>
		<button class="btn btn-default btn-block" onclick="javascript:history.go(-1);return false;">返回</button>
	</form>	
	</div>
</div>


{template 'footertoo'}