{template '_header'}


<style>
    .panel-default {
        border-radius: 0;
        margin-bottom: 50px;
    }
    .panel-heading {
        border: 0;
        height: 44px;
        padding: 0;
    }
    .panel-heading.transparent {
        background: transparent;
        border-bottom: 1px solid #f2f2f2;
    }
    .panel-tab-small {
        float: right;
        line-height: 44px;
        font-size: 0;
        margin-right: 30px;
    }
    .panel-tab-small a {
        height: inherit;;
        font-size: 12px;
        color: #333;
        padding: 0 10px;position: relative;
        display: inline-block;
    }
    .panel-tab-small a.active:before {
        position: absolute;
        content: '';
        left: 8px;
        right: 8px;
        bottom: 0;
        border-bottom: 2px solid #44abf7;
    }
    .panel-tab {
        height: 44px;
        font-size: 0;
    }
    .panel-tab a {
        height: inherit;
        padding: 0 20px;
        line-height: 44px;
        font-size: 14px;
        color: #333;
        position: relative;
        display: inline-block;
    }
    .panel-tab a.active {
        color: #44abf7;
    }
    .panel-tab a.active:before {
        content: '';
        position: absolute;
        top: -1px;
        left: -1px;
        right: 0;
        border-top: 2px solid #44abf7;
        z-index: 1;
    }
    .panel-tab a.active:after {
        content: '';
        position: absolute;
        top: 0;
        left: -1px;
        right: 0;
        bottom: 0;
        border-left: 1px solid #f2f2f2;
        border-right: 1px solid #f2f2f2;
        border-bottom: 1px solid #fff;
    }

    .panel .panel-row {
        width: 100%;
        padding: 12px;
        border-bottom: 1px solid #e7eaec;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
    }
    .panel .panel-row.noborder {
        border: 0;
    }
    .panel .panel-col {
        width: 100%;
        padding: 9px 0;
        text-align: center;
        border-left: 1px solid #e7eaec;
    }
    .panel .panel-col:first-child,
    .panel .panel-col.noborder {
        border: 0;
    }
    .panel .panel-col p {
        font-size: 20px;
        color: #333;
    }
    .panel .panel-col p.title {
        font-size: 14px;
    }
    .panel .panel-col p.text-danger {
        color: #ec6060;
    }
    .panel .panel-col p.text-warning {
        color: #ffc000;
    }
    .thead {
        border: 0;
        background: #f4f4f4;
    }
    .table > thead > tr > th,
    .table > tbody > tr > td {
        border: 0;
        font-weight: normal;
        color: #333;
    }
    .table > tbody > tr > td.text-warning {
        color: #ffc000;
    }

</style>

<div class="page-heading"> <h2>会员概述</h2> </div>

<div class="panel panel-default">
    <div class="panel-heading">
        <div class="panel-tab-small">
            <a data-type='1' class="infodays active">今日</a>
            <a data-type='7' class="infodays">七日</a>
            <a data-type='30' class="infodays">本月</a>
        </div>
    </div>
    <div class="panel-body">
        <div class="panel-row">
            <div class="panel-col noborder">
                <p class="title">订单数</p>
                <p id="ordernum">{$info[1][ordernum]}</p>
            </div>
            <div class="panel-col noborder">
                <p class="title">销售额(元)</p>
                <p class="text-danger" id="salesnum">{$info[1][salesnum]}</p>
            </div>
            <div class="panel-col noborder">
                <p class="title">核销数</p>
                <p id="verifynum">{$info[1][verifynum]}</p>
            </div>
        </div>
        <div class="panel-row noborder">
            <div class="panel-col">
                <p class="title">维权金额</p>
                <p id="refundmoney">{$info[1][refundmoney]}</p>
            </div>
            <div class="panel-col">
                <p class="title">维权数</p>
                <p class="text-warning" id="refundnum">{$info[1][refundnum]}</p>
            </div>
        </div>
    </div>
</div>

<div class="panel panel-default">
    <div class="panel-heading transparent">
        <div class="panel-tab-small">
            <a data-type='1' class="listdays active">今日</a>
            <a data-type='7' class="listdays">七日</a>
            <a data-type='30'  class="listdays">本月</a>
        </div>

        <div class="panel-tab">
            <a  data-type='ordernumlist' class="showlist active">订单数排行</a>
            <a  data-type='salesnumlist'  class="showlist ">销售额排行</a>
            <a  data-type='verifynumlist' class="showlist ">核销数排行</a>
        </div>
    </div>
    <div class="panel-body ordernumlist  list">
        <table class="table">
            <thead class="thead">
            <th style="width: 20%">排序</th>
            <th>门店名称</th>
            <th style="width: 40%">订单数</th>
            </thead>
            <tbody class="tbody">
            {loop $list[1][ordernum] $key $item}
            <tr>
                <td>{php echo $key+1}</td>
                <td>{$item[storename]}</td>
                <td class="text-warning">{$item[num]}</td>
            </tr>
            {/loop}
            </tbody>
        </table>
    </div>
    <div class="panel-body salesnumlist list"  style="display: none;">
        <table class="table">
            <thead class="thead">
            <th style="width: 20%">排序</th>
            <th>门店名称</th>
            <th style="width: 40%">销售额</th>
            </thead>
            <tbody class="tbody ">
            {loop $list[1][salesnum] $key $item}
            <tr>
                <td>{php echo $key+1}</td>
                <td>{$item[storename]}</td>
                <td class="text-warning">{$item[num]}</td>
            </tr>
            {/loop}
            </tbody>
        </table>
    </div>
    <div class="panel-body verifynumlist  list" style="display: none;">
        <table class="table">
            <thead class="thead">
            <th style="width: 20%">排序</th>
            <th>门店名称</th>
            <th style="width: 40%">核销订单数</th>
            </thead>
            <tbody class="tbody">
            {loop $list[1][verifynum] $key $item}
            <tr>
                <td>{php echo $key+1}</td>
                <td>{$item[storename]}</td>
                <td class="text-warning">{$item[num]}</td>
            </tr>
            {/loop}
            </tbody>
        </table>
    </div>
</div>


<script language='javascript'>

    require(['bootstrap'],function(){
        var info = {php echo json_encode($info)};
        var list = {php echo json_encode($list)};

        $('.showlist').click(function (e) {
            $('.showlist').removeClass('active');
            $(this).addClass('active');
            $('.list').hide();
            var a = $(this).data('type');
            $('.'+a).show();
        })

        $('.listdays').click(function (e) {
            $('.listdays').removeClass('active');
            $(this).addClass('active');

            var a = $(this).data('type');

            $.each(list[a],function(index,value){

                var html="";
                $.each(list[a][index],function(index2,value2){

                    html+="<tr>";
                    html+="<td>"+index2+"</td>";
                    html+="<td>"+value2['storename']+"</td>";
                    html+="<td class='text-warning'>"+value2['num']+"</td>";
                    html+="</tr>";

                });

                $('.'+index+'list').find('tbody').html(html);
            });

        })

        $('.infodays').click(function (e) {
            $('.infodays').removeClass('active');
            $(this).addClass('active');
            var a = $(this).data('type');

            $('#ordernum').html( info[a]['ordernum']);
            $('#salesnum').html( info[a]['salesnum']);
            $('#verifynum').html( info[a]['verifynum']);
            $('#refundmoney').html( info[a]['refundmoney']);
            $('#refundnum').html( info[a]['refundnum']);

        })



    });

</script>

{template '_footer'}