<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <base th:href="${#request.getContextPath() + '/'}">
    <title th:text="${systemTitle}"></title>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="icon" type="image/ico" href="assets/favicon.ico"/>
    <link rel="stylesheet" href="assets/fonts/font-awesome/css/font-awesome.css"/>
    <link rel="stylesheet" href="assets/layuiadmin/layui/css/layui.css?v=3" media="all">
    <link rel="stylesheet" href="assets/layuiadmin/style/admin.css?v=3" media="all">
    <link rel="stylesheet" href="assets/css/supersized.css?v=3">
    <link rel="stylesheet" href="assets/layuiadmin/style/login.css?v=3" media="all">
    <style th:if="${customLoginForm ne null}" th:utext="${customLoginForm.formCss}"></style>
    <style th:if="${customLoginForm eq null and pageParams.loginBoxPosition eq 'left'}">
        @media screen and (max-width: 1920px) {
            .layadmin-user-login-main {
                right: 68%;
            }
        }
        @media screen and (max-width: 1366px) {
            .layadmin-user-login-main {
                right: 62%;
            }
        }
    </style>
    <style th:if="${customLoginForm ne null and pageParams.loginBoxPosition eq 'left'}" th:utext="${customLoginForm.formLeftCss}"></style>
    <style th:if="${customLoginForm eq null and pageParams.loginBoxPosition eq 'center'}">
        .layadmin-user-login-main {
            left: 50%;
            margin-left: -188px;
        }
    </style>
    <style th:if="${customLoginForm ne null and pageParams.loginBoxPosition eq 'center'}" th:utext="${customLoginForm.formCenterCss}"></style>
    <style th:if="${customLoginForm ne null and pageParams.loginBoxPosition eq 'default'}" th:utext="${customLoginForm.formRightCss}"></style>
</head>
<body>
<div id="app">
    <div v-cloak th:if="${customLoginForm ne null}" th:utext="${customLoginForm.formHtml}"></div>
    <div v-cloak th:if="${customLoginForm eq null}">
        <div id="loginBox" class="layadmin-user-login-main">
            <div class="layadmin-user-login-box layadmin-user-login-header">
                <img class="system-logo" :src="'route/file/download/true/'+ pageParams.systemLogo" v-if="pageParams.systemLogo">
                <div :class="{'system-logo-title': pageParams.systemLogo}">
                    <h2 :style="{'font-size': (pageParams.systemTitleSize ? pageParams.systemTitleSize : 26) +'px'}">{{pageParams.systemTitle}}</h2>
                    <p :style="{'font-size': (pageParams.systemSubTitleSize ? pageParams.systemSubTitleSize : 16) +'px'}">{{pageParams.systemSubTitle}}</p>
                </div>
            </div>
            <div id="loginFormBox" class="layadmin-user-login-box layadmin-user-login-body layui-form">
                <form id="loginForm" :action="pageParams.loginFormAction" method="post" @submit.prevent="submitForm">
                    <input type="hidden" name="referToken" v-model="formData.referToken"/>
                    <div class="layui-form-item">
                        <label class="layadmin-user-login-icon layui-icon layui-icon-username" for="username"></label>
                        <input type="text" v-model="formData.username" id="username" name="username" lay-verify="username" placeholder="用户名" class="layui-input">
                    </div>
                    <div class="layui-form-item" id="passwordBox">
                        <label class="layadmin-user-login-icon layui-icon layui-icon-password" for="password"></label>
                        <input type="password" v-model="formData.password" id="password" name="password" lay-verify="password" placeholder="密码" class="layui-input">
                    </div>
                    <div class="layui-form-item" id="verificationCodeBox" v-if="pageParams.verificationCode == 'true'">
                        <!-- 验证码 -->
                        <div class="layui-row">
                            <div class="layui-col-xs7">
                                <label class="layadmin-user-login-icon layui-icon layui-icon-vercode" for="verificationCode"></label>
                                <input type="text" v-model="formData.verificationCode" id="verificationCode" name="verificationCode" lay-verify="verificationCode" placeholder="图形验证码" class="layui-input">
                            </div>
                            <div class="layui-col-xs5">
                                <div style="margin-left: 10px;">
                                    <img src="oauth/verification-code/png" class="layadmin-user-login-codeimg" @click="refreshVerificationCode($event)">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item remember-password" id="rememberPassword">
                        <input type="checkbox" v-model="formData.remember" name="remember" lay-skin="primary" title="记住密码" lay-filter="rememberFilter">
                    </div>
                    <div class="layui-form-item">
                        <button type="submit" class="layui-btn layui-btn-fluid" lay-submit>登 录</button>
                    </div>
                </form>
            </div>
        </div>
        <div class="layui-trans layadmin-user-login-footer footer-text">
            <p v-if="pageParams.copyRightYear"><span>{{'© '+ pageParams.copyRightYear +' '}}</span><a href="javascript:void(0);" v-if="pageParams.copyleft">{{pageParams.copyleft}}</a></p>
            <p v-if="pageParams.officialUrl">
                <span><a :href="pageParams.officialUrl" target="_blank">前往官网</a></span>
            </p>
        </div>
    </div>
