{% extends "../main.html" %}
{% block title %}升级会员{% end %}

{% block content %}
<style>
.level{letter-spacing: 2px;}
</style>
<!-- ############ Content START-->
<div id="content" class="flex ">
    <!-- ############ Main START-->
    <div>

        <div class="page-content page-container" id="page-content">
            <div class="padding">
                <div class="text-center p-5">
                    <h2 class="text-highlight">成为我们的会员</h2>
                    <p id="rate" style="display: none">{{ rate }}</p>
                </div>
                <div class="text-center">
                    <div class="block d-inline-flex">
                        <div class="p-4 p-sm-5 b-r">
                            <sup class="text-sm" style="top: -0.5em;">¥</sup><span class="h1">9888</span>
                            <div class="level text-muted">VIP</div>
                            <div class="py-4">
                                <button id="vip" href="javascript:void(0);" onclick="pay(this)" class="btn btn-sm btn-rounded btn-primary rate">购买</button>
                            </div>
                            {#                                        <small class="text-muted">End-product#}
                            {#                                            <strong>not</strong> for sale</small>#}
                        </div>
                        <div class="p-4 p-sm-5 b-r">
                            <sup class="text-sm" style="top: -0.5em;">¥</sup><span class="h1">28888</span>
                            <div class="level text-muted">PRO</div>
                            <div class="py-4">
                                <button id="pro" href="/" onclick="pay(this);return false;" class="btn btn-sm btn-rounded btn-primary rate">购买</button>
                            </div>
                            {#                                        <small class="text-muted">Unlimited End-product for sale</small>#}
                        </div>
                        <div class="p-4 p-sm-5">
                            <sup class="text-sm" style="top: -0.5em;">¥</sup><span class="h1">****</span>
                            <div class="level text-muted">企业版</div>
                            <div class="py-4">
                                <button id="ee" disabled href="/" onclick="pay(this);return false;" class="btn btn-sm btn-rounded btn-primary rate">即将开放</button>
                            </div>
                            {#                                        <small class="text-muted">Unlimited End-product for sale</small>#}
                        </div>
                    </div>
                </div>
{#               <div class="p-5 text-center">#} 
{#                   各版本之间的差异请参考官网标准#} 
{#               </div>#} 
            </div>
        </div>
    </div>
    <!-- ############ Main END-->
</div>
<!-- ############ Content END-->
                                                                    <!-- .modal -->
<div id="modal" class="modal fade" data-backdrop="true">
    <div class="modal-dialog ">
        <div class="modal-content box-shadow mb-4" style="-webkit-font-smoothing: antialiased !important;">
            <div class="modal-header" style="text-align: center;">
                <h5 class="modal-title" style="text-align: center;">确认支付</h5>
                <button class="close" data-dismiss="modal">×</button>
            </div>
            <div class="modal-body" style="text-align: center;">
                <p style="font-weight: 600;color: #000;">请您在新打开的页面进行支付!<br>
                    <span style="font-size: 12px;font-weight: 400;color: #f35252;
">支付完成前请不要关闭此窗口</span>
                </p>
            </div>
            <div class="modal-footer">
                <button class="btn btb-md btn-success"><a href="/member/pay_result">已支付</a></button>
                <button class="btn btn-xl btn-light" onclick="$('#modal').modal('hide');">支付失败</button>
            </div>
        </div>
                                    <!-- /.modal-content -->
    </div>
</div>


{% end %}
{% block js %}
    <script>
    let pay = function (obj) {
        let rate = $(obj).parent().prev().text();
        let base_url = '/member/buy?rate=';
        let url = base_url + rate;
        $('#modal').modal('show');
        setTimeout(function () {
            var tempwindow=window.open('about:blank', '_blank');
            tempwindow.location.href=url;
        }, 1000)
    };

    let disable_buy = function () {
        let rate = $('#rate').text();
        if(rate === 'free'){
            return
        }
        let all_a_tags = $('.rate');
        let middle = false;
        for(let i=0; i<all_a_tags.length; i++){
            if(middle === false){
                if($(all_a_tags[i]).attr('id') !== rate){
                    $(all_a_tags[i]).attr('disabled', true)
                }else{
                    $(all_a_tags[i]).text('续费');
                    $(all_a_tags[i]).addClass('bg-success');
                    $(all_a_tags[i]).removeClass('btn-primary');
                    middle = true;
                    return
                }
            }
        }
    };
    disable_buy();

</script>
{% end %}