{echo:JS::import('dialog?skin=simple');}
{if:$order['type']==0}
{set:$items=array("购物车","确认订单信息","选择支付","订购完成");}
{widget:name=sub_navs action=crumbs items=$items step=4 current=3}
{else:}
{set:$items=array("确认订单信息","选择支付","订购完成");}
{widget:name=sub_navs action=crumbs items=$items step=3 current=2}
{/if}
<div class="container">
    <form action="{url:/payment/dopay}" method="post" target="_blank">
        <input type="hidden" name="order_id" value="{$order['id']}">
        <div class="status-bar">
            <span><i class="icon-success-48"></i>订单已成功提交！</span>
       </div>
       <div class="mt10">
        <table class="table table-line">
            <tr> <td style="width:200px;">订单编号：</td><td><i class="icon-order-{$order['type']} ie6png"></i>{$order['order_no']} &nbsp;&nbsp;&nbsp;&nbsp;<a href="{url:/ucenter/order_detail/id/$order[id]}" target="_blank" class="red"> 查看订单>> </a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:tools_reload()" class=" btn btn-mini">刷新</a></td> </tr>
            <tr> <td style="width:200px;">订单金额：</td><td class="red">{$currency_symbol}{$order['order_amount']}</td> </tr>
            <tr> <td style="width:200px;">支付方式：</td><td id="pay_name" class="bold">{$order['payment']}</td> </tr>
        </table>
        <div class="mt10">
            <a href="javascript:;" id="voucher-btn" style="line-height: 32px;height:32px;font-weight:800"><i class="icon-plus-1-16"></i> 其它支付方式：</a>
        </div>
       <!--  <table class="default mt20"  style="display:none;">
            {query:name=payment as pa fields=pa.*,pp.class_name join=left join pay_plugin as pp on pa.plugin_id eq pp.id where=pa.status eq 0 and (pa.client_type eq 0 or pa.client_type eq 2) order=pa.sort desc}
            <tr><td width="200px;"><label><input type="radio" id="{$item['class_name']}" name="payment_id" value="{$item['id']}" {if:$item['id']==$order['payment']}checked="checked"{/if} data-name="{$item['pay_name']}"> {$item['pay_name']} </label> {if:$item['note']!=''}<span class="fr"><a class="payment-note" href="#" note="{echo:htmlspecialchars($item['note'])}">详情</a></span>{/if}
            </td></tr>
            {/query}
        </table> -->
            <div class="clearfix" id="payment-list" style="display:none;">
                <ul class="payment-list">
                    {query:name=payment as pa fields=pa.*,pp.logo,pp.class_name  join=left join pay_plugin as pp on pa.plugin_id eq pp.id  where=pa.status eq 0 and (pa.client_type eq 0 or pa.client_type eq 2) order=pa.sort desc}
                    <li ><input type="radio" id="{$item['class_name']}" name="payment_id" value="{$item['id']}" {if:$item['id']==$order['payment']}checked="checked"{/if} data-name="{$item['pay_name']}"><label><b>{$item['pay_name']}</b> {$item['pay_desc']}</label>
                    <div><img src="{url:@protected/classes/$item[logo]}"></div>
                    </li>
                    {/query}
                </ul>
            </div>
        <div class="clearfix">
            {widget:name=pay_bank action=bank}
            {set:$order_name = '订单号：'.$order['order_no'];}
            {widget:name=pay_weixin action=weixin order_no=$order['order_no'] order_amount=$order['order_amount'] order_name=$order_name}
        </div>
    </div>

    <div class="blank">
        <p class="tc"><input class="btn btn-main" type="submit" value="立即支付"></p></div>
    </form>
</div>

<script type="text/javascript">
    $("#voucher-btn").on("click",function(){
        $("#payment-list").toggle();
        if($("i",this).hasClass("icon-plus-1-16")){
            $("i",this).removeClass("icon-plus-1-16");
            $("i",this).addClass("icon-minus-1-16");
        }
        else{
            $("i",this).removeClass("icon-minus-1-16");
            $("i",this).addClass("icon-plus-1-16");
        }
    });
    $("#payment-list input[type='radio']").each(function(){
        if(!!$(this).attr("checked")) $("#pay_name").text($(this).attr("data-name"));
        $(this).on("click",function(){
            $("#pay_name").text($(this).attr("data-name"));

        })
    });

    $(".payment-list li").each(function(){
        $(this).has("input[name='payment_id']:checked").addClass("selected");
        $(this).on("click",function(){
            $(".payment-list li").removeClass("selected");
            $("input[name='payment_id']").removeProp("checked");
            var current_input = $("input[name='payment_id']",this);
            current_input.prop("checked","checked");
            current_input.trigger('change');
            $("#pay_name").text(current_input.attr("data-name"));
            $(this).addClass("selected");
        });
    });

    $(".payment-note").on("mouseenter",function(){
        if($(this).attr('note')!='')art.dialog({id:'payment-note',cancel:false,follow:this,content:$(this).attr('note')});
    })
    $(".payment-note").on("mouseleave ",function(){
        art.dialog({id:'payment-note'}).close();
    })
</script>
