<template>
    <div class="login">
        <div class="login-header">
            <img src="../assets/image/logo.png" alt="">
        </div>
        <div class="login-view">
            <div class="login-title">
                <img src="../assets/image/login-icon.png" alt="">
                <span>用户登录</span>
            </div>
            <div class="login-input username" :class="usernameAct?'active':''">
                <img src="../assets/image/username.png" alt="">
                <input v-model="username" @focus="usernameAct=true" @blur="usernameAct=false" type="text" placeholder="用户名">
            </div>
            <div class="login-input password" :class="passwordAct?'active':''">
                <img src="../assets/image/password.png" alt="">
                <input v-model="password" @focus="passwordAct=true" @blur="passwordAct=false" type="password" placeholder="密   码">
            </div>
            <div class="save" @click="save=!save">
                <div>
                    <div><i v-if="save" class="el-icon-check"></i></div>
                记住密码
                </div>
            </div>
            <div class="login-btn" @click="login">
                登  录
            </div>
        </div>
    </div>
  </template>
  <script>
  export default {
    data(){
        return {
            usernameAct:false,
            passwordAct:false,
            save:false,
            password:'',
            username:'',
        }
    },
    mounted(){
        if(localStorage.getItem('save')){
          this.password=localStorage.getItem('password')
          this.username=localStorage.getItem('username')
          this.save=true
        }else{
            this.username=localStorage.getItem('username')
        //   this.save=true
        }
        if(localStorage.getItem('token')){
      this.$router.push({ name: 'index' })
    }
    },
    methods:{
        login(){
            var store=this.$store.state

            // "username": "xiaomeng",
            //     "password": "lihe12345"
            if(!this.username){
                this.$message.error("用户名未填写");
                return
            }
            if(!this.password){
                this.$message.error("密码未填写");
                return
            }
          
            var data = {
                "username": this.username,
                "password":this.password
            }; // 替换为你要发送的数据
            this.api.login(data).then((res) => {
                if(this.save){
                    localStorage.setItem('save',1)
                    localStorage.setItem('username',this.username)
                    localStorage.setItem('password',this.password)
                }else{
                    localStorage.setItem('save',0)
                    localStorage.setItem('username',this.username)
                    if(localStorage.getItem('password')){
                        localStorage.removeItem('password')
                    }
                }
                if (res.data.code == 200) {
                    this.$message({
                        message: '登陆成功',
                        type: "success",
                    });
                    store.equipmentIndex=1
                    localStorage.setItem('token',res.data.data.token)
                    localStorage.setItem('userInfo',JSON.stringify(res.data.data))
                    this.$router.push({ name: 'index' })
                } else {
                    localStorage.removeItem('token')
                    this.$message.error("请求出错,请重试");
                }
            });
        },
    },
  
  }
  </script>
  <style lang="scss" scoped>
    .login{
        width: 100%;
        height: 100%;
        // min-height: 900px;
        background: url(../assets/image/login-bg.png) no-repeat center;
        background-size: cover;
        background-position:center center;
    }
  </style>
  
  