{{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><button type="button" class="btn btn-primary" data-toggle="modal" onclick="add()">新增二级菜单</button></small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="/front/menu"><i class="fa fa-dashboard"></i> 菜单管理</a></li>
            <li><a href="/front/menuSecond?id={{.T.id}}"><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>
                            </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="css"  name="css" type="text" class="form-control" placeholder="请输入图标样式" value="fa fa-circle-o">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</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 -->
{{include "com/footer.html"}}

<script>
	var pid={{.T.id}};
	var id="";
    menuActive("menu")
    $(function () {
        ttable=$('#dataTable').DataTable({
            "paging"      : true,
            "lengthChange": false,
            "searching"   : true,
            "ordering"    : true,
            "info"        : true,
            "autoWidth"   : false,
            "ajax": {
                "url": "/front/menuSecond",
                "type": "post",
                "data":{"id":{{.T.id}}}
            },
            "language": {
                "url": "/dist/js/dataTables.chinese.lang"
            },
            "columns": [
                { "data": "s_name"},
                { "data": "s_href"},
                { "data": "s_css"},
                { "data":"_id",render:function(val,a,row){
                        return  "<a href='#' onclick='edit(\""+row['s_name']+"\",\""+row['s_href']+"\",\""+row['s_css']+"\",\""+row['_id']+"\")'><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 add(){
		id="";
		$("#modal-info #name").val("");
		$("#modal-info #href").val("");
		$("#modal-info").modal("show");
	}
	function edit(name,href,css,_id){
		id=_id;
		$("#modal-info #name").val(name);
		$("#modal-info #href").val(href);
		$("#modal-info #css").val(css);
		$("#modal-info").modal("show");
	}
	function save(){
		var name=$("#modal-info #name").val();
		var href=$("#modal-info #href").val();
		var css=$("#modal-info #css").val();
		if(name==""||href==""||css==""){
			alert("表单填写不完整！")
			return false;
		}
		$.ajax({
			url:"/front/menuSecond/save",
			type:"post",
			data:{"name":name,"href":href,"css":css,"pid":pid,"id":id},
			success:function(r){
				if(r.rep){
					$("#modal-info").modal("hide");
					ttable.ajax.reload();
				}else{
					alert("保存失败");
				}
			}
		})
	}
	function del(_id){
		showConfirm("确定删除？", function() {
			$.ajax({
				url:"/front/menuSecond/del",
				type:"post",
				data:{"_id":_id},
				success:function(r){
					if(r.rep){				
						ttable.ajax.reload();
					}else{
						showTip("删除失败", 1000, function() {});
					}
				}
			})
		});
	}
</script>
