{extend name="public/base"/}
{block name="style"}
<style>
    .tabli {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .tabli-li {
        width: 49.5%;
        height: 149px;
        border: 1px solid #ccc;
        margin-bottom: 20px;
    }

    .tabli-li-tit {
        width: 100%;
        height: 50px;
        line-height: 50px;
        border-bottom: 1px solid #ccc;
    }

    .tabli-li-tit p {
        font-size: 14px;
        color: #333;
        font-weight: bold;
        margin-left: 10px;
    }

    .tabli-li-z {
        width: 100%;
        height: 100px;
        border-bottom: 1px solid #ccc;
    }

    .tabli-li-z .first {
        width: 100%;
        height: 100px;
        display: flex;
        align-items: center;
        margin-left: 10px;
        flex-wrap: wrap;
        font-size: 1.7rem;
    }

    .tabli-li-x {
        width: 100%;
        height: 150px;
        display: flex;
        justify-content: space-between;
        font-size: 1.3rem;
    }

    .tabli-li-x-left {
        margin-top: 20px;
        margin-left: 10px;
    }

    .tabli-li-x-rt {
        margin-top: 20px;
        margin-right: 10px;
    }

    .from-so {
        width: 100%;
        margin-top: 20px;
    }

    .from-so .form-control {
        width: 200px;
        float: left;
        margin-right:20px;
    }

    .sobin {
        margin-left: 20px;
    }

    .tables-s th {
        text-align: center;
        font-size: 12px;
    }

    .tables-xs td {
        text-align: center;
    }

    .table tbody>tr>td {
        font-size: 14px;
        vertical-align: middle;
        border-top: 1px solid #e7ebee;
        padding: 12px 8px;
        font-weight: 400;
        color: #333333;
    }

    .table tbody>tr>td:first-child {
        font-size: 14px;
        vertical-align: middle;
        border-top: 1px solid #e7ebee;
        padding: 12px 8px;
        font-weight: 400;
        color: #333333;
    }

    .demo {
        width:100%;
    }

    .nav-tabs {
        font-size: 18px;
        color: #000;
    }

    .nav-tabs .active {
        font-weight: bold;
    }

    .nav-tabs>li>a {
        font-size: 13.5px;
        color: #000;
    }

    .nav-tabs>li.active>a {
        font-weight: bold;
        color: #000;
    }
    .colo{
        color:#C90D0D;
    }
</style>
{/block}
{block name="body"}
<div class="main-box no-header clearfix">
    <div class="main-box-body clearfix">
        <div class="tabli">
            <div class="tabli-li">
                <div class="tabli-li-tit">
                    <p>今天</p>
                </div>
                <div class="tabli-li-z">
                    <div class="first">充值<br>￥{if $day==''}0{else}{$day}{/if}</div>
                </div>
            </div>
            <div class="tabli-li">
                <div class="tabli-li-tit">
                    <p>昨日</p>
                </div>
                <div class="tabli-li-z">
                    <div class="first">充值<br>￥{if $yesterday==''}0{else}{$yesterday}{/if}
                    </div>
                </div>
            </div>
            <div class="tabli-li">
                <div class="tabli-li-tit">
                    <p>本月</p>
                </div>
                <div class="tabli-li-z">
                    <div class="first">充值<br>￥{if $month==''}0{else}{$month}{/if}</div>
                </div>
            </div>
            
            <div class="tabli-li">
                <div class="tabli-li-tit">
                    <p>上月</p>
                </div>
                <div class="tabli-li-z">
                    <div class="first">充值<br>￥{if $lastmonth==''}0{else}{$lastmonth}{/if}</div>
                </div>
            </div>
            
            <div class="tabli-li">
                <div class="tabli-li-tit">
                    <p>累计</p>
                </div>
                <div class="tabli-li-z">
                    <div class="first">充值<br>￥{if $money==''}0{else}{$money}{/if}</div>
                </div>
            </div>
        </div>

        <div class="demo">
            <div class="container">
                <div class="row">
                    <div class="col-md-offset">
                        <div class="tab" role="tabpanel">
                            <!-- Nav tabs -->
                            <ul class="nav nav-tabs" role="tablist">
                                <li role="presentation" class="active"><a href="#Section1" aria-controls="home"
                                        role="tab" data-toggle="tab">近6个月</a></li>
                                <li role="presentation"><a href="#Section2" aria-controls="profile" role="tab"
                                        data-toggle="tab">渠道汇总</a></li>
                                <!--<li role="presentation"><a href="#Section3" aria-controls="messages" role="tab"-->
                                <!--        data-toggle="tab">111</a></li>-->
                            </ul>
                            <!-- Tab panes -->
                            <div class="tab-content tabs">
                                <div role="tabpanel" class="tab-pane fade in active" id="Section1">
                                    <div class="panel panel-default col-sm-12" id="order-daily-stats-panel">
                                        <table class="table table-bordered table-striped"
                                            data-bind="visible: !loading()">
                                            <thead>
                                                <tr>
                                                    <th>日期</th>
                                                    <th class="text-right">充值金额</th>
                                                    <th class="text-right">充值人数</th>
                                                    <th class="text-right">充值笔数</th>
                                                </tr>
                                            </thead>
                                            <tbody data-bind="foreach: stats">
                                                {volist name="info" id="vo" key="k"}
                                                <tr>
                                                    <td><span data-bind="date: date">{$key}</span></td>
                                                    <td class="text-right">
                                                        <b>&yen; <span>{$vo.money}</span></b>
                                                    </td>
                                                    <td class="text-right">
                                                        <span>{$vo.userpaynum}</span></b>
                                                    </td>
                                                    <td class="text-right">
                                                        <span>{$vo.paybi}</span></b>
                                                    </td>
                                                </tr>
                                                {/volist}
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <div role="tabpanel" class="tab-pane fade" id="Section2">
                                    <div class="panel panel-default col-sm-12" id="order-daily-stats-panel">
                                        <table class="table table-bordered table-striped"
                                            data-bind="visible: !loading()">
                                            <thead>
                                                <tr>
                                                    <th>落地页</th>
                                                    <th class="text-right">充值金额</th>
                                                    <th class="text-right">充值人数</th>
                                                    <th class="text-right">充值笔数</th>
                                                    <th class="text-right">操作</th>
                                                </tr>
                                            </thead>
                                            <tbody data-bind="foreach: stats">
                                                {volist name="trinfo" id="vo" key="k"}
                                                <tr>
                                                    <td><span data-bind="date: date">{$vo.tid}<br>{$vo.text}</span></td>
                                                    <td class="text-right">
                                                        <b>&yen; <span>{if $vo.money==''}0{else}{$vo.money}{/if}</span></b>
                                                    </td>
                                                    <td class="text-right">
                                                        <span>{$vo.userpaynum}</span></b>
                                                    </td>
                                                    <td class="text-right">
                                                        <span>{$vo.paybi}</span></b>
                                                    </td>
                                                    <td class="text-right">
                                                        <a href="/admin/transfer/indexinfo?id={$vo.tid}" class="btn btn-info">详情</a>
                                                    </td>
                                                </tr>
                                                {/volist}
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>



    </div>
</div>
{/block}
{block name="script"}
<script src="/public/js/colResizable-1.6.min.js"></script>
<!-- datepicker statr -->
<link href="/public/plugs/datepicker/css/foundation-datepicker.min.css" rel="stylesheet" type="text/css">
<script src="/public/plugs/datepicker/js/foundation-datepicker.js"></script>
<script src="/public/plugs/datepicker/js/foundation-datepicker.zh-CN.js"></script>
<script>
    $(function () {
        //此处实现表格可拖放属性
        $("#table").colResizable({
            liveDrag: true,//实现实时拖动，可看见拖动轨迹
            draggingClass: "dragging", //防止拖动出险虚标线
        });
    });
    $('#startdata').fdatepicker({
        clearBtn: true,
        todayBtn: true,
        format: 'yyyy-mm-dd h:i',
        pickTime: true
    });
    $('#enddata').fdatepicker({
        clearBtn: true,
        todayBtn: true,
        format: 'yyyy-mm-dd h:i',
        pickTime: true
    });

</script>
{/block}