<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>代理开户</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script>
<link href="/css/common/common.css" rel="stylesheet" type="text/css">
<script src="/js/common/common.js"></script>
<style type="text/css">
.login-container {
	padding-top: 3rem;
}

.login-btn {
	margin-bottom: 1rem;
}
</style>
</head>

<body>
	<div th:replace="common/header::html"></div>
	<div id="login" v-cloak>
		<div class="page-body">
			<div class="container login-container">
				<form>
					<div class="form-group">
						<label>用户名</label> <input type="text" class="form-control" placeholder="请输入账号" v-model="userName">
					</div>
					<div class="form-group">
						<label>登录密码</label> <input type="password" class="form-control" placeholder="请输入密码" v-model="password">
					</div>
					<div class="form-group">
						<label>确认登录密码</label> <input type="password" class="form-control" placeholder="请输入密码" v-model="confirmPassword">
					</div>
					<div class="form-group">
						<label>返点</label> <select class="form-control" v-model="rebate">
							<option value="">请选择</option>
							<option v-for="dictItem in rebateDictItems" :value="dictItem.rebate" v-show="dictItem.rebate <= accountRebate">{{dictItem.rebate}}%</option>
						</select>
					</div>
					<button type="button" class="btn btn-danger btn-lg btn-block login-btn" v-on:click="agentOpenAnAccount">确认开户</button>
					<button type="button" class="btn btn-light btn-lg btn-block" v-on:click="window.history.back(-1);">返回</button>
				</form>
			</div>
		</div>
	</div>
	<div th:replace="common/footer::html"></div>
	<script type="text/javascript">
		var loginVM = new Vue({
			el : '#login',
			data : {
				accountRebate : '',
				userName : '',
				password : '',
				confirmPassword : '',
				rebate : '',
				rebateDictItems : []
			},
			computed : {},
			created : function() {
			},
			mounted : function() {
				headerVM.title = '代理开户';
				headerVM.showBackFlag = true;
				this.getUserAccountInfo();
				this.loadrebateDictItem();
			},
			methods : {

				/**
				 * 获取用户账号信息
				 */
				getUserAccountInfo : function() {
					var that = this;
					that.$http.get('/userAccount/getUserAccountInfo').then(function(res) {
						if (res.body.data != null) {
							that.accountRebate = res.body.data.rebate;
						}
					});
				},

				loadrebateDictItem : function() {
					var that = this;
					that.$http.get('/agent/findAllRebate').then(function(res) {
						this.rebateDictItems = res.body.data;
					});
				},

				agentOpenAnAccount : function() {
					var that = this;
					if (that.userName == null || that.userName == '') {
						layer.alert('请输入用户名', {
							title : '提示',
							icon : 7,
							time : 3000
						});
						return;
					}
					var userNamePatt = /^[A-Za-z][A-Za-z0-9]{5,11}$/;
					if (!userNamePatt.test(that.userName)) {
						layer.alert('用户名不合法!请输入以字母开头,长度为6-12个字母和数字的用户名');
						return;
					}
					if (that.password == null || that.password == '') {
						layer.alert('请输入登录密码', {
							title : '提示',
							icon : 7,
							time : 3000
						});
						return;
					}
					if (that.confirmPassword == null || that.confirmPassword == '') {
						layer.alert('请确认登录密码', {
							title : '提示',
							icon : 7,
							time : 3000
						});
						return;
					}
					if (that.password != that.confirmPassword) {
						layer.alert('密码不一致');
						return;
					}
					var passwordPatt = /^[A-Za-z][A-Za-z0-9]{5,14}$/;
					if (!passwordPatt.test(that.password)) {
						layer.alert('密码不合法!请输入以字母开头,长度为6-15个字母和数字的密码');
						return;
					}
					if (that.rebate == null || that.rebate == '') {
						layer.alert('请选择返点', {
							title : '提示',
							icon : 7,
							time : 3000
						});
						return;
					}
					that.$http.post('/agent/agentOpenAnAccount', {
						userName : that.userName,
						loginPwd : that.password,
						rebate : that.rebate
					}).then(function(res) {
						layer.alert('开户成功!', {
							icon : 1,
							time : 3000,
							shade : false
						});
						window.location.href = '/agent-center';
					});
				}
			}
		});
	</script>
</body>
</html>