{extend name="Public/base" /}
{block name="css"}
<link rel="stylesheet" href="__PUBLIC__/css/set.css?v={$Think.const.APP_VERSION}">
<style>
    .layui-table .layui-form-checkbox[lay-skin="primary"]{
        padding-top: 6px;
    }
</style>
{/block}
{block name="js"}
<script>
    $(function(){
        // $(".nul_bli").eq(5).find(".navb").addClass("active");
    })
    // function allCkb(items){
    //     $('input[name='+items+']').attr("checked", true);
    // } 
    // function inverseCkb(items){
    //     $('input[name='+items+']').each(function(){
    //         //此处用jq写法颇显啰嗦。体现不出JQ飘逸的感觉。
    //         $(this).attr("checked", !$(this).attr("checked"));
    //         //直接使用js原生代码，简单实用
    //         //this.checked=!this.checked;
    //     });
    //  }
</script>
{/block}
{block name="main"}
<div class="if_wrap">
    <div class="cus-con">
        <div class="set_tit">
            <span>人员渠道匹配</span>
        </div>
        <div class="set-top layui-form" style="min-width: 1130px;">
            <div class="mkz_title">人员：</div>
            <div class="layui-input-inline">
                <select id="staff_id" name="staff_id"  lay-verify="required" lay-search="">
                    <option value="">请选择</option>
                    {volist name="staff_name" id="s"}
                    <option value="{$s.id}">{$s.staffname}</option>
                    {/volist}
                </select>
            </div>
            <button class="layui-btn" id="btn" style="margin-left: 10px;">查询</button>
        </div>
        <table class="layui-table layui-form" lay-filter="msgTable">
            <colgroup>
              <col width="60">
              <col width="100">
              <col>
              <col>
            </colgroup>
            <thead>
            <tr>
                <th>序号</th>
                <th>人员</th>
                <th>渠道</th>
            </tr>
            </thead>
            <tbody>
            <tr id="where">
            </tr>
            {volist name="list" key="key" id="s"}
            <tr class="list layui-form" lay-filter="test{$s.id}">
                <td>{$key}</td>
                <td>{$s.staffname}</td>
                <td>
                    <div class="layui-btn layui-btn-fluid all-btn" data-id="{$s.id}">全选</div>
                    <div class="layui-btn layui-btn-fluid reverse-btn" data-id="{$s.id}">反选</div>
                    <!-- {volist name="s.trench_arr" key="k" id="v"}
                        <input class="elem-check" type="checkbox" names="{$s.staffname}" name="{$s.id}" value="{$v}" title="{$v}" lay-skin="primary" lay-filter="test{$s.id}" {eq name="s['trench_arr_type'][$k-1]" value='1'}checked{/eq}>
                    {/volist} -->{$s.trench_arr_types}
                    <div class="layui-btn layui-btn-fluid save-btn" data-id="{$s.id}">保存确认</div>
                </td>
            </tr>
            {/volist}
            </tbody>
        </table>
        {$page}
    </div>
</div>
<script type="text/javascript">
    // 表格
    layui.use(['form','laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element'], function(){
        var laydate  = layui.laydate, //日期
            form=layui.form,
            laypage  = layui.laypage, //分页
            layer = layui.layer, //弹层
            table    = layui.table, //表格
            carousel = layui.carousel, //轮播
            upload   = layui.upload, //上传
            element  = layui.element; //元素操作
            var saveCkb = function(items){
                var val = '';
                var id = '';
                var name = '';
                id = $('input[name='+items+']').attr("name");
                name = $('input[name='+items+']').attr("names");
                $.each($('input[name='+items+']'),function(index,dom){
                    if($(dom).is(':checked')){
                        val+=$(dom).val()+",";
                    }
                })
                if (!id&&!name&&!val) {layer.alert('传输参数丢失');return false;};
                $.ajax({
                    type: "POST",
                    url: '/crm/Setting/staffTrenchMate',
                    data: {staff_id:id,staff_name:name,trench:val},
                    success: function (msg) {
                        layer.alert(msg.msg);
                    }
                });
            } 
            var allCkb = function(items){
                var val = '';
                var id = '';
                var name = '';
                $('input[name='+items+']').attr("checked", true);
                form.render("checkbox","test"+items);
                // id = $('input[name='+items+']').attr("name");
                // name = $('input[name='+items+']').attr("names");
                // $.each($('input[name='+items+']'),function(index,dom){
                //     if($(dom).is(':checked')){
                //         val+=$(dom).val()+",";
                //     }
                // })
                //mate(id,name,val);
            } 
            var inverseCkb = function(items){
                var val = '';
                var id = '';
                var name = '';
                $('input[name='+items+']').each(function(index,dom){
                    $(this).attr("checked", !$(this).attr("checked"));
                    // id = $('input[name='+items+']').attr("name");
                    // name = $('input[name='+items+']').attr("names");
                    // if($(dom).is(':checked')){
                    //     val+=$(dom).val()+",";
                    // }
                });
                form.render("checkbox","test"+items);
                //mate(id,name,val);
            }
            $("body").on("click","td .layui-btn.layui-btn-fluid",function(){
                var thisId=$(this).attr("data-id");
                if($(this).hasClass("all-btn")){
                    allCkb(thisId);
                }else if($(this).hasClass("reverse-btn")){
                    inverseCkb(thisId);
                }else if($(this).hasClass("save-btn")){
                    saveCkb(thisId);
                }
            })
            // form.on('checkbox', function(data){
            //     // var arr=[];
            //     // $.each($(data.elem).parents("tr").find(".elem-check"),function(index,dom){
            //     //     var obj={};
            //     //     obj.id=$(dom).attr("name");
            //     //     obj.value=$(dom).val();
            //     //     if($(dom).is(':checked')){
            //     //         obj.isCheked=1;
            //     //     }else{
            //     //         obj.isCheked=0;
            //     //     }
            //     //         arr.push(obj);
            //     // })
            //     // console.log(val);
            //     var val = '';
            //     var id = '';
            //     var name = '';
            //     $.each($(data.elem).parents("tr").find(".elem-check"),function(index,dom){
            //         id = $(dom).attr("name");
            //         name = $(dom).attr("names");
            //         if($(dom).is(':checked')){
            //             val+=$(dom).val()+",";
            //         }
            //     })
            //     //console.log(id);
            //     mate(id,name,val);
            // }); 

        $('#btn').click(function(){
            var staff_id = $('#staff_id').val();
            $.ajax({
                type: "POST",
                url: '/crm/Setting/staffTrenchWhere',
                data: {staff_id:staff_id},
                success: function (data) {
                    //console.log(data);
                    if(data.code == 200){
                        $('.list').remove();
                        $('#where').html(data.data);
                        form.render();
                    }else{
                        layer.alert(data.msg);
                    }
                }
            });
            // table.reload();
        })
        // function mate(id,name,val){
        //     if (!id&&!name&&!val) {layer.alert('传输参数丢失');return false;};

        //     $.ajax({
        //         type: "POST",
        //         url: '/crm/Setting/staffTrenchMate',
        //         data: {staff_id:id,staff_name:name,trench:val},
        //         success: function (msg) {
        //             layer.alert(msg.msg);
        //         }
        //     });
        // }
    })
</script>
{/block}