{extend name="Public/base"/}
{block name="css"}
<style>
    .layui-table-page {
        height: 26px;
        margin: -15px;
    }
    .layui-form-item .layui-input-inline {
        width: 170px !important;
    }
    .black .layui-btn-disabled{
        background:#FBFBFB;
    }
</style>
<link rel="stylesheet" href="__PUBLIC__/item/css/layui.css?v={$Think.const.APP_VERSION}">
<link rel="stylesheet" href="__PUBLIC__/css/set.css?v={$Think.const.APP_VERSION}">
<link rel="stylesheet" href="__PUBLIC__/css/statistics.css?v={$Think.const.APP_VERSION}">
{/block}
{block name="js"}
<script>
    $(function(){
        // $(".nul_bli").eq(5).find(".navb").addClass("active");
    })
</script>
{/block}
{block name="main"}
<div class="if_wrap">
    <div class="cus-con">
        <div class="set_tit">
            <span>{$title}</span>
            {auth code="menu1537322380"}
             <a class="layui-btn layui-btn-primary cus-model-btn" href="/crm/Logs/fplogs" target="_blank" style="width:auto;line-height: 30px">
                <i class="fa fa-child" style="font-size: 14px;margin-right: 5px"></i>分配日志
            </a>
            {/auth}
        </div>
        <div class="set-top layui-form layui-form-item">
            <label style="width:70px;" class="layui-form-label mkz_t1">查询店面</label>
            <div class="layui-input-inline">
                <select name="shop_code" id="shop_code" lay-filter="shop_code" lay-search="">
                    {volist name="shopList" id="vo"}
                    <option value="{$vo.shop_code}">{$vo.shop_name}</option>
                    {/volist}
                </select>
            </div>
            <button class="layui-btn layui-btn-primary cus-model-btn" id="sub" >
                查询
            </button>
        </div>
        <div style="width:100%">
            <div style="width: 48%;float: left;">
                <table class="layui-table" lay-data="{height:0, url:'/crm/Logs/onlineStaffList',id:'idTest', skin: 'row', even: true}" lay-filter="demo">
                    <thead>
                    <tr>
                    	<th lay-data="{width:74,align:'center',field:'id',align:'center',templet: '#titleTpl'}">序号</th>
                        <th lay-data="{width:110,align:'center',field:'staff'}">邀约客服</th>
                        <th lay-data="{width:120,align:'center',field:'login_time'}">登录时间</th>
                        <th lay-data="{width:110,align:'center',field:'sysData'}">自动分配数量</th>
                        <th lay-data="{width:110,align:'center',field:'otherData'}">手动分配数量</th>
                        <th lay-data="{width:100,align:'center',field:'allNum'}">总量</th>
                        <th lay-data="{width:110,align:'center',field:'status'}">状态</th>
                        <th lay-data="{width:105,field:'operation',align:'center',toolbar: '#operation'}">功能</th>
                    </tr>
                    </thead>
                </table>
            </div>
            <div style="width: 48%;float: right;">
                <fieldset class="layui-elem-field layui-field-title">
                    <legend> {$today}  签到详情</legend>
                </fieldset>
                {if $fpStatus eq 1}
                <div class="layui-tab layui-tab-card" lay-filter="test1">
                    <ul class="layui-tab-title">
                        {volist name="rule" id="r"}
                            <li lay-id="{$r.id}" {if $r.order_sort eq '9999'} class="layui-this" {/if}>{$r.customer_condition}</li>
                        {/volist}
                    </ul>
                    <div class="layui-tab-content">
                        {volist name="rule" id="r"}
                            {if $r.order_sort eq '9999'}
                                <div class="layui-tab-item layui-show">
                                    <table class="layui-table">
                                        <thead>
                                            <tr>
                                                <th>排序</th><th>员工</th><th>接收状态</th><th>在线状态</th><th>登录时间</th>
                                            </tr> 
                                        </thead>
                                        <tbody id="{$r.id}">
                                            {volist name="r.staffs" id="s"}
                                                <tr>
                                                    <td>{$i}</td><td>{$s.staff_name}</td><td>{$s.jr_status}</td><td>{$s.status}</td><td>{$s.login_time}</td>
                                                </tr>
                                            {/volist}
                                        </tbody>
                                    </table>
                                </div>
                            {else}
                                <div class="layui-tab-item">
                                    <table class="layui-table">
                                        <thead>
                                            <tr>
                                                <th>排序</th><th>员工</th><th>接收状态</th><th>在线状态</th><th>登录时间</th>
                                            </tr> 
                                        </thead>
                                        <tbody id="{$r.id}">
                                            <tr>
                                                <td></td><td></td><td></td><td></td><td></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            {/if}
                        {/volist}
                    </div>
                </div>
                {else}
                <div class="layui-tab layui-tab-card" lay-filter="test1">
                    <ul class="layui-tab-title">
                        <li>自动分配没有开启</li>
                    </ul>
                </div>
                {/if}
            </div>
        </div>
	</div>
</div>
<script src="__PUBLIC__/js/jquery-1.9.0.min.js?v={$Think.const.APP_VERSION}" type="text/jscript"></script>
<script type="text/html" id="operation">
    {{#  if(d.operation == 200){ }}
    <span class="layui-btn layui-btn-mini" lay-event="edit">签出</span>
    {{#  } else { }}
    <span class="layui-btn layui-btn-mini layui-btn-disabled">签出</span>
    {{#  } }}
</script>
<script type="text/javascript">
// 数据表格
layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element'], function(){
	var laydate  = layui.laydate, //日期
	    layer    = layui.layer, //弹层
	    table    = layui.table, //表格
	    element  = layui.element; //元素操作

    table.on('tool(demo)', function (obj) {
        var data = obj.data, //获得当前行数据
        layEvent = obj.event; //获得 lay-event 对应的值
        if(obj.event === 'edit'){
            var id = obj.data.id;
            layer.confirm('确定签出该网销吗？', function (index) {
                var id = obj.data.id;
                $.ajax({
                    type: "POST",
                    url: "{:Url('crm/Logs/staffQc')}",
                    data: {id:id},
                    dataType:'json',
                    success: function(ret){
                        layer.alert(ret.msg);
                        table.reload('idTest', {});
                    },
                    error:function(XMLHttpRequest, textStatus, errorThrown){
                        var ret = XMLHttpRequest.responseJSON
                        layer.alert('操作失败');
                    }
                })
            });
        }
    })
})
$(".layui-tab-title").on("click","li",function(){
    var layid=$(this).attr("lay-id");
    $.ajax({
        type: "POST",
        url: '/crm/Logs/ruleData',
        data: {rid:layid},
        success: function (msg) {
            var replace = '';
            for (var i = 0; i < msg.length; i++) {
                replace += '<tr>';
                replace += '<td>'+(i+1)+'</td><td>'+msg[i]['staff_name']+'</td><td>'+msg[i]['jr_status']+'</td><td>'+msg[i]['status']+'</td><td>'+msg[i]['login_time']+'</td>';
                replace += '</tr>';
            }
            console.log(replace);
            $("#"+layid).html(replace);
        }
    })
})

// 查询按钮
$("#sub").click(function(){
	// 生成表格
	var shop_code   = $('#shop_code').val();
    var index = layer.load(1, {shade: false}); //0代表加载的风格，支持0-2
	// 重新载入表格
	table.reload('idTest', {
        url: 'onlineStaffList',
        where: {shop_code:shop_code},
        done: function(res, curr, count){
            layer.close(index);
        }
    });
});
</script>
{/block}