{extend name="Public/base" /}
{block name="js"}
<script src="__PUBLIC__/item/lay/modules/laypage.js?v={$Think.const.APP_VERSION}"></script>
<script>
    $(function(){
        $(".nul_bli").eq(4).find(".navb").addClass("active");
//        $(".navb.active").parent().find(".nul_s .nul_sli").eq(2).find(".navs").addClass("active");
    })
</script>
{/block}
{block name="css"}
<link rel="stylesheet" href="__PUBLIC__/item/css/layui.css?v={$Think.const.APP_VERSION}">
<link rel="stylesheet" href="__PUBLIC__/css/customer.css?v={$Think.const.APP_VERSION}">
<link rel="stylesheet" href="__PUBLIC__/css/set.css?v={$Think.const.APP_VERSION}">
{/block}
{block name="main"}
<div class="if_wrap">
    <div class="cus-con">
        <div class="set_tit" style="overflow: hidden"><span>小组设定</span></div>
        <div class="set-group-left">
            <div class="set-top">
            <button class="layui-btn add-btn" data-type="add">新增小组</button>
            </div>
            <div class="group-tit">本店小组列表</div>
            <table class="layui-table" lay-data="{height:700,url:'/crm/setting/getGroupToJSON.html', id:'idTest'}"  lay-filter="demo">
                <thead>
                <tr>
                    <th lay-data="{width:55,field:'id',sort: true,align:'center',templet: '#titleTpl'}">序号</th>
                    <th lay-data="{width:100,field:'group_name',align:'center'}">小组名</th>
                    <th lay-data="{width:100,field:'department_name',align:'center'}">所属部门</th>
                    <th lay-data="{width:100,field:'create_staff_name',align:'center'}">管理员</th>
                    <th lay-data="{width:140,field:'score',align:'center', toolbar: '#barDemo'}">操作</th>
                </tr>
                </thead>
            </table>
        </div>
       <div class="set-group-right" style="padding-top: 75px;">
            <div class="set-row">
                <div class="layui-inline">
                    <label class="layui-form-label" style="font-size: 20px;">{if $group_info.group_name}当前小组：{$group_info.group_name}{/if}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{if $group_info.create_staff_id eq $Think.session.staff_id}管理员{/if}</label>
                </div>
            </div>
            <div class="set-row">
                <div class="layui-inline">
                    <label class="layui-form-label" style="color: #ff0000;">提示：</label>
                    <div class="layui-input-block  w-355 ts-txt">
                        1.必须先创建小组后才能添加组员，一人一组；<br>
                        2.添加删除人员只有管理员有权限；<br>
                        3.小组是隶属于部门下面的，所以创建小组要先选部门；<br>
                        4.有创建小组权限的人才能创建小组，包括指定部门，指定小组管理员；<br>
                        4.删除小组只有各组管理员有权限；<br>
                    </div>
                </div>
            </div>
    </div>
