<template>
   <div class="login-page" :style="login_background">
      <div class="login-wraper-outer">
         <div class="login-wraper-inner">
            <p class="login-title">{{CONFIG.title}}</p>
            <Form ref="loginForm" :model="formData" :rules="ruleValidate">
               <Form-item prop="username">
                  <Input size="large" type="text" placeholder="用户名" v-model="formData.username">
                     <Icon type="ios-contact" slot="prepend" size="20" class="login-icon"></Icon>
                  </Input>
               </Form-item>

               <Form-item prop="password">
                  <Input size="large" type="password" placeholder="密码" v-model="formData.password">
                     <Icon type="ios-lock" slot="prepend" size="20" class="login-icon"></Icon>
                  </Input>
               </Form-item>

               <Form-item class="ta-r">
                  <ul class="clearfix">
                     <li class="f-l">
                        <Checkbox size="large" v-model="formData.remember" :true-value="1" :false-value="0">&ensp;7天免登录</Checkbox>
                     </li>
                     <!-- <li class="f-r">
                        <span class="forget">忘记密码？</span>
                     </li> -->
                  </ul>

               </Form-item>

               <Form-item>
                  <Button class="login-btn" type="primary" long size="large" :loading="loading" @click="login('loginForm')">
                     登 录
                  </Button>
               </Form-item>
            </Form>
         </div>
      </div>

      <ui-forget></ui-forget>
   </div>
</template>

<script>
   import { login } from 'api/base/auth';
   import { setToken, removeToken } from 'service/auth';
   import { pageRedirect } from 'util';

   export default {
      components: {
         UiForget: resolve => require(['views/auth/forget'],resolve)
      },
      data(){
         return{
            loading: false,
            formData: {
               username: '',
               password: '',
               remember: 0
            },
            ruleValidate: {
               username: [
                  { required: true, message: '请输入用户名', trigger: 'blur' }
               ],
               password: [
                  { required: true, message: '请输入密码', trigger: 'blur' }
               ]
            }

         }
      },
      computed:{
         login_background(){
            return 'background: #f7f7f7 url(' + window.CONFIG.login_background + ') bottom center/cover no-repeat;';
         }
      },
      mounted(){
         const _this = this;
         window.onkeydown = function(e){
            if(e.keyCode == 13 || e.which == 13){
               _this.login('loginForm')
            }
         }
      },
      methods: {
         login(username) {
            this.$refs[username].validate((valid) => {
               if(valid){
                  this.loading = true;
                  let data = {
                     username: this.formData.username.trim(),
                     password: md5(this.formData.password.trim()),
                     remember: this.formData.remember
                  }

                  login(data).then(res => {
                     this.loading = false;
                     if(res.code === 0){
                        localStorage.clear();
                        removeToken();
                        const result = res.data;
                        setToken(result, data.remember?7:1);
                        vm.$router.replace('/');
                        // pageRedirect();
                     }

                  }).catch(err => {
                     this.loading = false;
                  })
               }
            })
         }
      }
   }
</script>

<style scoped>
>>> .ivu-input:hover,
>>> .ivu-input:focus {
  /*border-color: #d7dde4;*/
  box-shadow: none;
}

>>> .ivu-input-group-prepend,
.ivu-input-group-append {
  background: transparent;
  /*border-color: #d7dde4;*/
}
>>> .ivu-input-group .ivu-input {
  height: 46px;
}
</style>

<style  scoped lang="less">
.particles {
  width: 100%;
  height: 100%;
}

.login-page {
  position: fixed;
  top: 0;
  left: 0;
  background: #f7f7f7 url("~images/login_bg.jpg") bottom center/cover no-repeat;
  width: 100%;
  height: 100%;

  .login-wraper-outer {
    width: 400px;
    height: 400px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -200px;
    margin-left: -200px;
    background-color: #fff;
    -webkit-box-shadow: 0 0 5px #545353;
    box-shadow: 0 0 5px #545353;
    background-size: 100%;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
    border: 1px solid #e3e3e3;
  }

  .login-wraper-inner {
    width: 80%;
    margin: 0 auto;
  }

  .login-title {
    font-size: 25px;
    margin-top: 30px;
    margin-bottom: 40px;
    text-align: center;
  }

  .login-icon {
    color: gray;
    width: 40px;
  }

  .forget {
    font-size: 13px;
    cursor: pointer;

    &:hover {
      color: #3399ff;
      text-decoration: underline;
    }
  }

  .login-btn {
    margin-top: 0px;
    border: 0;
    padding: 15px 0;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
  }
}
</style>
