<template>
<!-- 登陆页面背景图 -->
  <div class="login">
    <div>
      <div class="login-title">欢迎,登陆青鸽管家!</div>
      <!-- 登陆板块 -->
      <div class="login-text">
        <input type="text" placeholder="用户名" class="login-input user-log" v-model="userName">
        <input type="text" placeholder="密码" class="login-input key-log" v-model=" password">
        <div class="radio" @click="remembers">
          <div class="checkbox">
            <div class="checkbox-active" v-show="active"></div>
          </div>
          <div>记住密码</div>
        </div>
        <button class="login-btn" @click="handleSubmit">登陆</button>
        <div class="login-register">
          <div>注册</div>
          <div>忘记密码</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  name: 'login',
  data () {
    return {
      userName: '15238687931',
      password: '123456',
      active:false
    }
  },
  methods:{
    ...mapActions([
      'handleLogin',
      'getUserInfo'
    ]),
    handleSubmit () {
      var loginname=this.userName;
      var loginpwd=this.password;
      // loginname, loginpwd
      if(!loginname){
        return;
      };
      if(!loginpwd){
        return;
      }
      this.handleLogin({ loginname, loginpwd }).then(res => {
        this.getUserInfo().then(res => {
          this.$router.push({
            name: this.$config.homeName
          })
        }) 
      })
    },
    // 判断是否选中记住密码
    remembers(){
      if(this.active==false){
        this.active=true;
      }else{
        this.active=false;
      }
    }
  }
}
</script>
<style lang="less">
  @import './login.less';
</style>
