<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <title>后台管理系统</title>
    <link rel="stylesheet" href="/plugins/layui/css/layui.css"/>
    <link rel="stylesheet" href="/css/main.css"/>
    <link rel="shortcut icon" type="image/x-icon" href="/img/favicon.ico"/>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo" style="position: unset;float: left">后台管理系统</div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <!--<a href="javascript:;" class="iconfont icon-caidan hideMenu" title="侧边伸缩"></a>-->
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item layadmin-flexible" lay-unselect="">
                <a href="javascript:;" layadmin-event="flexible" class="hideMenu" title="侧边伸缩">
                    <i class="layui-icon layui-icon-shrink-right" id="LAY_app_flexible"></i>
                </a>
            </li>
            <li class="layui-nav-item"><a th:href="@{'/home'}" target="content">控制台</a></li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <!-- 心知天气信息 -->
                <div class="weather">
                    <div id="tp-weather-widget" style="margin: -4px"></div>
                    <script>(function (T, h, i, n, k, P, a, g, e) {
                        g = function () {
                            P = h.createElement(i);
                            a = h.getElementsByTagName(i)[0];
                            P.src = k;
                            P.charset = "utf-8";
                            P.async = 1;
                            a.parentNode.insertBefore(P, a)
                        };
                        T["ThinkPageWeatherWidgetObject"] = n;
                        T[n] || (T[n] = function () {
                            (T[n].q = T[n].q || []).push(arguments)
                        });
                        T[n].l = +new Date();
                        if (T.attachEvent) {
                            T.attachEvent("onload", g)
                        } else {
                            T.addEventListener("load", g, false)
                        }
                    }(window, document, "script", "tpwidget", "//widget.seniverse.com/widget/chameleon.js"))</script>
                    <script>tpwidget("init", {
                        "flavor": "slim",
                        "location": "WT33C6J2C563",
                        "geolocation": "enabled",
                        "language": "zh-chs",
                        "unit": "c",
                        "theme": "chameleon",
                        "container": "tp-weather-widget",
                        "bubble": "enabled",
                        "alarmType": "badge",
                        "color": "#FFFFFF",
                        "uid": "U78371FB98",
                        "hash": "cd55c15865ecbe0f16ba78ca60ad51eb"
                    });
                    tpwidget("show");</script>
                </div>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img th:src="${user.avatar}" class="layui-nav-img"/>
                    <span th:text="${user.realName}"></span>
                </a>
                <dl class="layui-nav-child">
                    <dd><a th:href="@{'/admin/user/detail?userId='+${user.id}}" target="content">基本资料</a></dd>
                    <dd><a href="javascript:void(0);" id="model">安全设置</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item">
                <form name="out" th:action="@{/admin/logout}" method="post">
                    <a href="javascript:document.out.submit();">退出</a>
                </form>
            </li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed" th:each="resource:${resources}">
                    <a class="" href="javascript:;">
                        <i class="layui-icon" th:utext="${resource.icon}"></i>
                        <cite th:text="${resource.name}"></cite>
                    </a>
                    <dl class="layui-nav-child">
                        <dd th:each="resourceChild:${resource.children}">
                            <!--<a href="javascript:;" th:data="${menuChild.menuUrl}" th:text="${menuChild.name}"></a>-->
                            <a th:href="${resourceChild.url}" target="content">
                                <i class="layui-icon" th:utext="${resourceChild.icon}"></i>
                                <cite th:text="${resourceChild.name}"></cite>
                            </a>
                            <dl class="layui-nav-child" th:if="${not #lists.isEmpty(resourceChild.children)}">
                                <dd th:each="threeChild:${resourceChild.children}">
                                    <a th:href="${threeChild.url}" target="content">
                                        <i class="layui-icon" th:utext="${threeChild.icon}"></i>
                                        <cite th:text="${threeChild.name}"></cite>
                                    </a>
                                </dd>
                            </dl>
                        </dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <!--<div style="padding: 15px;" id="content">-->
        <iframe name="content" id="content" src="/home"></iframe>
        <!--</div>-->
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        <strong>Copyright &copy; 2018 .</strong> All rights
    </div>
</div>
<script src="/plugins/layui/layui.js"></script>
<script>
    layui.use(['element', 'layer'], function () {
        var element = layui.element, layer = layui.layer, $ = layui.jquery;

        $(function () {
            $(".hideMenu").on("click", function () {
                var oClass = $(".layui-side").hasClass("mini");
                if (!oClass) {
                    $(".layui-side").animate({
                        width: "50px"
                    })
                    $(".layui-body").animate({
                        left: "50"
                    })
                    $(".layui-footer").animate({
                        left: "50"
                    })
                } else {
                    $(".layui-side").animate({
                        width: "200px"
                    })
                    $(".layui-body").animate({
                        left: "200"
                    })
                    $(".layui-footer").animate({
                        left: "200"
                    })

                }
                $(".layui-side").toggleClass("mini");
            });
            //mini 模式下添加 tips
            $('.layui-nav-tree a').hover(function () {
                if ($(".layui-side").hasClass('mini')) {
                    var tipText = $(this).find('cite').text();
                    layer.tips(tipText, this);
                }
            }, function () {
                layer.closeAll('tips');
            });

        });

        //修改密码窗口
        $('#model').on('click', function () {
            layer.open({
                type: 2,
                skin: 'layui-layer-molv',
                area: ['460px', '320px'],
                title: ['更新密码', 'font-size:18px'],
                shadeClose: true,
                shade: [0.5, '#fff'],
                maxmin: true,
                content: '/admin/user/altPwd'
            });
        });

    });
</script>
</body>
</html>