<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
>
<head th:replace="admin/common/html/tableHead :: tableHead(~{::title},~{::link},~{::style})">

	<title th:text=${title}></title>
	<!-- 这儿引用单独的css link -->
	<!-- Ladda for Bootstrap 3按钮加载进度插件 -->
	<link rel="stylesheet" th:href="@{/static/admin/assets/js/button/ladda/ladda.min.css}">
	<!-- bootstrap-table表单样式 -->
	<link th:href="@{/static/admin/assets/js/bootstrap/css/bootstrap-table/bootstrap-table.min.css}" rel="stylesheet"/>

	<style type="text/css">

		body {
			color: #9ea7b3;
			font-family: "Open Sans", Arial, sans-serif !important;
			font-size: 13px !important;
			line-height: 20px;
			overflow-x: hidden !important;
			min-height: 100%;
			z-index: -2;
			margin: 0px !important;
			background-image: none;
			-moz-background-size: cover;
			-webkit-background-size: cover;
			-o-background-size: cover;
			background-size: cover;
		}

		label.error {
			position: absolute;
			right: 18px;
			top: 5px;
			color: #ef392b;
			font-size: 12px;
		}

		.ico-list .fa {
			margin: 5px;
			padding: 5px;
			cursor: pointer;
			font-size: 18px;
			width: 28px;
			border-radius: 3px;
		}

		.ico-list .fa:hover {
			background-color: #1d9d74;
			color: #ffffff;
		}
	</style>

</head>

<body>

<div id="fcapp" class="content-wrap">
	<div class="row">
		<div class="col-sm-12">
			<div class="nest" id="elementClose">
				<div class="">
				</div>
				<div class="body-nest" id="element">
					<div class="panel-body">
						<form class="form-horizontal m" id="form-edit" th:object="${TvuePermission}">
							<input id="id" name="id" type="hidden" th:field="*{id}"/>
							<div class="form-group">
								<label class="col-sm-3 control-label">类型：</label>
								<div class="col-sm-8">
									<label class="radio-inline"><input type="radio" name="type" value="0" v-model="menu.type"> 目录</label>
									<label class="radio-inline"><input type="radio" name="type" value="1" v-model="menu.type"> 菜单</label>
									<label class="radio-inline"><input type="radio" name="type" value="2" v-model="menu.type"> 按钮</label>
								</div>
							</div>
							<div class="form-group">
								<!-- 验证用 -->
								<input class="form-control" type="hidden" id="checkname" name="checkname" th:value="*{name}"/>
								<label class="col-sm-3 control-label ">权限名称：</label>
								<div class="col-sm-8">
									<input class="form-control" type="text" id="name" name="name" th:value="*{name}"/>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label ">上级菜单：</label>
								<div class="col-sm-8">
									<input class="form-control" type="hidden" id="pid" name="pid" th:value="*{pid}"/>
									<input class="form-control" readonly="true" type="text" id="pidName" th:value="${pattsysPermission.name}" onclick="selectMenuTree()"/>

								</div>
							</div>
							<div v-if="menu.type == 1 || menu.type == 2" class="form-group">
								<!-- 验证用 -->
								<input class="form-control" type="hidden" id="checkurl" th:value="*{url}"/>
								<label class="col-sm-3 control-label ">权限URL：</label>
								<div class="col-sm-8">
									<input class="form-control" type="text" id="url" name="url" th:value="*{url}"/>
								</div>
							</div>
							<div v-if="menu.type == 1" class="form-group">
								<label class="col-sm-3 control-label ">打开方式：</label>
								<div class="col-sm-8">
									<select class="form-control" id="isBlank" name="isBlank" th:field="*{isBlank}">
										<option value="0" th:selected="${TvuePermission.isBlank ==0}">签页</option>
										<option value="1" th:selected="${TvuePermission.isBlank ==1}">新窗口</option>
									</select>
								</div>
							</div>
							<div v-if="menu.type == 1 || menu.type == 2" class="form-group">
								<!-- 验证用 -->
								<input class="form-control" type="hidden" id="checkurl" th:value="*{url}"/>
								<label class="col-sm-3 control-label ">权限关键字：</label>
								<div class="col-sm-8">
									<input class="form-control" type="text" id="perms" name="perms" th:value="*{perms}" placeholder="多个用逗号分隔，如：user:list,user:create"/>
								</div>
							</div>
							<div v-if="menu.type != 2" class="form-group">
								<label class="col-sm-3 control-label ">排序：</label>
								<div class="col-sm-8">
									<input class="form-control" type="number" id="orderNum" name="orderNum" th:value="*{orderNum}"/>
								</div>
							</div>
							<div v-if="menu.type != 2" class="form-group">
								<label class="col-sm-3 control-label ">图标：</label>
								<div class="col-sm-8">
									<input class="form-control" onfocus="showdrop();" type="text" id="icon" name="icon" th:value="*{icon}"/>
									<!-- 
										<code style="margin-top: 4px; display: block;">获取图标：https://fontawesome.com/v4.7.0/icons/</code>
									 -->
									<div class="ms-parent" style="width: 100%;">
										<div class="icon-drop animated flipInX" style="display: none;max-height:200px;overflow-y:auto">
											<div data-th-include="admin/permission/icon"></div>
										</div>
									</div>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label ">权限描述：</label>
								<div class="col-sm-8">
									<input class="form-control" type="text" id="descripion" name="descripion" th:value="*{descripion}"/>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label ">菜单状态：</label>
								<div class="col-sm-8">
									<select class="form-control" id="visible" name="visible" th:field="*{visible}">
										<option value="0">显示</option>
										<option value="1">隐藏</option>
									</select>
								</div>
							</div>
							<div class="form-group">
								<div class="form-control-static col-sm-offset-9">
									<button type="submit" class="btn btn-primary">提交</button>
									<button onclick="$.modal.close()" class="btn btn-danger" type="button">关闭</button>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<!-- 通用js -->