</div>
<script type="text/javascript" src="assets/js/vue.min.js"></script>
<script type="text/javascript" src="assets/layuiadmin/layui/layui.js"></script>
<script type="text/javascript" th:inline="javascript">
    layui.config({
        base: 'assets/layuiadmin/'
    }).extend({
        index: 'lib/index'
    }).use(['index', 'form', 'cookie', 'md5', 'base64', 'supersized', 'common', 'ftukey', 'restajax'], function () {
        var $ = layui.$;
        var form = layui.form;
        var layer = layui.layer;
        var cookie = layui.cookie;
        var md5 = layui.md5;
        var base64 = layui.base64;
        var restAjax = layui.restajax;

        var pageParams = [[${pageParams}]];
        new Vue({
            el: '#app',
            data: {
                pageParams: pageParams,
                formData: {
                    referToken: pageParams.referToken,
                    verificationCode: '',
                    username: pageParams.loginUsername,
                    password: '',
                    remember: false
                }
            },
            methods: {
                showErrorMessage: function() {
                    var self = this;
                    if(self.pageParams.errorMessage) {
                        layer.msg(self.pageParams.errorMessage);
                    }
                },
                initBackground: function() {
                    var self = this;
                    var loginBackgroundImages = self.pageParams.loginBackgroundImages;
                    var photos = [];
                    if(loginBackgroundImages) {
                        var loginBackgroundImageArray = loginBackgroundImages.split(',');
                        for(var i = 0, item = loginBackgroundImageArray[i]; item = loginBackgroundImageArray[i++];) {
                            photos.push({
                                image: 'route/file/download/true/'+ item
                            })
                        }
                    } else {
                        for(var i = 1; i <= 9; i++) {
                            photos.push({
                                image: 'assets/images/backgrounds/'+ i +'.jpg'
                            })
                        }
                    }
                    $.supersized({
                        slide_interval     : 4000,    // Length between transitions
                        transition         : 1,    // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
                        transition_speed   : 1000,    // Speed of transition
                        performance        : 1,    // 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
                        // Size & Position
                        min_width          : 0,    // Min width allowed (in pixels)
                        min_height         : 0,    // Min height allowed (in pixels)
                        vertical_center    : 1,    // Vertically center background
                        horizontal_center  : 1,    // Horizontally center background
                        fit_always         : 0,    // Image will never exceed browser width or height (Ignores min. dimensions)
                        fit_portrait       : 1,    // Portrait images will not exceed browser height
                        fit_landscape      : 0,    // Landscape images will not exceed browser width
                        // Components
                        slide_links        : 'blank',    // Individual links for each slide (Options: false, 'num', 'name', 'blank')
                        slides             : photos
                    });
                },
                // 刷新验证码
                refreshVerificationCode: function(event) {
                    event.target.src = event.target.src + '?t='+ new Date().getTime();
                },
                // 记住我
                rememberMe: function() {
                    var self = this;
                    var rememberMe = cookie.getCookie('rememberMe');
                    if(rememberMe) {
                        var rememberMes = base64.decode(rememberMe).split('_$WG$_');
                        self.formData.username = rememberMes[0];
                        self.formData.password = rememberMes[1];
                        self.formData.remember = true;
                    }
                    self.$nextTick(function() {
                        form.render();
                    });
                },
                // 提交表单
                submitForm: function() {
                    var self = this;
                    if(self.formData.remember) {
                        cookie.setCookie('rememberMe', base64.encode(self.formData.username +'_$WG$_'+ self.formData.password), 30);
                    } else {
                        cookie.setCookie('rememberMe', '', 0);
                    }
                    layer.msg('正在登录，请稍后...', {icon: 16, shade: 0.1, time: 0});
                    self.formData.password = md5(md5(md5(self.formData.password)));
                    self.$nextTick(function() {
                        $('#loginForm').submit();
                    })
                },

            },
            mounted: function() {
                var self = this;
                self.showErrorMessage();
                self.initBackground();
                self.rememberMe();
                // 复选框勾选事件
                form.on('checkbox(rememberFilter)', function(data) {
                    self.formData.remember = data.elem.checked;
                });
                // 保单验证
                form.verify({
                    username: function(value, item) {
                        if(!value){
                            return '用户名不能为空';
                        }
                    },
                    password: function(value, item) {
                        if(!value) {
                            return '密码不能为空';
                        }
                    },
                    verificationCode: function(value, item) {
                        if(!value) {
                            return '验证码不能为空';
                        }
                    }
                });
            }
        })
    });
</script>
</body>
</html>