{{include "com/inc.html"}}
<!-- Main Header -->
{{include "com/header.html"}}
<!-- Left side column. 权限菜单 -->
{{include "com/menu.html"}}

<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
    <section class="content-header">
        <h1>
            <small><a onclick="addRole()" class="btn btn-primary opr">新增角色</a></small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="/front/role"><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">
                        <table id="dataTable" class="table table-bordered table-hover">
                            <thead>
                            <tr>
                                <th>角色名称</th>
                                <th>编辑</th>
                            </tr>
                            </thead>
                        </table>
                    </div>
                    <!-- /.box-body -->
                </div>
                <!-- /.box -->
            </div>
        </div>
    </section>
</div>

<div class="modal fade" id="modal-new-role" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <div class="edit-form">
                        <div class="edit-info">
                            <span class="glyphicon glyphicon-ok-sign" aria-hidden="true"></span>
                            <span>新增角色</span>
                        </div>
                        <form class="form-horizontal text-center">
                            <div class="form-group">
                                <label class="col-sm-3 control-label"><span style="color:red;">* </span>角色名称</label>
                                <div class="col-sm-5">
                                    <input type="text" required class="form-control" placeholder="名称" id="role_name"/></div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label"><span style="color:red;">* </span>角色等级</label>
                                <div class="col-sm-5">
                                    <input type="text" required class="form-control" style="max-width: 100%" placeholder="2/3/4" id="role_level"/></div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="modal-footer">
                    <input type="button" onclick="saveRole()" class="btn btn-primary saveBtn" value="保存">
                    <input type="button" onclick="cancelModel()" class="btn btn-default" style="margin-left: 24px"
                           value="取消">
                </div>
            </div>
        </div>
    </div><!-- /.modal -->
</div>
<!-- footer -->
{{include "com/footer.html"}}
<script>
    menuActive("role")
    var _id = ""

    ttable = $('#dataTable').DataTable({
        "paging"      : true,
        "lengthChange": false,
        "searching"   : false,
        "ordering"    : false,
        "info"        : true,
        "autoWidth"   : false,
        "ajax": {
            "url": "/front/role",
            "type": "post",
            "data": {}
        },
        "language": {
            "url": "/dist/js/dataTables.chinese.lang"
        },
        "columns": [
            { "data": "name"},
            { "data": "level", render: function(val, a, row){
                if (val == "0") {
                    return "<a class='btn btn-sm btn-danger disabled'>编辑</a> &nbsp;" +
                        "<a class='btn btn-sm btn-success' href='/front/role/edit/"+val+"'>角色菜单</a>"
                }else {
                    return "<a class='btn btn-sm btn-danger' onclick='editRole(\""+row['_id']+"\",\""+row['name']+"\",\""+row['level']+"\")'>编辑</a> &nbsp;" +
                        "<a class='btn btn-sm btn-success' href='/front/role/edit/"+val+"'>角色菜单</a>"
                }
            }}
        ]
    });

    function addRole() {
        _id = ""
        $('#role_name').val("")
        $('#role_level').val("")
        $('#modal-new-role').modal("show");
    }
    function cancelModel() {
        $('#modal-new-role').modal("hide");
    }
    function saveRole() {
        var name = $('#role_name').val();
        var levle = $('#role_level').val();
        if (name == "" || levle == "") {
            alert("请填写必填项")
            return
        }
        $.ajax({
            url:"/front/role/save",
            type:"post",
            data:{"role_name": name, "role_level": levle, "_id": _id},
            success:function(r){
                if(r.rep){
                    $("#modal-new-role").modal("hide");
                    ttable.ajax.reload();
                }else{
                    alert("保存失败");
                }
            }
        })
    }
    function editRole(id, name, level) {
        _id = id
        $('#role_name').val(name)
        $('#role_level').val(level)
        $('#modal-new-role').modal("show");
    }
</script>

