<!--  -->
<template>
<div class='login'>
  <div class="left"></div>
  <div class="right">
  <div class="from">
    <div class="titile">项目资料管理系统</div>
    <div class="from-input">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
        <el-form-item label="用户名" prop="userName">
          <el-input v-model="ruleForm.userName" placeholder="请输入用户账号"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="ruleForm.password" placeholder="请输入登录密码" show-password></el-input>
        </el-form-item>
    </el-form>
    </div>
    <div class="btn" @click="login">登 录</div>
  </div>
  </div>
</div>
</template>

<script>
import { userLogin } from '@/apis/login'
export default {
// import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
    // 这里存放数据
    return {
      ruleForm: {
        userName: '',
        password: ''
      },
      rules: {
        userName: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ]

      }
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    // 点击登录
    async login () {
      try {
        await this.$refs.ruleForm.validate()
        const res = await userLogin(this.ruleForm)
        if (res.code === 0) {
          localStorage.setItem('SWKK_token', res.data.token)
          localStorage.setItem('SWKK_userInfo', JSON.stringify(res.data.user))
          this.$router.push('/layout/tab1')
          this.$message.success('登录成功')
        } else this.$message.warning(res.msg)
      } catch (error) {
        console.log(error)
      }
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  },
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='less' scoped>
.login{
  display: flex;
  height: 100vh;
  min-height: 900px;
  .left{
    width: 50%;
    height: 100%;
    background: url('../assets/img/loginBac.jpg');
    background-size: 100% 100%;
  }
  .right{
    position: relative;
    width: 50%;
    height: 100%;
      .from{
        padding: 50px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        width: 50%;
        height: 50%;
        background-color: #fff;
    .titile{
      font-size: 20px;
      color: #707070;
      text-align: center;
      margin-bottom: 40px;
    }

    .btn{
      cursor: pointer;
      margin-top: 40px;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 130px;
      height: 40px;
      background-color: #dc3545;
    }
  }
  }
}
</style>
