<!DOCTYPE html>
<html lang="">

   <head>
      <title></title>
      <!-- <#include "/include/head-file.ftl"/> -->
      <!-- <link rel="stylesheet" href="${base}/static/ms-admin/4.7.0/css/login.css"> -->

      <!--#include virtual="include/head-file.ftl" -->
      <link rel="stylesheet" href="../../../static/ms-admin/4.7.0/css/login.css">
   </head>

   <body>
      <div id="login" class="login">
         <el-container class="ms-admin-login-container">
            <el-main class="ms-admin-login-main">
               <div class="ms-admin-login-warp">
                  <img :src="ms.base+'/static/ms-admin/4.7.0/images/login-slogn.png'">
                  <el-form :model="loginForm" status-icon :rules="loginFormRule" ref="loginForm" label-width="100px" class="ms-admin-login-form">
                     <h1>
                        <span>账户登录 / </span>User login</h1>
                     <el-form-item prop="name" class="ms-admin-form-item">
                        <el-input type="text" placeholder='用户名' v-model="loginForm.managerName" autocomplete="off"></el-input>
                     </el-form-item>
                     <el-form-item prop="pass" class="ms-admin-form-item">
                        <el-input type="password" placeholder='密码' v-model="loginForm.managerPassword" autocomplete="off"></el-input>
                     </el-form-item>
                     <el-form-item prop="code" class="ms-admin-form-item ms-admin-form-item-code">
                        <el-input type="text" placeholder='验证码' v-model="loginForm.rand_code" autocomplete="off"></el-input>
                        <img :src="verifCode" class="code-img" @click="code" />
                        <p>
                           <span>看不清?</span>
                           <span @click="code">换一张</span>
                        </p>
                     </el-form-item>
                     <el-form-item class="ms-admin-form-item ms-admin-form-item-checkout">
                        <el-checkbox v-model="rememberPass">记住密码</el-checkbox>
                     </el-form-item>
                     <el-form-item class="ms-admin-form-item">
                        <el-button type="primary" @click="checkLogin" class="ms-admin-login-btn">登录</el-button>
                     </el-form-item>
                  </el-form>
               </div>
            </el-main>
         </el-container>
      </div>
   </body>

</html>
<script>
   var loginVue = new Vue({
      el: '#login',
      data: {
         loginForm: {
            managerName: '',
            managerPassword: "",
            rand_code: ''
         },
         verifCode: ms.manager + "/code?t=" + new Date().getTime(),
         rememberPass: '',
         loginFormRule: {

            managerName: [{
                  required: true,
                  message: '请输入用户名',
                  trigger: 'blur'
               },
               {
                  min: 3,
                  max: 6,
                  message: '长度在 3 到 5 个字符',
                  trigger: 'blur'
               }
            ],
            managerPassword: [{
                  required: true,
                  message: '请输入密码',
                  trigger: 'blur'
               },
               {
                  min: 6,
                  max: 20,
                  message: '长度在 6 到 20 个字符',
                  trigger: 'blur'
               }
            ],
            rand_code: [{
                  required: true,
                  message: '请填写验证码',
                  trigger: 'blur'
               },
               {
                  min: 1,
                  max: 4,
                  message: '长度在1 到 4 个字符',
                  trigger: 'blur'
               }
            ],
         }
      },
      methods: {
         // 登录
         checkLogin: function() {
            var that = this;
            ms.http.post(ms.manager + "/checkLogin.do", that.loginForm).then(function(data) {
               if(data.result) {
                  that.$notify({
                     title: '成功',
                     message: '登录成功',
                     type: 'success'
                  });
                  location.href = ms.manager + "/index.do";
               } else {
                  that.$notify({
                     title: '失败',
                     message: data.resultMsg,
                     type: 'warning'
                  });
               }
            }, (err) => {
               that.$message.error(data.resultMsg);
            })
         },
         code: function() {
            this.verifCode = ms.manager + "/code?t=" + new Date().getTime();
         },

      },
      mounted: function() {
         this.verifCode = ms.manager + "/code?t=" + new Date().getTime()
      }
   })

</script>