<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

<head>
    <meta charset="UTF-8">
    <title>BPM后台管理系统</title>
    <link rel="stylesheet" type="text/css" th:href="@{/js/plugins/bootstrapselect/css/piyc/index.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/bootstrap-dist/css/bootstrap.css}">
    <link href="https://yst-pjyc-server.oss-cn-beijing.aliyuncs.com/datas/image/20190307/20190307174527490118539.png" rel="icon" type="image/x-icon"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/common/models.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/common/main_style.css}">
</head>
<body>
<!--首页-->
<div class="MainBox">

<!--    <input id="userId" type="hidden" th:value="${userId}"/>
    <input id="flag" type="hidden" th:value="${session.userInfo.flag}"/>-->

    <!--头部-->
    <div class="header" style="height: 50px">
        <shiro:hasRole name="1">
            <div class="web_logo lf">
                <img class="lf" src="https://yst-pjyc-server.oss-cn-beijing.aliyuncs.com/datas/image/20190307/20190307174527490118539.png" style="    margin-top: -3px;border-radius: 7px;" alt="">
                <div class="lf">
                    <p style="font-size:18px;font-family: '微软雅黑 Bold', '微软雅黑';">BPM后台管理系统</p>
                </div>
            </div>
        </shiro:hasRole>
        <div class="userBox right" style="padding-right:100px;">
            <!--<span class="glyphicon glyphicon-user"><span th:text="${session.userInfo.userName}"></span></span>
            <span class="glyphicon glyphicon-off" onclick="loginOut()" style="cursor: pointer" title="退出登陆"></span>-->
        </div>
    </div>
    <!--end 头部-->
    <!--左边导航-->
    <div class="main_wrap clearfix" >
        <ul id="aside_nav" class="navBox" style='width:125px;min-height: 680px;'></ul>
    </div>
    <!--end 左边导航-->
    <div class="mainContentBox">
        <iframe id="main_frame" width="100%"  height="100%" frameborder="0" onload="" name="main_frame" src="/bpm/user/welcome"
                style="overflow:hidden; position:absolute;"></iframe>
    </div><!--主体内容-->

    <!--end 主体内容-->
</div>
<!--end 首页-->
<!--遮罩层-->
<div class="maskBox"></div>
<!--end 遮罩层-->
<!--修改密码弹窗-->
<div class="PopupBox" id="ph_modifyBox">
    <!--内容-->
    <div class="PopupCon">
        <div class="ph_subPoCon ph_screen">
            <form class="form-inline" id="updatePswForm">
                <table class="ph_tableBox">
                    <tr>
                        <th><span class="require">*</span>旧密码：</th>
                        <td><input id="password"
                                   class="validate[required,minSize[6],maxSize[16]]"
                                   name="password" type="password"></td>
                    </tr>
                    <tr>
                        <th><span class="require">*</span>新密码：</th>
                        <td><input id="newPassword"
                                   class="validate[required,minSize[6],maxSize[16]]"
                                   name="newPassword" type="password"></td>
                    </tr>
                    <tr>
                        <th><span class="require">*</span>确认新密码：</th>
                        <td><input id="confirmPassword"
                                   class="validate[required,equals[newPassword],minSize[6],maxSize[16]]"
                                   name="confirmPassword" type="password"></td>
                    </tr>

                </table>
            </form>
        </div>
    </div>
    <!--end 内容-->
</div>
<div id="mydiv1" style="position:absolute;right:120px;top:50px;">
    <ul>
        <li><a>账户信息</a><a href="#" class="accountSettings">账户设置</a></li><br/>
        <li> <hr/></li><br/><br/>
        <li th:text="'• 本次登录：'+${#dates.format(loginTime, 'yyyy-MM-dd HH:mm:ss')}">• 本次登录：2017-07-03 14:36:21</li><br/>
        <li th:text="'• 登录地区：'+${loginAddress}">• 登录地区：广东省深圳市 (IP：183.14.135.1)</li><br/>
        <li th:text="'• 上次登录：'+${#dates.format(lastLoginTime, 'yyyy-MM-dd HH:mm:ss')}"> • 上次登录：2017-07-03 14:36:21</li>
    </ul>
</div>

