<%@ page language="java" contentType="text/html;charset=UTF-8" trimDirectiveWhitespaces="true"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fastboot" prefix="fb"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://shiro.apache.org/tags" prefix="shiro"%>
<fb:ui src="base/main">

	<fb:property name="title">菜单管理</fb:property>

	<fb:script type="text/javascript">
		<script>
			var tool
			layui.use([ 'tool', 'trta' ], function() {
				//
				var table_obj;
				//
				tool = layui.tool, trta = layui.trta, $ = layui.jquery;
				//
				trta.render({
					elem : '#treeTable',
					url : '${base}/menu/list',
					tree : {
						iconIndex : 1, // 折叠图标显示在第几列
						idName : 'id', // 自定义id字段的名称
						pidName : 'parent', // 自定义标识是否还有子节点的字段名称
						haveChildName : 'haveChild', // 自定义标识是否还有子节点的字段名称
						isPidData : true, // 是否是pid形式数据
					},
					cols : [ [ {
						type : 'numbers'
					}, {
						field : 'name',
						title : '菜单',
						width: 300
					}, {
						field : 'menuUrl',
						title : '地址',
					}, {
						field : 'authority',
						title : '权限标识',
					}, {
						field : 'id',
						title : '编号',
						align : 'center',
						width : 60
					}, {
						field : 'isMenu',
						title : '菜单',
						align : 'center',
						templet : '#isMenu',
						width : 60
					}, {
						field : 'orderNumber',
						title : '排序',
						align : 'center',
						width : 60,
						sort : true,
					} , {
						title: '操作',
						align: 'center',
						templet:'#tool'
					},] ]
				});

				$("#refresh").on("click",function(){
					window.location.reload()
				})
				$("#add").on("click",function (){
					tool.dialog('${base}/menu/addRoot', '60%');
				})

			});

			function addMenuChild(id) {
				tool.dialog('${base}/menu/addChildForm?id=' + id, '60%');
			}

			function edit(id) {
				tool.dialog('${base}/menu/form?id=' + id, '60%');
			}

			function remove(id){
				tool.submit("${base}/menu/delete?id=" + id,null, function(){
					window.location.reload()
				})
			}
		</script>

	</fb:script>

	<fb:layout>

		<script type="text/html" id="isMenu">
    		{{#  if(d.isMenu == 0){ }}
    			<span style="color: #009688;">菜单</span>
				{{#  } else if(d.isMenu == 1){ }}
    			<span style="color: #FF5722;">按钮</span>
  		 	{{#  } else { }}
    			未知
  			{{#  } }}
		</script>

		<script type="text/html" id="tool">
			{{#  if(d.isMenu == 0){ }}
			<a onclick="addMenuChild('{{d.id}}')" href="#" >添加子菜单</a>  |
			{{#  } }}
			<a onclick="edit('{{d.id}}')" href="#" >编辑</a>  |
			<a onclick="remove('{{d.id}}')" href="#" >删除</a>
		</script>

		<div class="layui-card">
			<button id="refresh" type="button" class="layui-btn layui-btn-primary layui-btn-sm refresh">刷新</button>
			<button id="add" type="button" class="layui-btn layui-btn-primary layui-btn-sm add">添加根菜单</button>
			<table id="treeTable" class="layui-hide" lay-filter="table" />
		</div>

	</fb:layout>
</fb:ui>