{extend name="Public/base"/}
{block name="js"}
<script src="__PUBLIC__/layui245/layui.js?v={$Think.const.APP_VERSION}" type="text/jscript"></script>
<script>
    $(function(){
        $(".nul_bli").eq(3).find(".navb").addClass("active");
    })
</script>
{/block}
{block name="css"}
<style>
    .sel_box {
        height: 40px;
        width: 200px;
        border: 1px solid #bfccdd;
        background-color: #fff;
        border-radius: 2px;
        box-sizing: border-box;
        position: relative;
        display: inline-block;
        vertical-align: middle;
        cursor: pointer;
    }
    .sel_box_tit input {
        line-height: 40px;
        font-size: 12px;
        color: #777;
        width: 100%;
        height: 39px;
        box-sizing: border-box;
        border: none;
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none;
        outline: none;
        cursor: pointer;
    }
    .sel_box .layui-edge {
        position: absolute;
        right: 12px;
        top: 10px;
        cursor: pointer;
        border-top-style: solid;
        transition: all .3s;
        -webkit-transition: all .3s;
        display: inline-block;
        border-bottom: 1px solid #bfccdd;
        border-right: 1px solid #bfccdd;
        width: 7px;
        height: 7px;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    .black .layui-layer-title {
        background-color: #ffffff;
    }
    .set-top .layui-table-tool {
        overflow-x:initial;
    }
    .layui-table-tool-panel li .layui-form-checkbox[lay-skin="primary"] span{
        float: left;
    }
    .set-top #sub{
        margin-left: 25px;
    }
    .layui-table-page {
        margin-left: 4px;
        height: auto!important;
    }
    .cus-con .layui-form-item .layui-input-inline {
        float: left;
        width: 7%;
        margin-right: -20px;
    }
    .time{
        width: 160px !important;
        padding-right: 2px;
    }
    .sub {
        background: #01b88a;
        color: #fff;
        border: 1px solid #01b88a;
        font-size: 16px;
        margin-left: 25px;
    }
    .set-top .layui-form-select .layui-edge {
        position: absolute;
        right: 10px;
        top: 50%;
        margin-top: -3px;
        cursor: pointer;
        border-width: 1px;
        border-top-color: white;
        border-top-style: solid;
        transition: all .3s;
        -webkit-transition: all .3s;
    }
    .layui-form-checkbox[lay-skin="primary"] i{
        position: absolute;
    }
</style>
<!--<link rel="stylesheet" href="__PUBLIC__/css/checkbox.css?v={$Think.const.APP_VERSION}">-->
<link rel="stylesheet" href="__PUBLIC__/css/set.css?v={$Think.const.APP_VERSION}">
<link rel="stylesheet" href="__PUBLIC__/layui245/css/layui.css"  media="all">
{/block}
{block name="main"}
<div class="if_wrap">
    <div class="cus-con">
        <div class="set_tit"><span>{$title}</span></div>
        <div class="set-top layui-form layui-form-item">
            <label style="width:55px;" class="layui-form-label mkz_t1">渠道：</label>
            <div class="layui-input-inline layui-unselect layui-form-select downpanel cs">
                <div class="layui-select-title">
                    <input type="text" placeholder="请选择渠道" value="" readonly="" class="layui-input layui-unselect"><i class="layui-edge"></i>
                </div>
                <dl class="layui-anim layui-anim-upbit" style="">
                    {volist name="channel" id="vo"}
                    <dd><input type="checkbox" name="channel" title="{$vo.channel_name}" value="{$vo.channel_name}" lay-skin="primary" ></dd>
                    {/volist}
                </dl>
            </div>
            <label style="width:80px;" class="layui-form-label mkz_t1">小组：</label>
            <div class="layui-input-inline">
                <select name="group_id" id="group_id" lay-filter="group_id" lay-search="">
                    <option value="0">请选择</option>
                    {volist name="group" id="vo"}
                    <option value="{$vo.id}">{$vo.group_name}</option>
                    {/volist}
                </select>
            </div>

            <label class="layui-form-label mkz_t1">开始日期：</label>
            <div class="layui-input-inline" class="time">
                <input type="text" class="layui-input" id="start" name="timeArea" readonly="readonly" value="">
            </div>
            <label class="layui-form-label mkz_t1">结束日期：</label>
            <div class="layui-input-inline" class="time">
                <input type="text" class="layui-input" id="end" name="timeArea" readonly="readonly" value="">
            </div>

            <input type="hidden" id="did" value="{$did}">
            <button class="layui-btn layui-btn-primary cus-model-btn" flag="default" id="sub" class="sub">
                查询
            </button>
            <table class="layui-hide" id="test" lay-filter="test">

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


