<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>[[${prj_name}]]</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{/iconfont/iconfont.css}">
    <link rel="icon" th:href="@{image/sgl.png}" sizes="32x32">
    <script th:src="@{/layui/layui.js}"></script>
    <script th:src="@{/layui/jquery-3.4.1.min.js}"></script>
    <script th:src="@{/js/common.js}"></script>
</head>
<style>
    iframe {
        width: 100%;
        height: 100%;
        border: 0;
        margin: 0;
        padding: 0;
    }

    body {
        margin: 0;
        padding: 0;
    }

    .menu-label-color {
        background: #393d49
    }

    .layui-nav-child dd {
        padding-left: 20px;
    }

    .layui-tab-title .layui-this {
        color: white;
    }

    .layui-nav-item i {
        margin-right: 5px;
    }

    .layui-tab-title .layui-this:after {
        border-style: hidden;
    }

    .layui-tab-bar {
        background-color: #2a2727;
        border-style: hidden;
    }

    .layui-input {
        width: auto;
        display: inline-block;
    }

    .thisLogo {
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        position: absolute;
        left: 0;
        top: 0;
        width: 240px;
        height: 60px;
        line-height: 60px;
        text-align: center;
        font-size: 20px;
    }

    .layui-side-scroll {
        top: 60px;
        height: calc(100% - 60px);
        width: 260px;
    }

    .layui-nav-tree {
        width: 240px;
    }

    .layui-layout-admin .layui-header {
        left: 240px;
    }

    .layui-layout-admin .layui-side {
        top: 0;
        width: 240px;
    }

    .layui-bg-blue {
        background-color: #FFFFFF !important;
        color: #666666 !important;
    }

    .layui-header .layui-nav .layui-nav-item a {
        color: #666666;
    }

    .layui-header .layui-nav .layui-nav-item a:hover {
        color: #666666;
    }

    .layui-breadcrumb {
        height: 60px;
        line-height: 60px;
        display: inline-block;
        margin-left: 20px;
    }

    .layui-body {
        left: 240px;
    }
</style>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header layui-bg-blue">
        <span class="layui-breadcrumb">
        </span>

        <!-- 头部区域（可配合layui已有的水平导航） -->

        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img th:src="@{image/user.png}" class="layui-nav-img">
                    <span id="user">[[${userTrueName}]]</span>
                </a>
                <dl class="layui-nav-child">
                    <!--<dd><a href="javascript:;">基本资料</a></dd>-->
                    <dd id="password"><a href="javascript:;">修改密码</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="/logout">退出</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-cyan">
        <div class=" thisLogo" onClick="reLoad()">[[${prj_name}]]</div>
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul id="menu" class="layui-nav layui-nav-tree" lay-filter="test">
                <li th:each="menu : ${resourceInfo}" class="layui-nav-item">
                    <a href="javascript:;">
                        <i th:class="'iconfont '+${menu.attributes.get('LINK_IMG')}"></i>[[${menu.title}]]
                    </a>
                    <dl class="layui-nav-child">
                        <dd th:each="menu2:${menu.children}" class="dd">
                            <a href="javascript:;" th:id="${menu2.id}" th:url="${menu2.attributes.get('URLS')}"
                               th:text="${menu2.title}"></a>
                        </dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>

    <div class="layui-body" style="bottom:0;overflow:hidden;">
        <!--<div class="layui-tab" style="margin:0;height:100%" lay-filter="demo" lay-allowclose="true">
        <ul class="layui-tab-title" style="background:black;color:white !important;" id="menuLabel">

        </ul>
        <div class="layui-tab-content" style="padding:0;height:100%">

        </div>
      </div>-->
        <!-- 内容主体区域 -->
        <iframe id="contain" src=""></iframe>
    </div>

    <div id="modifyPassword" style="display:none;">
        <form id="indexPassword" class="" style="margin-top:20px;">
            <input type="hidden" id="username" th:value="${userName}">
            <div class="layui-form-item">
                <label class="layui-form-label">新密码:</label>
                <div class="layui-input-block">
                    <input type="password" id="onePassword" required lay-verify="required" autocomplete="off"
                           placeholder="请输入密码" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">确认新密码:</label>
                <div class="layui-input-block">
                    <input type="password" id="twoPassword" required lay-verify="required" autocomplete="off"
                           placeholder="请输入密码" class="layui-input">
                </div>
            </div>
        </form>
    </div>


</div>

