{{ define "member/pay_history.htm" }}
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <title>充值金币 - 会员中心 - 看丽人</title>
  {{ template "_common.htm" .}}
  <script src="{{.global.host_img}}/assets/js/jsrender.min.js"></script>
  <script type="text/javascript">
    LoadMemberInfo();
  </script>
</head>

<body>
  {{ template "_header.htm" .}}

  <main role="main">
    <div class="album py-3 bg-light">
      <div class="container">
        <form class="form-signin">
          <div class="alert alert-dark border-bottom"><a href="/member">会员中心</a> > 充值历史</div>
          <div class="ibox-content">
            <table class="table">
              <thead>
                <tr>
                  <th>订单编号</th>
                  <th>时间</th>
                  <th>金额</th>
                  <th>金币</th>
                  <th>状态</th>
                </tr>
              </thead>
              <tbody id="frmResult">
              </tbody>
            </table>
            <nav id="frmPagination" style="display: none">
              <ul class="pagination justify-content-center">
                <li class="page-item" id="prePage">
                  <a class="page-link" href="javascript:GoPre()">上一页</a>
                </li>
                <li class="page-item disabled" id="totalPage">
                  <a class="page-link"><span id="spCurrentPage">..</span>/<span id="spTotalPage">..</span>页</a>
                </li>
                <li class="page-item" id="nextPage">
                  <a class="page-link" href="javascript:GoNext()">下一页</a>
                </li>
              </ul>
            </nav>
          </table>
        </div>
        </form>
      </div>
    </div>

  </main>
  {{ template "_footer.htm" }}
<script id="tplOrderRow" type="text/x-jsrender">
  <tr>
    <td>{%:order_code%}</td>
    <td>{%:~unix_to_str(add_at)%}</td>
    <td>{%:price%}元</td>
    <td>{%:product_value%}</td>
    <td>{%if is_pay%}<font color="green">已支付</font>{%else%}
      <font color="red">未支付</font>
    {%/if%}</td>
  </tr>
</script>

  <script type="text/javascript">
    var currentpage = 1;
    const pagesize = 10;
    var gokeep_token = GetCookie(TokenName())
    if (gokeep_token == null) {
      DirectTo("/");
    }
    $.views.settings.delimiters("{%", "%}"); // 设置js render标签

    function unix_to_str(time){
      time = parseInt(time) * 1000;
      var datetime = new Date();
      datetime.setTime(time);
      var year = datetime.getFullYear();
      var month = datetime.getMonth() + 1;
      var date = datetime.getDate();
      var hour = datetime.getHours();
      var minute = datetime.getMinutes();
      return year + "-" + month + "-" + date + " " + hour + ":" + minute;
    }

    $.views.helpers({
      unix_to_str : unix_to_str
    })

    var page = currentpage;

    var urlParams = new URLSearchParams(window.location.search);
    if (urlParams.get('page') > 0) {
      page = parseInt(urlParams.get('page'));
      currentpage = page;
    }
    if (urlParams.has('page') && urlParams.has('page_size')) {
      GotoPage(page);
    }

    function GoNext() {
      currentpage = currentpage + 1;
      GotoPage(currentpage);
    }

    function GoPre() {
      currentpage = currentpage - 1;
      GotoPage(currentpage);
    }

    function GotoPage(page) {
      if (page == 1) {
        $("#prePage").addClass('disabled');
      } else {
        $("#prePage").removeClass('disabled');
      }
      $("#spCurrentPage").text(page);

      var data = {
        is_pay: -1,
        page:page,
        page_size:pagesize,
      };

      window.history.pushState("searchResult", "搜索结果", "/member/pay_history?"+$.param( data ));

      $.ajax({
        type: "GET",
        dataType: 'json',
        data: data,
        url: "/api/v1/auth/order/list",
        beforeSend: function (xhr) {
            xhr.setRequestHeader('Authorization', 'Bearer ' + gokeep_token);
        }
      }).done(function (data) {
        Log(data);
        if (data.code == 0) {
          var total = Math.ceil(data.total / pagesize);
          if ((data.result.length < pagesize) || (page == total)) {
            $("#nextPage").addClass('disabled');
          } else {
            $("#nextPage").removeClass('disabled');
          }
          
          $("#spTotalPage").text(total);

          var content = $("#tplOrderRow").render(data.result);
          $("#frmResult").html(content);
          $("#frmPagination").show();
        }
      }).fail(function (data) {
        Log("fail:", data);
        ShowMsg("获取列表失败");
      }); // end ajax
    }

    GotoPage(currentpage);

  </script>
  {{ template "_analytics.htm" }}
</body>
</html>
{{ end }}