<div th:include="admin/common/html/js :: onload_js">

</div>
<!-- bootstarp 表格 -->
<script th:src="@{/static/admin/assets/js/bootstrap/js/bootstrap-table/bootstrap-table.min.js}" type="text/javascript"></script>
<script th:src="@{/static/admin/assets/js/bootstrap/js/bootstrap-table/locale/bootstrap-table-zh-CN.min.js}" type="text/javascript"></script>
<script th:src="@{/static/admin/assets/js/bootstrap/js/base_list.js}" type="text/javascript"></script>


<!-- 弹窗 -->
<script th:src="@{/static/admin/assets/js/layer/layer.js}" type="text/javascript"></script>
<!-- 遮罩层 -->
<script th:src="@{/static/admin/assets/js/blockUI/jquery.blockUI.js}" type="text/javascript"></script>


<script type="text/javascript">
	$(function () {
		var vm = new Vue({
			el: "#fcapp",
			data: {
				"menu": {
					type: [[${TvuePermission.type}]]
				}
			}

		});

		//表单验证
		$("#form-edit").validate({
			rules: {
				name: {
					required: true,
					minlength: 2,
					maxlength: 20,
					remote: {
						url: rootPath + "/PermissionVueController/checkNameUnique",
						type: "post",
						dataType: "json",
						dataFilter: function (data, type) {
							if ($("#checkname").val() == $("#name").val()) {
								return true;
							} else {
								if (data == "0") {
									return true;
								} else {
									return false;
								}
							}

						}
					}
				},
				url: {
					required: true,
					minlength: 1,
					maxlength: 100,
					remote: {
						url: rootPath + "/PermissionVueController/checkURLUnique",
						type: "post",
						dataType: "json",
						dataFilter: function (data, type) {
							var u = $("#url").val();
							if ($("#checkurl").val() == $("#url").val()) {
								return true;
							} else {
								if (data == "0" || u == "#") {
									return true;
								} else {
									return false;
								}
							}
						}
					}
				},
				perms: {
					required: true,
					minlength: 1,
					maxlength: 100,
					remote: {
						url: rootPath + "/PermissionVueController/checkPermsUnique",
						type: "post",
						dataType: "json",
						dataFilter: function (data, type) {
							var u = $("#url").val();
							if ($("#perms").val() == $("#perms").val()) {
								return true;
							} else {
								if (data == "0" || u == "#") {
									return true;
								} else {
									return false;
								}
							}
						}
					}
				}

			},
			messages: {
				"name": {
					remote: "权限名字已经存在"
				},
				"url": {
					remote: "权限地址已经存在"
				},
				"perms": {
					remote: "权限关键字已经存在"
				}
			},
			submitHandler: function (form) {
				edit();
			}
		});

	});

	//提交修改方法
	function edit() {
		var dataFormJson = $("#form-edit").serialize();
		$.ajax({
			cache: true,
			type: "POST",
			url: rootPath + "/PermissionVueController/edit",
			data: dataFormJson,
			async: false,
			error: function (request) {
				$.modal.alertError("系统错误");
			},
			success: function (data) {
				$.operate.saveSuccess(data);
			}
		});
	}

	/*菜单管理-修改-选择菜单树*/
	function selectMenuTree() {
		var url = rootPath + "/PermissionVueController/tree";
		$.modal.open("选择菜单", url, '380', '380');
	}

	//显示图标
	function showdrop() {
		$(".icon-drop").show();
	}

	$(function () {

		$("#form-edit").click(function (event) {
			var obj = event.srcElement || event.target;
			if (!$(obj).is("input[name='icon']")) {
				$(".icon-drop").hide();
			}
		});
		$(".icon-drop").find(".ico-list i").on("click", function () {
			$('#icon').val($(this).attr('class'));
		});

	});
</script>


</body>


</html>
