<!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:utext="${customLoginForm.formCss}"></style>
    <style th:if="${pageParams.loginBoxPosition eq 'left'}" th:utext="${customLoginForm.formLeftCss}"></style>
    <style th:if="${pageParams.loginBoxPosition eq 'center'}" th:utext="${customLoginForm.formCenterCss}"></style>
    <style th:if="${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>
<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;

        new Vue({
            el: '#app',
            data: {
                pageParams: [[${pageParams}]],
                formData: {
                    verificationCode: '',
                    username: '',
                    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;
                },
                // 记住我
                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;
                    console.log(self.pageParams);
                    console.log(self.formData);
                    layer.msg('正在登录，请稍后...', {icon: 16, time: 3000});
                    return false;
                },

            },
            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>