<%@ page language="java" pageEncoding="UTF-8"
         contentType="text/html; charset=UTF-8" %>
<%@ page isELIgnored="false" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
    String basePath = request.getContextPath();
    String resourcePath = basePath + "/resource";
%>
<!doctype html>
<html>
<head>
    <title>我的账户-充值记录</title>
    <meta charset="utf-8">
    <jsp:include page="../common/head.jsp"></jsp:include>
</head>
<body>
<jsp:include page="../common/body_header.jsp"></jsp:include>
<jsp:include page="../common/user_center_header.jsp"></jsp:include>
<div class="user-mid2">
    <div class="xinxi0">
        <div class="user-mid0">
            <div class="if">
                <span id="tagchongzhi" class="xx0 xx01" onclick="chongZhiShow()"><a>充值记录</a></span>
                <span id="tagjiaoyi" class="xx" onclick="jiaoYiShow()"><a>交易记录</a></span>
                <span class="xx"><a>支付密码记录</a></span>

            </div>
            <div>
                <div class="ye">
                    <img src="img/icon_yue.png" alt="">&nbsp;
                    <span>账户余额：</span>
                    <c:if test="${empty balance}">
                        <span class="rmb">0元</span>
                    </c:if>
                    <c:if test="${not empty balance}">
                        <span class="rmb">${balance}元</span>
                    </c:if>
                </div>
                <button type="button" onclick="recharge()" class="quchongzhi">去充值</button>
            </div>
            <div class="clearfix"></div>
            <div class="xx-main">
                <table id="chongzhi" class="zhanghu">
                    <tr bgcolor="#f2f2f2" class="biaotou1">
                        <td class="td3">名称</td>
                        <td class="td3">充值金额</td>
                        <td class="td3">账户余额</td>
                        <td>时间</td>
                        <td>备注</td>
                    </tr>
                    <c:if test="${recharges.size()>0}">
                        <c:forEach items="${recharges}" var="recharge">
                            <tr>
                                <td>账户充值</td>
                                <td>${recharge.transAmount}</td>
                                <td>${recharge.balance}</td>
                                <td>${recharge.createdAt}</td>
                                <td>${recharge.remark}</td>
                            </tr>
                        </c:forEach>
                    </c:if>
                </table>

                <table id="jiaoyi" hidden class="zhanghu">
                    <tr bgcolor="#f2f2f2" class="biaotou1">
                        <td class="td3">支出金额</td>
                        <td class="td3">账户余额</td>
                        <td class="td1">时间</td>
                        <td>备注</td>
                    </tr>
                    <c:if test="${transactions.size()>0}">
                        <c:forEach items="${transactions}" var="transaction">
                            <tr>
                                <td>${transaction.transAmount}</td>
                                <td>${transaction.balance}</td>
                                <td>${transaction.createdAt}</td>
                                <td>${transaction.remark}</td>
                            </tr>
                        </c:forEach>
                    </c:if>
                </table>
            </div>


        </div>
    </div>
</div>


<div class="clearfix"></div>
<jsp:include page="../common/body_footer.jsp"></jsp:include>
<script type="text/javascript">
   function chongZhiShow() {
       $("#chongzhi").show() ;
       $("#jiaoyi").hide() ;
       $("#tagchongzhi").addClass("xx01") ;
       $("#tagjiaoyi").removeClass("xx01") ;
   }
   function jiaoYiShow() {
       $("#chongzhi").hide() ;
       $("#jiaoyi").show() ;
       $("#tagchongzhi").removeClass("xx01") ;
       $("#tagjiaoyi").addClass("xx01") ;
   }
   
   function recharge() {
       location.href="<%=basePath%>/open/myAccount/recharge.htm?balance=${balance}";
   }
</script>
</body>
</html>