<script th:inline="javascript">

    var expired = [[${expired}]];
    var key = [[${key}]];
    var initVector = [[${initVector}]];
    //JavaScript代码区域
    var element, layer;
    layui.use(['element', 'layer'], function () {
        element = layui.element;
        layer = layui.layer;

        /*toindex();*/
        //开始默认点击首页
        $("#menu li").eq(0).find("a").click();
    });

    setTimeout("changePassword()", 1000);

    function changePassword() {
        if (expired) {
            $("#password").click();
            layer.msg("密码已过期，请修改密码!")
        }
    }

    $("#password").on('click', function () {
        $("#onePassword").val("");
        $("#twoPassword").val("");

        layer.open({
            type: 1,
            title: "修改密码",
            shade: 0,
            area: ['350px', '240px'],
            offset: 'auto',
            content: $("#modifyPassword"),
            btn: ['确定', '取消'],
            btnAlign: 'c',
            yes: function (index, layero) {
                var onePassword = $("#onePassword").val();
                var twoPassword = $("#twoPassword").val();
                if (onePassword == null || onePassword == "") {
                    layer.msg('请输入密码', {time: 1000}, function () {
                        $("#onePassword").focus();
                    });
                    return;
                }
                if (twoPassword == null || twoPassword == "") {
                    layer.msg('请再次输入密码', {time: 1000}, function () {
                        $("#twoPassword").focus();
                    });
                    return;
                }
                if (!isValuse(onePassword)) {
                    layer.msg('密码必须包含字母数字特殊符号，且长度至少为8位', {time: 1000});
                    return;
                }
                if (!isValuse(twoPassword)) {
                    layer.msg('密码必须包含字母数字特殊符号，且长度至少为8位', {time: 1000});
                    return;
                }
                if (onePassword == twoPassword) {

                    var url = "/modifyPassword";
                    var param = {};
                    param.key = key;
                    param.initVector = initVector;
                    param.password = onePassword;
                    AjaxPostJson(url, param, function (data) {
                        if (data.state == true) {
                            layer.msg(data.message, {
                                time: 1000
                            }, function () {
                                layer.closeAll();
                            });
                        } else {
                            layer.msg(data.message, {
                                time: 1000
                            });
                        }
                    });

                } else {
                    layer.msg('密码输入不一致', {time: 1000});
                    return;
                }
            },
            btn2: function () {

            }
        });
    });
    /*$(function(){
	    $("#menu li").eq(0).addClass("layui-nav-itemed");
	    $(".dd a").click(function(){
	    	var id = $(this).attr("id");
	    	var url = $(this).attr("url");
	    	var text = $(this).text();
	    	if ($(".layui-tab-title").find("li[lay-id='" + id + "']").length <= 0) {
	            var height = $('.layui-body').height()-40+'px';
	            element.tabAdd('demo', {
	                title: text,
	                //iframe子页面onload新增监听src为/loginPage是父页面跳转/loginPage，解决“俄罗斯套娃”问题
	                content: "<iframe id='main_self_frame' name='main_self_frame' class='main_self_frame'  style='width:100%;height:" + height + "' frameborder='0' scrolling='auto' src='" + url + "'></iframe>",
	                id: id
	            });
	        }
	        element.tabChange('demo', id);
	        $(".layui-tab-title").find("li").removeClass("menu-label-color");
	        $(".layui-tab-title").find("li[lay-id='"+id+"']").addClass('menu-label-color');
	    })
	    
	    $(".layui-tab-title").on("click", "li", function() {
    		$(".layui-tab-title").find("li").removeClass("menu-label-color");
	        $(this).addClass('menu-label-color');
   		});
    }) 
    
    
    function toIndex(){
    	if ($(".layui-tab-title").find("li[lay-id='111']").length <= 0) {
            var height = $('.layui-body').height()-40+'px';
            element.tabAdd('demo', {
                title: "主页",
                //iframe子页面onload新增监听src为/loginPage是父页面跳转/loginPage，解决“俄罗斯套娃”问题
                content: "<iframe id='main_self_frame' name='main_self_frame' class='main_self_frame'  style='width:100%;height:" + height + "' frameborder='0' scrolling='auto' src='/home'></iframe>",
                id: '111'
            });
        }
        element.tabChange('demo', '111');
        $(".layui-tab-title").find("li").removeClass("menu-label-color");
	    $(".layui-tab-title").find("li[lay-id='111']").addClass('menu-label-color');
    }*/

    $(function () {

        // $("#menu li").eq(0).addClass("layui-nav-itemed");

        $(".dd a").click(function (event) {
            var menu = $(this).text().trim();
            var menuClass = $(this).parents('li').children('a').text().trim();

            var htmlStr = "";
            htmlStr = htmlStr + "<a>" + menuClass + "</a>";
            htmlStr = htmlStr + '<span lay-separator="">/</span>';
            htmlStr = htmlStr + "<a style='font-size: 18px;'><cite>" + menu + "</cite></a>";

            $(".layui-breadcrumb").empty();
            $(".layui-breadcrumb").append(htmlStr);

            var url = $(this).attr("url");
            $("#contain").attr("src", url)
        })


    })

    function reLoad() {
        window.location.reload();
    }
</script>
</body>
</html>
