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

<!-- 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/menu"><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>
                                <th>样式</th>
                                <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">
                            <input id="name" name="name" type="text" class="form-control" placeholder="请输入名称">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="code" class="col-sm-2 control-label">链接:</label>
                        <div class="col-sm-10">
                            <input id="href" name="href" type="text" class="form-control" placeholder="请输入链接">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="site" class="col-sm-2 control-label">样式:</label>
                        <div class="col-sm-10">
                            <input id="pic"  name="pic" type="text" class="form-control" placeholder="请输入图标样式" value="fa fa-laptop">
                        </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("menu")
    $(function () {
        ttable=$('#dataTable').DataTable({
            "paging"      : true,
            "lengthChange": false,
            "searching"   : true,
            "ordering"    : true,
            "info"        : true,
            "autoWidth"   : false,
            "ajax": {
                "url": "/admin/menu/data",
                "type": "post",
                "data":{}
            },
            "language": {
                "url": "/res/dist/js/dataTables.chinese.lang"
            },
            "columns": [
                { "data": "name",render:function(val,a,row){
                        return row.name}},
                { "data": "href",render:function(val,a,row){
                    if(row.href){
                        return row.href
                    }else{
                        return ""
                    }
                }},
                { "data": "pic"},
                {"data":"secondmenu",render:function(val,a,row){
                    return '<a class="btn btn-sm btn-success" href="/admin/secondmenu?id='+row._id+'">进入二级菜单</a>'
                    }},
                {"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 save(){
        na=$("#name").val()
        href=$("#href").val()
        pic=$("#pic").val()
        if(na==""||pic==""){
            alert("表单填写不完整！")
            return false;
        }
        _id=$("#_id").val()
        if (_id){
            map={"name":na,"href":href,"pic":pic,"_id":_id}
        }else{
            map={"name":na,"href":href,"pic":pic}
        }
        $.ajax({
            url:"/admin/menu/save",
            type:"post",
            data:map,
            success:function(r){
                if(r.rep){
                    $("#userform")[0].reset();
                    $("#modal-info").modal("hide");
                    ttable.ajax.reload();
                }else{
                    alert("保存失败");
                }
            }
        })
    }

    function edit(_id){
        $.ajax({
            url:"/admin/menu/searchbyid",
            type:"post",
            data:{"_id":_id},
            success:function(r){
                if(r.rep){
                    $("#_id").val(r.rep._id)
                    $.setForm('#userform',r.rep);
                    $("#name").attr("disabled",false);
                }
            }
        })
        $("#modal-info").modal("show");
    }
    function del(_id){
        showConfirm("确定删除？", function() {
            $.ajax({
                url:"/admin/menu/del",
                type:"post",
                data:{"_id":_id},
                success:function(r){
                    if(r.rep){
                        ttable.ajax.reload();
                    }else{
                        showTip("删除失败", 1000, function() {});
                    }
                }
            })
        });
    }
    function formReset(){
        $("#email").attr("disabled",false);
        $("#name").attr("disabled",false);
        $("#userform")[0].reset();
        $("#_id").removeAttr("value")
    }
</script>
