{{ define "member/pay.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" .}}
  <style type="text/css">
    #_times{
      color: red;
    }
  </style>
  <script type="text/javascript">
    LoadMemberInfo();
    // 获取剩余时间 by:Gaohaoyang
    var getRemainTime = (endTime, deviceTime, serverTime) => {
        let t = endTime - Date.parse(new Date()) - serverTime + deviceTime
        let seconds = Math.floor((t / 1000) % 60)
        let minutes = Math.floor((t / 1000 / 60) % 60)
        let hours = Math.floor((t / (1000 * 60 * 60)) % 24)
        let days = Math.floor(t / (1000 * 60 * 60 * 24))
        return {
            'total': t,
            'days': days,
            'hours': hours,
            'minutes': minutes,
            'seconds': seconds
        }
    }
  </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="py-2">
            <div class="ibox-content text-center">
              <h1 id="_userid">...</h1>
              <div class="col-xs-8 text-center">
                <span> 剩余金币 </span>
                <h2 class="font-bold text-danger" id="_money">...</h2>
              </div>
            </div>
          </div>
          <div class="py-2">
            <div class="card-deck mb-3 text-center">
              <div class="card mb-6 box-shadow">
                <div class="card-header">
                  <h4 class="my-0 font-weight-normal">20金币</h4>
                </div>
                <div class="card-body">
                  <h1 class="card-title pricing-card-title">20 RMB</h1>
                  <button id="btnBuy20" type="button" class="btn btn-block btn-danger">购买</button>
                </div>
              </div>
              <div class="card mb-6 box-shadow">
                <div class="card-header">
                  <h4 class="my-0 font-weight-normal">100金币</h4>
                </div>
                <div class="card-body">
                  <h1 class="card-title pricing-card-title">80 RMB</h1>
                  <button id="btnBuy100" type="button" class="btn btn-block btn-danger">购买</button>
                </div>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>

  </main>
  {{ template "_footer.htm" }}
  <script type="text/javascript">
    var gokeep_token = GetCookie(TokenName());
    if (gokeep_token == null) {
      DirectTo("/member/login");
    }

    function BuyCard(t) {
      $.ajax({
        type: "POST",
        dataType: 'json',
        contentType:"application/json;",
        url: "/api/v1/auth/order/card_add",
        beforeSend: function (xhr) {
            xhr.setRequestHeader('Authorization', 'Bearer ' + gokeep_token);
        },
        data: JSON.stringify({
          productid: t,
          amount: 1
        }),
        success: function(data) {
          Log(data)
          if (data.code == 0 || data.code == 4104) {
            serverTime = data.now * 1000;
            endTime = data.result.add_at * 1000 + 60 * 3 * 1000;
            deviceTime = Date.parse(new Date());

            //设置定时器
            let intervalTimer = setInterval(() => {
                // 得到剩余时间
                let remainTime = getRemainTime(endTime, deviceTime, serverTime)

                if (remainTime.total > 0) {
                  // 倒计时提示
                  Log(remainTime);
                  $("#_times").html("剩余："+remainTime.minutes+"分"+remainTime.seconds+"秒");
                } else if (remainTime.total <= 0) {
                  //倒计时结束
                  clearInterval(intervalTimer);
                  $("#_times").html("订单超时，请返回重新下单");
                  $("#imgQRPay").attr({
                    src: '/assets/img/alipay/outdate.jpeg'
                  });
                }
            }, 1000);

            var footer = "<p><a href='?' class='btn btn-outline-primary' data-dismiss='modal' aria-label='Close'>返回</a>  <a id='btnCheck' href='javascript:CheckOrder(\""+data.result.order_code+"\")' class='btn btn-primary'>完成支付</a></p>";
            var content = "<p><img src='{{.global.host_img}}/assets/img/alipay.jpg'/><b>扫码充值</b> <span id='_times'></span></p>";
            if (data.result.product_id != t) {
              content += "<p><b>这是一个尚未完成的订单，请结束当前订单（支付或超时）再产生新订单</b></p>"
            }
            content += "<p>打开支付宝扫一扫，转账20元获得20金币（随机立减）</p>";
            content += "<p>订单ID："+data.result.order_code+"</p>";
            content += "<p style='text-align:center'><img id='imgQRPay' src='{{.global.host_img}}/assets/img/alipay/"+data.result.price+".jpeg' width='60%'/></p>";
            content += "<p><small>如果您是手机打开此网站，请长按二维码保存，打开支付宝扫一扫，点击右上角打开相册选择二维码付款2-3秒充值成功，如未成功请保存付款截图联系******@**.com</small></p>";
            ShowMsg(content, {
              footer:footer,
              noClose:true,
            });
          }
        },
        error: function() {
          ShowMsg("购买失败");
        }
      });// end ajax
    }

    function CheckOrder(order_id) {
      $.ajax({
        url: '/api/v1/auth/order/view',
        type: 'GET',
        dataType: 'json',
        data: {order_code: order_id},
        beforeSend: function (xhr) {
            xhr.setRequestHeader('Authorization', 'Bearer ' + gokeep_token);
        },
      })
      .done(function(data) {
        Log(data);
        if (data.code == 0) {
          if ((Date.parse(new Date()) - data.result.order.add_at * 1000) > 60 * 3 * 1000) {
            $("#btnCheck").text('订单超时').addClass('disabled');
            return
          }
          if (data.result.order.is_pay == 1) {
            PageReload();
          } else {
            $("#btnCheck").text('尚未支付').addClass('disabled');
            let i = 20;
            let intervalTimer = setInterval(()=>{
              $("#btnCheck").text('尚未支付('+i+')');
              i = i - 1;
              if (i == 0) {
                clearInterval(intervalTimer);
                $("#btnCheck").text('完成支付').removeClass('disabled');
              }
            }, 1000);
          }
        }
      })
      .fail(function() {
        console.log("error");
      });
    }

    $("#btnBuy20").click(function(event) {
      BuyCard(1);
    });
    $("#btnBuy100").click(function(event) {
      BuyCard(2);
    });
  </script>
  {{ template "_analytics.htm" }}
</body>
</html>
{{ end }}