{extend name="Public/base"/}
{block name="js"}
<script src="__PUBLIC__/js/layui-xtree.js?v={$Think.const.APP_VERSION}" type="text/jscript"></script>
<script>
    $(function(){
        $(".nul_bli").eq(3).find(".navb").addClass("active");
//		$(".navb.active").parent().find(".nul_s .nul_sli").eq(2).find(".navs").addClass("active");
    })
</script>
{/block}
{block name="css"}
    <style>
        html,body{
            width: 100%;
            height: 100%;
        }
        *{
            box-sizing: border-box;
        }
        .lhb-wrap{
            width: 100%;
            height: 100%;
            background:#00c896;
            background-size: 100% 100%;
            position: relative;
        }
        .lhb-bg-top{
            width: 100%;
            height: 18%;
            text-align: center;
            padding-top: 30px;
        }
        .lhb-bg-img{
            width: auto;
            height: 102%;
        }
        .lhb-con{
            position: absolute;
            top: 18%;
            left: 0;
            width: 100%;
            bottom: 0;
        }
        .lhb-container{
            width: 1000px;
            margin: auto;
            height: 100%;
            background: #fff;
            border-radius: 8px 8px 0 0;
            overflow: hidden;
        }
        .lhb-tit{
            height: 85px;
            line-height: 85px;
            width: 100%;
            color: #00b285;
            font-size: 26px;
            font-weight: bold;
        }
        .tit-line{
            display: inline-block;
            width: 52px;
            height: 12px;
            background: url("../img/tit-line01.png") no-repeat center center;
            margin: 0 20px;
        }
        .tit-line-right{
            background: url("../img/tit-line02.png") no-repeat center center;
        }
        .lhb-btm{
            width: 100%;
            height: calc(100% - 85px);
        }
        .flex{
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-box-align: center;
            -webkit-align-items: center;
            align-items: center;
            justify-content: center;
        }
        .radio-choose{
            float: right;
        }
        .layui-form-radioed i, .layui-form-radio i:hover,.layui-form-radioed span{
            color: #00b285;
        }
        .layui-tab-card{
            border:none;
            border-top:1px solid #d9f7ef;
            box-shadow: none;
            height: 100%;
            margin-top: 0;
        }
        .layui-tab-card > .layui-tab-title{
            background: none;
        }
        .layui-tab-title{
            background: none;
            border-bottom:1px solid #d9f7ef;
            height: 48px;
        }
        .layui-tab-card > .layui-tab-title .layui-this:after{
            border:1px solid #d9f7ef;
            height: 48px;
            border-top: 3px solid #00b285;
            border-bottom: 1px solid #fff;
        }
        .layui-tab-card > .layui-tab-title .layui-this{
            color: #00b285;
        }
        .layui-tab-title li{
            line-height: 48px;
            color: #666666;
            padding: 0 14px;
        }
        .layui-form-radio{
            line-height: 45px;
        }
        .layui-tab-content{
            width: 100%;
            height: calc(100% - 48px);
            padding: 20px;
        }
        /*表格样式*/
        .table-tit{
            background: #f2fcfa;
            border: 1px solid #d9f7ef;
            overflow: hidden;
        }
        .table-tit li{
            height: 50px;
            float: left;
            line-height: 48px;
            width: 16.35%;
            text-align: center;
            font-size: 14px;
            color: #555555;
        }
        .table-content{
            width: 100%;
            height: calc(100% - 50px);
            overflow: auto;
            border: 1px solid #d9f7ef;
            border-top: none;
        }
        .layui-tab-content .layui-tab-item{
            height: 100%;
        }
        .table-content li{
            width: 100%;
            overflow: hidden;
            height: 50px;
            line-height: 50px;
            border-bottom: 1px solid #d9f7ef;
        }
        .table-content li div{
            float: left;
            width: 16.5%;
            text-align: center;
        }
        .head-img img{
            width: 34px;
            height: 34px;
            overflow: hidden;
            border-radius: 50%;
        }
    </style>
{/block}
{block name="main"}
<div class="if_wrap">
    <div class="lhb-wrap">
        <div class="lhb-bg-top"><img class="lhb-bg-img" src="__PUBLIC__/img/rank.png" alt=""></div>
        <div class="lhb-con">
            <div class="lhb-container">
                <div class="lhb-top">
                    <div class="lhb-tit flex">
                        <span class="tit-line"></span>
                        <span class="tit-text">{$title}</span>
                        <span class="tit-line tit-line-right"></span>
                    </div>
                </div>
                <div class="lhb-btm">
                    <input type="hidden" id="did" value="{$did}">
                    <div class="layui-tab layui-tab-card">
                        <ul class="layui-tab-title">
                            <li class="layui-this click" id="g0" gid="0">全部({$all})</li>
                            {volist name="groupList" id="g"}
                            <li class="click" id="g{$g.id}" gid="{$g.id}">{$g.group_name}({$g.order|default=0})</li>
                            {/volist}
                            <div class="radio-choose layui-form">
                                <input type="radio" lay-filter="time" name="time" value="today" title="日">
                                <input type="radio" lay-filter="time" name="time" value="week" title="周">
                                <input type="radio" lay-filter="time" name="time" value="month" title="月" checked>
                            </div>
                        </ul>
                        <div class="layui-tab-content">
                                <ul class="table-tit">
                                    <li>排行</li>
                                    <li>人员</li>
                                    <li>头像</li>
                                    <li>手机号</li>
                                    <li>订单</li>
                                    <li>订单金额</li>
                                </ul>
                            <div class="layui-tab-item layui-show">
                            <ul class="table-content">
                                {volist name="return" id="ret"}
                                    <li>
                                        {if $key==0}
                                        <div class="rank-sign"><img src="__PUBLIC__/img/hs-01.png" alt=""></div>
                                        {elseif $key == 1}
                                          <div class="rank-sign"><img src="__PUBLIC__/img/hs-02.png" alt=""></div>
                                        {elseif $key == 2}
                                          <div class="rank-sign"><img src="__PUBLIC__/img/hs-03.png" alt=""></div>
                                        {else}
                                        <div class="rank-sign">{$key+1}</div>
                                        {/if}
                                        <div>{$ret.name}</div>
                                        <div class="head-img">{$sn}{$ret.photo}</div>
                                        <div>{$ret.tel}</div>
                                        <div>{$ret.order}</div>
                                        <div>{$ret.money}</div>
                                    </li>
                                {/volist}
                            </ul>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
