<!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>
<script src="/js/common/common.js"></script>
<link href="/css/common/common.css" rel="stylesheet" type="text/css">
<style type="text/css">
.personal-info-form {
	padding-left: 2rem;
	padding-top: 3rem;
}

.personal-info-form .row {
	padding-bottom: 1rem;
}

.personal-info-form-item {
	border-bottom: .01563rem solid #f2f2f2;
	height: 2.5rem;
}

.personal-info-form-item label {
	text-align: end;
	width: 6rem;
	margin-right: 1rem;
}

.personal-info-form-item span {
	color: #9e9e9e;
}

.personal-info-form-item-action {
	width: 12rem;
	display: inline-block;
}

.personal-info-form-item-action span {
	padding-right: 3rem;
	width: 11rem;
	display: inline-block;
}

.personal-info-form-item-action i {
	font-size: 1.6rem;
}

.edit-bank-info-form, .modify-login-pwd-form, .modify-money-pwd-form {
	padding-top: 3rem;
	padding-left: 2rem;
	padding-right: 2rem;
}
</style>
</head>

<body>
	<div th:replace="common/header::html"></div>
	<div id="personal-info" v-cloak>
		<div class="page-body">
			<div class="personal-info-form" v-show="showPersonalInfoFlag">
				<div class="row">
					<div class="col-sm-9 offset-sm-3 personal-info-form-item">
						<label>用户名</label> <span>{{accountInfo.userName}}</span>
					</div>
				</div>
				<div class="row">
					<div class="col-sm-9 offset-sm-3 personal-info-form-item">
						<label>真实姓名</label> <span>{{accountInfo.realName}}</span>
					</div>
				</div>

				<template v-if="bankInfo.bankInfoLatelyModifyTime != null">
				<div class="row">
					<div class="col-sm-9 offset-sm-3 personal-info-form-item personal-info-form-highlight-item">
						<label>开户银行</label> <span>{{bankInfo.openAccountBank}}</span>
					</div>
				</div>
				<div class="row">
					<div class="col-sm-9 offset-sm-3 personal-info-form-item personal-info-form-highlight-item">
						<label>开户人姓名</label> <span>{{bankInfo.accountHolder}}</span>
					</div>
				</div>
				<div class="row">
					<div class="col-sm-9 offset-sm-3 personal-info-form-item">
						<label>银行卡账号</label> <span>{{bankInfo.bankCardAccount}}</span>
					</div>
				</div>
				<div class="row">
					<div class="col-sm-9 offset-sm-3 personal-info-form-item">
						<label></label> <span class="personal-info-form-item-action" v-on:click="showEditBankInfoPage"><span>点击更换银行卡</span><i aria-hidden="true" class="fa fa-angle-right"></i></span>
					</div>
				</div>
				</template>
				<template v-if="bankInfo.bankInfoLatelyModifyTime == null">
				<div class="row">
					<div class="col-sm-9 offset-sm-3 personal-info-form-item">
						<label>未补充银行卡</label> <span class="personal-info-form-item-action" v-on:click="showEditBankInfoPage"><span>点击补充银行卡</span><i aria-hidden="true" class="fa fa-angle-right"></i></span>
					</div>
				</div>
				</template>
				<div class="row">
					<div class="col-sm-9 offset-sm-3 personal-info-form-item">
						<label>登录密码</label> <span class="personal-info-form-item-action" v-on:click="showModifyLoginPwdPage"><span>点击修改登录密码</span><i aria-hidden="true" class="fa fa-angle-right"></i></span>
					</div>
				</div>
				<div class="row">
					<div class="col-sm-9 offset-sm-3 personal-info-form-item">
						<label>资金密码</label> <span class="personal-info-form-item-action" v-on:click="showModifyMoneyPwdPage"><span>点击修改资金密码</span><i aria-hidden="true" class="fa fa-angle-right"></i></span>
					</div>
				</div>
			</div>
			<form class="edit-bank-info-form" v-show="editBankInfoFlag">
				<div class="form-group">
					<label>开户银行</label> <input type="text" class="form-control" placeholder="请输入开户银行" v-model="openAccountBank">
				</div>
				<div class="form-group">
					<label>开户人姓名</label> <input type="text" class="form-control" placeholder="请输入开户人姓名" v-model="accountHolder">
				</div>
				<div class="form-group">
					<label>银行卡账号</label> <input type="text" class="form-control" placeholder="请输入银行卡账号" v-model="bankCardAccount">
				</div>
				<button type="button" class="btn btn-danger btn-lg btn-block" v-on:click="bindBankInfo">确认绑定</button>
				<button type="button" class="btn btn-light btn-lg btn-block" v-on:click="hideEditBankInfoPage">返回</button>
			</form>

			<form class="modify-login-pwd-form" v-show="modifyLoginPwdFlag">
				<div class="form-group">
					<label>旧的登录密码</label> <input type="text" class="form-control" placeholder="请输入旧的登录密码" v-model="oldLoginPwd">
				</div>
				<div class="form-group">
					<label>新的登录密码</label> <input type="text" class="form-control" placeholder="请输入新的登录密码" v-model="newLoginPwd">
				</div>
				<div class="form-group">
					<label>确认登录密码</label> <input type="text" class="form-control" placeholder="请确认登录密码" v-model="confirmLoginPwd">
				</div>
				<button type="button" class="btn btn-danger btn-lg btn-block" v-on:click="modifyLoginPwd">确认修改</button>
				<button type="button" class="btn btn-light btn-lg btn-block" v-on:click="hideModifyLoginPwdPage">返回</button>
			</form>

			<form class="modify-money-pwd-form" v-show="modifyMoneyPwdFlag">
				<div class="form-group">
					<label>旧的资金密码</label> <input type="text" class="form-control" placeholder="请输入旧的资金密码" v-model="oldMoneyPwd">
				</div>
				<div class="form-group">
					<label>新的资金密码</label> <input type="text" class="form-control" placeholder="请输入新的资金密码" v-model="newMoneyPwd">
				</div>
				<div class="form-group">
					<label>确认资金密码</label> <input type="text" class="form-control" placeholder="请确认资金密码" v-model="confirmMoneyPwd">
				</div>
				<button type="button" class="btn btn-danger btn-lg btn-block" v-on:click="modifyMoneyPwd">确认修改</button>
				<button type="button" class="btn btn-light btn-lg btn-block" v-on:click="hideModifyMoneyPwdPage">返回</button>
			</form>
		</div>
	</div>
	<script type="text/javascript" src="/js/personal-info.js"></script>
</body>
</html>