<script type="text/html" id="toolbarDemo">
</script>
<!--引用xtree-->
<script src="__PUBLIC__/js/layui-xtree.js?v={$Think.const.APP_VERSION}" type="text/jscript"></script>
<script>
    $(function(){
        $(".downpanel").on("click",".layui-select-title",function(e){
            var $select=$(this).parents(".layui-form-select");
            $(".layui-form-select").not($select).removeClass("layui-form-selected");
            $select.addClass("layui-form-selected");
            e.stopPropagation();
        }).on("click",".layui-form-checkbox",function(e){
            var id_array=[];
            e.stopPropagation();
            $("input:checkbox[name='channel']:checked").each(function() {
                id_array.push($(this).attr("title"));//向数组中添加元素
            });
            var idstr=id_array.join(',');//将数组元素连接起来以构建一个字符串
            $(".downpanel .layui-select-title .layui-input").val(idstr);
        });
    })
    //日历
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        laydate.render({
            elem: '#start'
            ,format: 'yyyy-MM-dd'
            ,max:0
            ,value:new Date()
        });
        laydate.render({
            elem: '#end'
            ,format: 'yyyy-MM-dd'
            ,max:0
            ,value:new Date()
        });
    });
    layui.use('table', function(){
        var table = layui.table;
        // 查询按钮
        $("#sub").click(function() {
            var start   = $('#start').val();
            var end   = $('#end').val();
            var did   = $('#did').val();
            var group_id   = $('#group_id').val();
            var channel=[];
            $("input:checkbox[name='channel']:checked").each(function() {
                channel.push($(this).val());//向数组中添加元素
            });
            var channel_name=channel.join(',');//将数组元素连接起来以构建一个字符串

            if (!start || typeof(start)=='undefined' || start.length <= 0) {
                layer.alert('请选择开始时间');
                return false;
            }
            if (!end || typeof(end)=='undefined' || end.length <= 0) {
                layer.alert('请选择结束时间');
                return false;
            }
            var index = layer.load(1, {shade: false}); //0代表加载的风格，支持0-2
                table.render({
                    elem: '#test'
                    , url: '/crm/Report/data'
                    , toolbar: '#toolbarDemo'
                    , title: '人员数据统计'
                    ,method:'POST'
                    ,where: {id:'Jj_staff_data',did:did, start:start,end:end,group_id:group_id,channel:channel_name}
                    , height: 'full-200'
                    , cols: [[
                          {field: 'id', title: 'ID', width: 80, align: 'center', sort: true}
                        , {field: 'staff_name', title: '人员',align: 'center', width: 100}
                        , {field: 'mkz', title: '总接客资',align: 'center', width: 100, sort: true}
                        , {field: 'valid', title: '有效',align: 'center', width: 100, sort: true}
                        , {field: 'validRate', title: '有效率',align: 'center', width: 100, sort: true}
                        , {field: 'wx', title: '无效',align: 'center', width: 100, sort: true}
                        , {field: 'wxRate', title: '无效率',align: 'center', width: 100, sort: true}
                        , {field: 'dd', title: '待确认', align: 'center',width: 100, sort: true}
                        , {field: 'ddRate', title: '待确认占比', align: 'center',width: 120, sort: true}
                        , {field: 'order', title: '成交', align: 'center',width: 100, sort: true}
                        , {field: 'zyOrder', title: '资源订单', align: 'center',width: 100, sort: true}
                        , {field: 'zyOrderRate', title: '资源订单成交率',align: 'center', width: 150, sort: true}
                        , {field: 'validOrderRate', title: '有效资源订单成交率',align: 'center', width: 200, sort: true}
                        , {field: 'allZyOrderRate', title: '总资源订单成交率',align: 'center', width: 200, sort: true}
                        , {field: 'orderRate', title: '订单成交率',align: 'center', width: 120, sort: true}
                        , {field: 'allOrderRate', title: '总订单成交率',align: 'center', width: 130, sort: true}
                    ]]
                    ,done: function(res, curr, count){
                        layer.close(index);
                    }
                });
        })
    });
</script>
{/block}