{template '_header'}
<style type='text/css'>
    .feed-element .title {
        font-size: 14px;
        font-weight: bold;
        height: 32px;
        margin-top: 10px;
    }

    .feed-activity-list .feed-element {
        border: none;
        border-right: 1px solid #f2f2f2;
    }

    .feed-element img.img-circle,
    .dropdown-messages-box img.img-circle {
        width: 60px;
        height: 60px;
        border-radius: 10px;
    }
    .page-content{width:auto !important;}
    .panel{
        box-shadow: none;
    }
</style>
<link href="{php echo EWEI_SHOPV2_LOCAL}static/css/plugingrant.css" rel="stylesheet">
<div class="page-header">
    <span class='pull-right'>
        <!--<a class='btn btn-default btn-sm' href="{php echo webUrl('plugingrant')}">返回授权应用</a>-->
    </span>
    当前位置：<span class="text-primary">选择支付方式</span>
</div>

<div class="page-content">
<div class='panel panel-default' style='border:none;'>
    <div class="grant-detail-container">
        <div class="cashier-info">
            <div class="user-info global-clearfix" style="padding:10px 0 20px;">
                <span class="product-type-title" style="float:left;padding-top:2px;">应用名称：</span>
                <span class="ca-form-option">
                    {$title}
                </span>
            </div>
            <div class="wallet-dialog" style="display: block;">
                <div class="content global-clearfix">
                    <div class="wallet-content">
                        <div class="product-info" id="_disk_id_5">
                            <div class="info-vip">
                                <span class="product-type-title" style="padding-top:14px;display: block;float:left;">开通时长：</span>
                                <div class="info-box-time">
                                    <div class="info-time" id="info-svip-time"></div>
                                </div>
                                <div class="info-box-time">
                                    <div class="info-time" id="info-vip-time"></div>
                                    <div class="info-product info-product-vip">
                                        <ul class="product-list global-clearfix vip-ul no-view">
                                            {if $item['data']}
                                            {loop $item['data'] $index $row}
                                            <li data-pid="3" class="item item-first {if $index==0}item-link-active{/if}" data-price="{$row['price']}" data-month="{$row['date']}">
                                                <a class="item-link global-clearfix" href="javascript:void(0);">
                                                    <label class="">
                                                        <span>{if $row['date']==0}永久{else}{$row['date']}个月{/if}</span></label>
                                                    <span class="detail">
                                                      <span class="detail-row">
                                                        <span>&yen;</span>{$row['price']}</span>
                                                    </span>
                                                </a>
                                                <em class="discount-icon discount-s-1"></em>
                                                <em class="active-icon"></em>
                                            </li>
                                            {/loop}
                                            {else if $package['data']}
                                            {loop $package['data'] $index $row}
                                            <li data-pid="3" class="item item-first {if $index==0}item-link-active{/if}" data-price="{$row['price']}" data-month="{$row['date']}">
                                                <a class="item-link global-clearfix" href="javascript:void(0);">
                                                    <label class="">
                                                        <span>{if $row['date']==0}永久{else}{$row['date']}个月{/if}</span></label>
                                                    <span class="detail">
                                                      <span class="detail-row">
                                                        <span>&yen;</span>{$row['price']}</span>
                                                    </span>
                                                </a>
                                                <em class="discount-icon discount-s-1"></em>
                                                <em class="active-icon"></em>
                                            </li>
                                            {/loop}
                                            {/if}
                                            <div style="clear:both;"></div>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="ca-tabs-panel" id="alipay-panel" style="display: block;">
                        <div class="ca-form-group clearfix">
                            <span class="product-type-title" style="float:left;padding-top:10px;">支付方式：</span>
                            <div class="ca-form-group clearfix">
                                <ul class="ca-form-option choose-list-icon channel-list">
                                    <li class="selected option-selected">
                                        {if $setting['alipay']>0}
                                        <label class="option-icon" data-pay="alipay"><img src="{php echo EWEI_SHOPV2_LOCAL}static/images/plugingrant/alipay.png" alt=""><em class="active-icon"></em></label>
                                        {/if}
                                        {if $setting['weixin']>0}
                                        <label class="option-icon" data-pay="weixin"><img src="{php echo EWEI_SHOPV2_LOCAL}static/images/plugingrant/weixin.png" alt=""><em class="active-icon"></em></label>
                                        {/if}
                                    </li>
                                </ul>
                            </div>
                            <div class="qrcode-wrapper">
                                <div class="qrcode-err hidden">
                                    <span class="qrcode-err-desc"></span>
                                </div>
                            </div>
                        </div>
                        <div class="ca-form-group clearfix" style="padding:10px 0;">
                            <span class="product-type-title" style="float:left;padding-top:5px;">应付金额：</span>
                            <span class="ca-form-option">
                                <span class="ca-spec-num ca-pay-amount">--</span>
                                <span class="ca-unit">元</span>
                            </span>
                        </div>
                        <div class="option-qrcode" id="option-qrcode" style="padding:10px 0 10px 80px;display: none;"><span class="ca-btn-loading">正在生成支付二维码</span></div>
                        <div class="ca-group ca-group-submit">
                            <a href="javascript:void(0);" id="pay-btn-a" class="fn-submit-btn sbtn-primary " style="display: none;">立即支付</a>
                            <span class="ca-btn-loading"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<script type="text/javascript" src="../addons/{EWEI_SHOP_V2_MODULE_NAME}/static/js/dist/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../addons/{EWEI_SHOP_V2_MODULE_NAME}/static/js/dist/jquery/jquery.qrcode.min.js"></script>
