<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>运维人员登录</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
    <link rel="stylesheet" th:href="@{/static/css/weui.css}" href="../static/css/weui.css">
</head>
<body>
<div class="container" id="app">
    <div class="weui-form">
        <div class="weui-form__text-area">
            <h2 class="weui-form__title">运维人员登录</h2>
        </div>
        <div class="weui-form__control-area">
            <div class="weui-cells__group weui-cells__group_form">
                <div class="weui-cells weui-cells_form">
                    <div class="weui-cell weui-cell_active">
                        <div class="weui-cell__hd"><label class="weui-label">账号</label></div>
                        <div class="weui-cell__bd">
                            <input class="weui-input" placeholder="账号" v-model="userName">
                        </div>
                    </div>
                    <div class="weui-cell weui-cell_active">
                        <div class="weui-cell__hd"><label class="weui-label">密码</label></div>
                        <div class="weui-cell__bd">
                            <input type="password" class="weui-input" placeholder="密码" v-model="password">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="weui-form__opr-area">
            <input type="button" value="确定"  @click="login"  class="weui-btn weui-btn_primary" id="showTooltips"/>
        </div>
    </div>
</div>
<script th:src="@{/static/js/jquery.min.js}" src="../static/js/jquery.min.js"></script>
<script th:src="@{/static/js/jquery.cookie.min.js}" src="../static/js/jquery.cookie.min.js"></script>
<script th:src="@{/static/js/vue.js}" src="../static/js/vue.js"></script>
<script type="text/javascript" th:inline="javascript">
    var path = [[${#httpServletRequest.contextPath}]];
    var schoolId = [[${param.schoolId}]];
</script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            token:$.cookie('devOpsToken'),
            userName: "admin",
            password: ""
        },
        methods:{
            login:function(){
                if(this.userName.length==0 || this.password.length==0){
                    alert("用户名或密码不能为空!");
                    return;
                }

                $.post(path + "/login",{
                    userName: this.userName,
                    password: this.password
                },
                function(rs){
                    if(rs.result){
                        vm.token = rs.data;
                        $.cookie('devOpsToken',rs.data);

                        window.location = path + "/devOps/listOfDevice";
                    }else{
                        alert(rs.message);
                    }
                },"json");
            }
        }
    })
</script>
</body>
</html>