{{template "inc"}}
<!-- Main Header -->
{{template "header"}}
<!-- Left side column. 权限菜单 -->
{{template "memu"}}
<head>
    <style>

        #selectclear2 select {
            width:190px;
            height:167px;
            padding:5px;
        }
        #selectclear2{
            display: flex;
            flex-direction: row;
        }
        #selectclear2 .move{
            display: flex;
            flex-direction: column;
            margin: 20px 25px
        }
        #selectclear2 .move button{
            margin: 1px 0px;
            padding: 4px 6px;
        }
        #selectclear2 .doublebox {
            text-align:center;
        }


    </style>
</head>

<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
    <section class="content-header">
        <h1>
            <small><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-info" onclick="formReset()">新增角色菜单</button></small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="/admin/role"><i class="fa fa-dashboard"></i> 角色管理</a></li>
            <li><a href="/admin/rolemenu"><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-info">
    <div class="modal-dialog">
        <form id="userform" class="form-horizontal" role="form">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">菜单信息</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="code" class="col-sm-2 control-label">菜单名称:</label>
                        <div class="col-sm-10">
                            <select id="menu2" name="role" class="form-control" onclick="menu()">
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="code" class="col-sm-2 control-label">二级菜单:</label>
                        <div class="col-sm-10" id="selectclear2">
                            <div class="doublebox">
                                <select multiple="multiple" id="select3" style="overflow-x: scroll;"></select>
                            </div>
                            <div class="move">
                                <button type="button" id="up2" class="btn btn-primary">上移</button>
                                <button type="button" id="right2" class="btn btn-primary">右移</button>
                                <button type="button" id="left2" class="btn btn-primary">左移</button>
                                <button type="button" id="down2" class="btn btn-primary">下移</button>
                            </div>
                            <div class="doublebox">
                                <select multiple="multiple" id="select4" style="overflow-x: scroll;"></select>
                            </div>
                        </div>
                    </div>
                    <!--<div class="form-group">
                        <label for="modify" class="col-sm-2 control-label">二级菜单:</label>
                        <div id="secondmenu" class="col-sm-10">
                            <input type="button" value="+" onclick="append()"></input>
                        </div>
                    </div>-->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal" onclick="formReset()">取消</button>
                    <button type="button" class="btn btn-primary" onclick="save()">保存</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </form>
        <input type="hidden" id="_id">
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

<!-- footer -->
{{template "footer"}}

<script>
    menuActive("role")
    $(function () {
        ttable=$('#dataTable').DataTable({
            "paging"      : true,
            "lengthChange": false,
            "searching"   : true,
            "ordering"    : true,
            "info"        : true,
            "autoWidth"   : false,
            "ajax": {
                "url": "/admin/role/menu/data",
                "type": "post",
                "data":{"role":{{.role}}}
            },
            "language": {
                "url": "/res/dist/js/dataTables.chinese.lang"
            },
            "columns": [
                { "data": "name",render:function(val,a,row){
                        return row.name}},
                {"data":"_id",render:function(val,a,row){
                        return "<a href='#' onclick='edit(\""+val+"\")'><i class='fa fa-fw fa-edit text-yellow'></i></a> &nbsp;"+
                        "<a href='#' onclick='del(\""+val+"\")'><i class='fa fa-fw fa-trash text-red'></i></a>"
                    }}
            ]
        });
        //ttable.on('init.dt', function () {});
    })
    function menu() {
        $("#select3").empty();
        $("#select4").empty();
        $.post("/admin/role/select",{"_id":$("#menu2").val()},function (data,status) {
            if(data.data){
                for(var a=0;a<data.data.length;a++){
                    $("#select3").append("<option title='"+data.data[a].name+"' value='"+data.data[a]._id+"'>"+data.data[a].name+"</option>");
                }
            }
        })
    }
    function save(){
        menuid=$("#menu2").val()
        var clearArr = [];
        var clearArr2 = [];
        $("#select4 option").each(function(i,val){
            clearArr[i] = this.value
        })
        $("#select3 option").each(function(i,val){
            clearArr2[i] = this.value
        })
        var secondmenuStr = JSON.stringify(clearArr)
        var secondmenuStr2 = JSON.stringify(clearArr2)
        if(menuid == ""){
            alert("表单填写不完整！");
            return false;
        }
        $.ajax({
            url:"/admin/role/menu/save",
            type:"post",
            data:{"role":{{.role}},"menu":menuid,"secondmenuStr":secondmenuStr,"secondmenuStr2":secondmenuStr2},
            success:function(r){
                if(r.rep){
                    $("#userform")[0].reset();
                    $("#modal-info").modal("hide");
                    ttable.ajax.reload();
                }else{
                    alert("保存失败");
                }
            }
        })
    }
    function del(_id){
        showConfirm("确定删除？", function() {
            $.ajax({
                url:"/admin/role/menu/del",
                type:"post",
                data:{"_id":_id,"role":{{.role}}},
                success:function(r){
                    if(r.rep){
                        ttable.ajax.reload();
                    }else{
                        showTip("删除失败", 1000, function() {});
                    }
                }
            })
        });
    }
    function edit(_id){
        $("#menu2").empty()
        $("#select3").empty();
        $("#select4").empty();
        $("#_id").val(_id)
        mark=$("#_id").val()
        $.ajax({
            url:"/admin/role/select",
            type:"post",
            data:{"_id":_id,"mark":mark,"role":{{.role}}},
            success:function(r){
                if(r){
                    $("#menu2").append("<option value="+_id+">"+r.name+"</option>")
                    $("#menu2").attr("disabled",true);
                    for(var a=0;a<r.data2.length;a++){
                        $("#select3").append("<option title='"+r.data2[a].name+"' value='"+r.data2[a]._id+"'>"+r.data2[a].name+"</option>");
                    }
                    for(var a=0;a<r.data.length;a++){
                        $("#select4").append("<option title='"+r.data[a].name+"' value='"+r.data[a]._id+"'>"+r.data[a].name+"</option>");
                    }
                }
            }
        })
        $("#modal-info").modal("show");
    }
    function formReset(){
        $("#_id").val("")
        $("#menu2").empty()
        $("#select3").empty();
        $("#select4").empty();
        $("#menu2").append("<option value=''>--请选择--</option>")
        $("#menu2").attr("disabled",false);
        $.post("/admin/menu/data",'',function (data,status) {
            for(var a=0;a<data.data.length;a++) {
                $("#menu2").append("<option value="+data.data[a]._id+">"+data.data[a].name+"</option>")
            }
        })
        $("#modal-info-addclear").modal("show");
    }
    $("#selectclear2 #right2").click(function(){
        $("#select3 option:selected").appendTo("#select4");
    });
    //左移
    $("#selectclear2 #left2").click(function(){
        $("#select4 option:selected").appendTo("#select3");
    });
    $("#selectclear2 #up2,#selectclear2 #down2").click(function() {
        var $opt = $("#select4 option:selected:first");
        if (!$opt.length){
            return;
        }
        if (this.id == "up2"){
            $opt.prev().before($opt);
        }else{
            $opt.next().after($opt);
        }
    });
    //双击右移
    $("#selectclear2 #select3").dblclick(function(){
        $("#selectclear2 #select3 option:selected").appendTo("#select4");
    });
    //双击左移
    $("#selectclear2 #select4").dblclick(function(){
        $("#selectclear2 #select4 option:selected").appendTo("#select3");
    });
</script>