<script>
    layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element'], function(){
        var laydate = layui.laydate //日期
                ,laypage = layui.laypage //分页
                ,layer = layui.layer //弹层
                ,table = layui.table //表格
                ,carousel = layui.carousel //轮播
                ,upload = layui.upload //上传
                ,element = layui.element; //元素操作
    });
    layui.use('form', function() {
        var form = layui.form;
        form.on('radio(time)', function (data) {
            var did = $('#did').val();
            var time = $('input[name=time]:checked').val();
            var gid = $('.layui-tab-title .layui-this').attr('gid');
            var index = layer.load(1, {shade: false}); //0代表加载的风格，支持0-2
            $.ajax({
                type: "POST",
                url: '/crm/Report/data.html',
                data: {id: 'Jz_staff_data', did: did, time: time, group_id: gid},
                success: function (msg) {
                    if (msg.code == 200) {
                        var data = msg.data;
                        var str = '<ul class="table-content">';
                        for (var i = 0; i < data.length; i++) {
                            str += '<li>';
                            str += '<div class="rank-sign">';
                            if(i==0){
                                str += '<img src="__PUBLIC__/img/hs-01.png" alt="">';
                            }else if(i == 1){
                                str += '<img src="__PUBLIC__/img/hs-02.png" alt="">';
                            }else if(i == 2){
                                str += '<img src="__PUBLIC__/img/hs-03.png" alt="">';
                            }else{
                                str += i+1;
                            }

                            str += '</div>';
                            str += '<div>'+data[i].name+'</div>';
                            str += '<div class="head-img">'+data[i].photo+'</div>';
                            str += ' <div>'+data[i].tel+'</div>';
                            str += ' <div>'+data[i].order+'</div>';
                            str += ' <div>'+data[i].money+'</div>';
                            str += '</li>';
                        }
                        $(".layui-show").html(str);
                        var ret = msg.gOrder;
                        $.each(ret,function(index,data1){
                            $('#g'+index).html(data1);
                        });
                        layer.close(index);
                        layui.form.render();
                    } else {
                        layer.alert(msg.msg);
                        layer.close(index);
                    }
                }
            })
        });
    })
    $('.click').click(function(){
        var did = $('#did').val();
        var time = $('input[name=time]:checked').val();
        var gid = $(this).attr('gid');
        var index = layer.load(1, {shade: false}); //0代表加载的风格，支持0-2
        $.ajax({
            type: "POST",
            url: '/crm/Report/data.html',
            data: {id: 'Jz_staff_data', did: did, time: time, group_id: gid},
            success: function (msg) {
                if (msg.code == 200) {
                    var data = msg.data;
                    var str = '<ul class="table-content">';
                    for (var i = 0; i < data.length; i++) {
                        str += '<li>';
                        str += '<div class="rank-sign">';
                        if(i==0){
                            str += '<img src="__PUBLIC__/img/hs-01.png" alt="">';
                        }else if(i == 1){
                            str += '<img src="__PUBLIC__/img/hs-02.png" alt="">';
                        }else if(i == 2){
                            str += '<img src="__PUBLIC__/img/hs-03.png" alt="">';
                        }else{
                            str += i+1;
                        }

                        str += '</div>';
                        str += '<div>'+data[i].name+'</div>';
                        str += '<div class="head-img">'+data[i].photo+'</div>';
                        str += ' <div>'+data[i].tel+'</div>';
                        str += ' <div>'+data[i].order+'</div>';
                        str += ' <div>'+data[i].money+'</div>';
                        str += '</li>';
                    }
                    $(".layui-show").html(str);
                    var ret = msg.gOrder;
                    $.each(ret,function(index,data1){
                        $('#g'+index).html(data1);
                    });
                    layer.close(index);
                    layui.form.render();
                } else {
                    layer.alert(msg.msg);
                    layer.close(index);
                }
            }
        })
    })
</script>
{/block}