{{include "com/inc.html"}}
<!-- Main Header -->
{{include "com/header.html"}}
<!-- Left side column. 权限菜单 -->
{{include "com/menu.html"}}
<div class="content-wrapper">
    <section class="content-header">
        <h1>
            <small></small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="/front/user"><i class="fa fa-dashboard"></i> 用户组管理</a></li>
        </ol>
    </section>
    <!-- Main content -->
    <section class="content">
        <div class="row">
            <div class="col-xs-12">
                <div class="box">
                    <div class="box-body">

                        <div class="form-horizontal">
                            <div class="box-body">
                                <div class="form-group">
                                    <label class="col-sm-1 control-label">用户组名称</label>
                                    <div class="col-sm-2">
                                        <input type="text" class="form-control" id="customername" placeholder="公司名称" required>
                                    </div>
                                    <label class="col-sm-1 control-label">状态</label>
                                    <div class="col-sm-2">
                                        <select class="form-control selectpicker" id="pushModelSelect">
                                            <option value=-1>全部</option>
                                            <option value=0>开启</option>
                                            <option value=1>关闭</option>
                                        </select>
                                    </div>
                                    <div class="col-sm-2">
                                        <a class="btn btn-sm btn-success margin-r-5" onclick="">查询</a>
                                        <a class="btn btn-sm btn-default" onclick="">取消</a>
                                    </div>
                                </div>

                                <div class="form-group" style="margin-left: 20px">
                                    <a class="btn btn-sm btn-success margin" href="/front/group/new"><i class="fa fa-fw fa-plus fa-lg"></i>新建用户组</a>
                                    <a class="btn btn-sm btn-default margin" onclick="">批量开启</a>
                                    <a class="btn btn-sm btn-default margin" onclick="">批量关闭</a>
                                </div>
                            </div>
                        </div>

                        <table id="dataTable" class="table table-bordered table-hover">
                            <thead>
                            <tr>
                                <th><input type="checkbox" onclick="allSelect(this)" id="allCheckbox"></th>
                                <th>用户组名称</th>
                                <th>负责人</th>
                                <th>创建时间</th>
                                <th>更新时间</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                        </table>
                    </div>
                    <!-- /.box-body -->
                </div>
                <!-- /.box -->
            </div>
        </div>
    </section>
</div>
{{include "com/footer.html"}}
<script>
    menuActive("group");
    $(function () {
        ttable = $('#dataTable').DataTable({
            "paging": true,
            "lengthChange": false,
            "searching": false,
            "ordering": false,
            "info": true,
            "autoWidth": false,
            "serverSide": true,
            "ajax": {
                "url": "/front/group",
                "type": "post",
                "data": {"ids": ""}
            },
            "language": {
                "url": "/dist/js/dataTables.chinese.lang"
            },
            "fnDrawCallback": function () {
                $("ul.pagination").prepend("&nbsp;&nbsp;&nbsp;转到第 <input type='text' id='changePage'   style='width:20px;'> 页    <a type='text' href='javascript:void(0);' id='dataTable-btn' style='text-align:center'>GO</a>");
                $('#dataTable-btn').click(function (e) {
                    var redirectpage = 0
                    if ($("#changePage").val() && $("#changePage").val() > 0) {
                        var redirectpage = $("#changePage").val() - 1;
                    }
                    ttable.page(redirectpage).draw(false);
                });
                // this.api().column(0).nodes().each(function(cell, i) {
                //     cell.innerHTML = i + 1;
                // });
            },
            "columns": [
                {"data": "", width: "1%", render: function() {
                        return `<input type="checkbox" name="ckb-keyid" onclick="singleSelect(this)" style="text-align: center">`
                    }},
                {"data": "s_name", width: "15%"},
                {"data": "s_personname", width: "9%"},
                {"data": "i_createtime",width:"9%", render: function (val) {
                        var dt = new Date()
                        dt.setTime(parseInt(val) * 1000);
                        return dt.format("yyyy-MM-dd")
                    }},
                {"data": "i_updatetime",width:"9%", render: function (val) {
                  var dt = new Date()
                  dt.setTime(parseInt(val) * 1000);
                  return dt.format("yyyy-MM-dd")
                }},
                {"data": "i_state", render: function (val, a, row) {
                        tmp = ""
                        if(val){
                            tmp="<a href='#' title='停用' onclick='setupState(\""+row._id+"\",false)'><i class='fa fa-fw fa-circle text-green'></i></a>已启用"
                        }else{
                            tmp="<a href='#' title='启用' onclick='setupState(\""+row._id+"\",true)'><i class='fa fa-fw fa-circle text-red'></i></a>未启用"
                        }
                        return tmp
                    }, width: "10%" },
                {"data": "_id", width:"11%",render: function (val, a, row, pos) {
                      tmp = '<div>' +
                          '<a class="btn btn-sm btn-primary" href="/front/group/edit?id='+val+'">编辑</a>&nbsp;&nbsp;'+
                          '<a class="btn btn-sm btn-primary" href="/front/group/user?id='+val+'">设置</a>&nbsp;&nbsp;'+
                          '<a class="btn btn-sm btn-danger" onclick="del(\''+val+'\')">删除</a>'+
                          '</div>';
                      return tmp
                }}
            ]
        });
    });

    function setupState(id, v) {
        console.log(id, v)
        showConfirm("确定修改当前状态？", function() {
            $.ajax({
                url: "/front/group/state",
                type: 'POST',
                data: {"id": id, "state": v},
                success: function (r) {
                    if (r.rep) {
                        ttable.ajax.reload();
                    } else {
                        showTip("状态修改失败");
                    }
                }
            })
        })
    }

    function del(id) {
        showConfirm("确定删除该用户组？", function() {
            $.ajax({
                url: "/front/group/del",
                type: 'POST',
                data: {"id": id},
                success: function (r) {
                    if (r.rep) {
                        ttable.ajax.reload();
                    } else {
                        showTip("状态修改失败");
                    }
                }
            })
        })
    }

    //表格全选
    function allSelect(obj) {
        if ($(obj).is(':checked')) {
            keyTableChecked = true;
            keyTableAllChecked = true;
            $('input[name="ckb-keyid"]').each(function () {
                this.checked = true;
                selectIndex.push($(this).parents("tr").index() + 1);
            })
        } else {
            selectIndex.length = 0;
            keyTableChecked = false;
            keyTableAllChecked = false;
            $('input[name="ckb-keyid"]').each(function () {
                this.checked = false;
            })
        }
    }

    //表格单个选中
    function singleSelect(obj) {
        let tag = true;
        selectIndex.length = 0;
        $('input[name="ckb-keyid"]').each(function () {
            if (this.checked) {
                keyTableChecked = true;
                selectIndex.push($(this).parents("tr").index() + 1);
            }else {
                tag = false
            }
        });
        if (tag) {
            keyTableAllChecked = true;
            $('#allCheckbox').prop("checked", true);
        } else {
            keyTableAllChecked = false;
            $('#allCheckbox').prop("checked", false);
        }
    }

</script>