</div>
<script type="text/html" id="titleTpl">
    {{d.LAY_TABLE_INDEX+1}}
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-mini" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">删除</a>
</script>
{/block}
<script>
    {block name="script"}
    var listStr=function(name){
        var str="";
        for(var i=0;i<$(name).length;i++){
            var text=$(name).eq(i).html();
            var listid=$(name).eq(i).attr("id");
            if(i==$(name).length-1){
                str+=listid;
            }else{
                str+=listid+',';
            }
        }
        return str;
    };
    layui.use('form', function () {
        var form = layui.form;
        form.on('select(department_group)', function (data) {
            var department_id = data.value;
            $.ajax({
                type: "POST",
                url: 'getDepartmentStaffs',
                data: "department_id="+department_id,
                success: function (msg) {
                    var replace = '<select name="staff_id" id="staff_id' +
                            '" lay-filter="staff" class="cus-input" ><option value="">请选择员工</option>';
                    for (var i = 0; i < msg.length; i++) {
                        replace += '<option value="' + msg[i]['id'] + '">' + msg[i]['staffname'] + '</option>';
                    }
                    replace += '</select>';
                    $("#staff_group").html(replace);
                    $("#edit_staff_group").html(replace);
                    form.render();
                }
            });
        });
        form.on('select(edit_department_group)', function (data) {
            var department_id = data.value;
            $.ajax({
                type: "POST",
                url: 'getDepartmentStaffsInGroup',
                data: "department_id="+department_id,
                success: function (msg) {
                    var replace = '<select name="staff_id" id="edit_staff_id' +
                            '" lay-filter="staff" class="cus-input" ><option value="">请选择员工</option>';
                    for (var i = 0; i < msg.length; i++) {
                        replace += '<option value="' + msg[i]['id'] + '">' + msg[i]['staffname'] + '</option>';
                    }
                    replace += '</select>';
                    $("#edit_staff_group").html(replace);
                    form.render();
                }
            });
        });
    })
    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; //元素操作
        //监听工具条
        table.on('tool(demo)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                    , layEvent = obj.event; //获得 lay-event 对应的值
            if (layEvent === 'detail') {
                layer.msg('查看操作');
            } else if (layEvent === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    var id = obj.data.id;
                    //向服务端发送删除指令
                    $.ajax({
                        type: "POST",
                        url: "delGroup",
                        data: {id:id},
                        dataType:'json',
                        success: function(ret){
                            if(ret.code == 200){
                                layer.alert(ret.msg);
                                table.reload('idTest', {
                                });
                            }else{
                                layer.alert(ret.msg);
                                table.reload('idTest', {
                                });
                            }
                        },
                        error:function(XMLHttpRequest, textStatus, errorThrown){
                            var ret = XMLHttpRequest.responseJSON
                            layer.alert('操作失败');
                        }
                    })
                    obj.del(); //删除对应行（tr）的DOM结构
                    layer.close(index);
                    //向服务端发送删除指令
                });
            } else if (layEvent === 'edit') {
                load_page(
                        '/crm/Setting/editGroup.html?id='+obj.data.id,
                        '修改小组',
                        function(){
                            editGroup(obj.data.id);
                        },['保存','取消'],500,575
                );
            }
        });
        //添加店面事件
        $(".add-btn").click(function () {
            load_page(
                    '/crm/Setting/editGroup.html',
                    '添加小组',
                    function(){
                        editGroup();
                    },['保存','取消'],500,575
            );
        });
        $(".clear").click(function () {
            var id = $("#group_id").val();
            $.ajax({
                type: "POST",
                url: "{:Url('crm/Setting/delGroup')}",
                data: {id:id},
                dataType:'json',
                success: function(ret){
                    if(ret.code == 200){
                        layer.alert(ret.msg);
                    }else{
                        layer.alert(ret.msg);
                    }
                },
                error:function(XMLHttpRequest, textStatus, errorThrown){
                    var ret = XMLHttpRequest.responseJSON
                    layer.alert('操作失败');
                }
            });
        })
        var isAdmin = $('#isAdmin').val();
        var isGroupStaff = $('#isGroupStaff').val();
//        if(isGroupStaff){
            //双击添加和移除事件
            $(".all-list-contain").delegate("li","dblclick",function(){
                var removeDom=$(this).remove();
                $(".recive-list-contain").append(removeDom);
//                $.ajax({
//                    type: "POST",
//                    url: "{:Url('crm/Setting/addToGroup')}",
//                    data: {staff_id:$(this)[0]['id']},
//                    dataType:'json',
//                    success: function(ret){
//                        layer.alert(ret.msg);
//                    },
//                    error:function(XMLHttpRequest, textStatus, errorThrown){
//                        var ret = XMLHttpRequest.responseJSON
//                        layer.alert('操作失败');
//                    }
//                });
            });
            $(".recive-list-contain").delegate("li","dblclick",function(){
                var removeDom=$(this).remove();
                $(".all-list-contain").append(removeDom);
//            console.log($(this)[0]['id'])
//                $.ajax({
//                    type: "POST",
//                    url: "{:Url('crm/Setting/delFromGroup')}",
//                    data: {staff_id:$(this)[0]['id']},
//                    dataType:'json',
//                    success: function(ret){
//                        layer.alert(ret.msg);
//                    },
//                    error:function(XMLHttpRequest, textStatus, errorThrown){
//                        var ret = XMLHttpRequest.responseJSON
//                        layer.alert('操作失败');
//                    }
//                });
            })
//        }

    })
    {/block}
</script>