<!--end 修改密码弹窗-->
<script type="text/javascript" th:src="@{/js/common/jquery-1.11.1.min.js}"></script>
<!-- 验证 -->
<script type="text/javascript" th:src="@{/js/plugins/validat/jquery.validationEngine.js}"></script>
<script type="text/javascript" th:src="@{/js/plugins/validat/jquery.validationEngine-zh_CN.js}"></script>
<script type="text/javascript" th:src="@{/js/plugins/layer/layer.js}"></script>
<script type="text/javascript" th:src="@{/bootstrap-dist/js/bootstrap.js}"></script>
<script type="text/javascript" th:inline="javascript">
    /*document.getElementById('main_frame').contentWindow.document.body.style.minWidth="1100px";*/
    $(function() {
        var Popupe = new PopupBase();
        Popupe.show('.ph_modify', '.maskBox,.ph_modifyBox');
        Popupe.hide('.close', '.maskBox,.ph_modifyBox');
/*
        var userId = $("#userId").val();
        var flag = $("#flag").val();*/
        $.ajax({
            async: false,
            url: "/bpm/user/menuList",
            type: "GET",
            cache:false,
            dataType: "json",
            success: function (data) {
                console.log(data.data);
                if (data.data) {
                    MenuTree(data.data);
                } else {
                    layer.alert("当前用户无菜单权限", {
                        icon: 2,
                        title: '失败',
                        closeBtn: 0,
                        btnAlign: 'c'
                    });
                }
            },
            error: function (data) {
                console.log(data);
                layer.alert("菜单加载异常", {
                    icon: 2,
                    title: '失败',
                    closeBtn: 0,
                    btnAlign: 'c'
                });
            }
        });
    });

    //加载树型菜单
    function MenuTree(data) {
        var menuTree = '';

        //父级
        for (var i = 0; i < data.length; i++) {
            var lis = '';
            //子级
            if (data[i].child) {
                for (var j = 0; j < data[i].child.length; j++) {
                    if(data[i].child[j].menuUrl){
                        lis += '<li class="s_menu_item"><a target="main_frame" href="' + data[i].child[j].menuUrl + '">·' + data[i].child[j].menuName + '</a></li>'
                    }else{
                        lis += '<li class="s_menu_item"><a target="main_frame" style="color:#999">' + data[i].child[j].menuName + '</a></li>'
                    }

                }
            }
            menuTree+= '<li>'+
                '<a target="main_frame" href="' + data[i].menuUrl + '"><i class="' + data[i].icon + '"></i>'+ data[i].menuName +'</a>'+
                '<ul class="second_level_menu">'+
                '<li>'+
                //'<h4 class="s_menu_title">订单管理</h4>'+
                '<ul>'+ lis +'</ul>'+
                '</li>'+
                '</ul>'+
                '</li>'




            /*menuTree += '<li>'
             + '<div class="link"><i class="' + data[i].icon + '"></i>' + data[i].menuName + '<i class="navIconRig"></i></div>'
             + '<ul class="submenu">' + lis + '</ul>'
             + '</li>';*/
        }
        $("#aside_nav").append(menuTree);
    }

    $(function () {

        //验证初始化
        $('#updatePswForm').validationEngine({
            promptPosition: 'bottomLeft'
            , autoPositionUpdate: false
            , addPromptClass: 'formError-text'
            , autoHidePrompt: true
            , autoHideDelay: 3000
            , fadeDuration: 0.3
        });

        $('.userBox').on('click', '.ph_modify', function () {
            layer.open({
                type: 1,
                title: '修改登录密码',
                closeBtn: 0,
                area: ['442px', '280px'],
                btn: ['确认', '取消'],
                btnAlign: 'c',
                content: $('#ph_modifyBox'),
                btn1: function () {
                    var flag = $("#updatePswForm").validationEngine("validate");
                    if (!flag) {
                        return false;
                    }
                    $.ajax({
                        async: false,
                        url: "/permission/user/updatePsw",
                        data: $('#updatePswForm').serialize(),
                        type: "POST",
                        dataType: "json",
                        success: function (data) {
                            if (data.code == '200') {
                                window.location.href = '/logout';
                            } else {
                                $('#password').val('');
                                $('#newPassword').val('');
                                $('#confirmPassword').val('');
                                layer.alert(data.message, {
                                    icon: 2,
                                    title: '失败',
                                    closeBtn: 0,
                                    btnAlign: 'c'
                                });
                            }
                        },
                        error: function (data) {
                            layer.alert("修改密码错误", {
                                icon: 2,
                                title: '失败',
                                closeBtn: 0,
                                btnAlign: 'c'
                            });
                        }
                    });
                },
            });
        });
    });

</script>
<script type="text/javascript" th:src="@{/js/common/index.js}"></script>
<script>
    $("#aside_nav").on("click","li",function(){
        $(this).addClass("active");
        $(this).siblings(".active").removeClass("active");
    })
    $("#aside_nav").on("click",".s_menu_item",function(){
        $(".menu_active").removeClass("menu_active");
        $(this).addClass("menu_active");
    })
    function loginOut() {
        location.href="/login/logout";
    }
    function show(obj,id) {
        var objDiv = $("#"+id+"");
        $(objDiv).css("display","block");
        $(objDiv).css("left", event.clientX);
        $(objDiv).css("top", event.clientY + 10);
    }
    function hide(obj,id) {
        var objDiv = $("#"+id+"");
        $(objDiv).css("display", "none");
    }
</script>
</body>
</html>