<script>
    $(function () {
        var paytype = $(".option-selected .option-icon.active").attr("data-pay");
        var price = $(".product-list .item.item-link-active").attr("data-price");
        var month = $(".product-list .item.item-link-active").attr("data-month");

        $(".ca-pay-amount").html(price);
        $(".option-selected .option-icon").off("click").on("click",function () {
            $(".option-selected .option-icon").removeClass("active");
            $(this).addClass("active");
            paytype = $(this).attr("data-pay");
            payurl(paytype,price,month);
        });
        $(".product-list .item").off("click").on("click",function () {
            $(".product-list .item").removeClass("item-link-active");
            $(this).addClass("item-link-active");
            price = $(this).attr("data-price");
            month = $(this).attr("data-month");
            $(".ca-pay-amount").html(price);
            payurl(paytype,price,month);
        })
    });
    function payurl(paytype,price,month) {
        /*paytype = $(".option-selected .option-icon.active").attr("data-pay");
         price = $(".product-list .item.item-link-active").attr("data-price");
         month = $(".product-list .item.item-link-active").attr("data-month");*/
        /*console.log(paytype,price,month,code);
         return false;*/

        if(paytype=="weixin"){
            $.ajax({
                url:"{php echo webUrl('plugingrant/payon')}",
                type:'POST', //GET
                async:true,    //或false,是否异步
                data:{
                    id:{$id},cate:"{$cate}",paytype:"wechat",price:price,month:month
                },
                timeout:5000,    //超时时间
                dataType:'json',    //返回的数据格式：json/xml/html/script/jsonp/text
                success:function(data){
                    var result = data.result;
                    if(data.status==1){
                        var url = result.code_url;
                        $("#option-qrcode").empty().qrcode({
                            typeNumber: 0,      //计算模式
                            correctLevel: 0,//纠错等级
                            text:url
                        });
                        var url = "{php echo webUrl('plugingrant/paystatus')}";
                        var data = {logno: result.logno};
                        var url_return = "{php echo webUrl('plugingrant')}";
                        var settime = setInterval(function () {
                            $.getJSON(url, data, function (ret) {
                                if (ret.status >=1) {
                                    clearInterval(settime);
                                    location.href = url_return;
                                }else{
                                    //FoxUI.toast.show(JSON.stringify(ret));
                                }
                            })
                        }, 3000);
                    }
                }
            })
            $("#option-qrcode").show();
            $("#pay-btn-a").hide();
        }else{
            $(".option-qrcode").hide();
            if(paytype && price){
                $("#pay-btn-a").show();
            }

            $.ajax({
                url:"{php echo webUrl('plugingrant/payon')}",
                type:'POST', //GET
                async:true,    //或false,是否异步
                data:{
                    id:{$id},cate:"{$cate}",paytype:"alipay",price:price,month:month
                },
                timeout:5000,    //超时时间
                dataType:'json',    //返回的数据格式：json/xml/html/script/jsonp/text
                success:function(data){
                    $("#pay-btn-a").attr("href",data.result.url);
                }
            })

        }
    }
</script>
{template '_footer'}