<template>
<div class='layout'>
  <div class="layout-con">
    <div class="logo">
      <span></span>
    </div>
    <img class="bg" :src="require('@/assets/images/bg.jpg')" alt="">
    <div class="middle">
      <div class="middle-left">
        <p>全景看看VR全景制作平台</p>
        <div>3D效果图展示首选平台</div>
      </div>
      <div class="middle-right">
        <el-form class="middle-form" :rules="ruleLogin" status-icon :model="formLogin" ref="formLogin">
          <div>欢迎登录</div>
          <el-form-item prop="username">
            <el-input v-model="formLogin.username" placeholder="账号"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input @keyup.enter.native="submitForm('formLogin')" v-model="formLogin.password" placeholder="密码" type="password"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button  @click="submitForm('formLogin')" type="primary" >登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import { Base64 } from 'js-base64'

import {login} from "@/api";
export default {
  components: {},
  data () {
    var checkUsername = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('账号不能为空'))
      } else {
        callback()
      }
    }
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        callback()
      }
    }
    // 这里存放数据
    return {
      formLogin: {
        username: '',
        password: '',
        region: 'high'
      },
      ruleLogin: {
        username: [
          { validator: checkUsername, trigger: 'blur' }
        ],
        password: [
          { validator: validatePass, trigger: 'blur' }
        ]
      }
    }
  },
  // 监听属性 类似于data概念
  computed: {
    userId () {
      return window.localStorage.getItem('userInfo')
    }
  },
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        let data = {
          userName: this.formLogin.username,
          password:  this.$encodeStr(Base64.encode(this.formLogin.password))
        }
        if (valid) {
          login(data,(res)=>{
            console.log(res.data);
            window.localStorage.setItem('token', String(res.data.token))
            window.localStorage.setItem('userInfo', JSON.stringify(res.data.user))
            this.$router.push({path:'/'})
          })

        } else {
          return false
        }
      })
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    if (this.userId) {
      this.$router.push({path:'/'})
    }
  }
}
</script>

<style lang="less" scoped>
.layout{
  .layout-con{
     width: 100%;
     position: relative;
     .logo{
       position: absolute;
       left: 35px;
       top: 40px;
       z-index: 999;
       cursor: pointer;
       height: auto;
       display: flex;
        align-items: center;
        >img{
          width: 160px;
          margin-right: 10px;
        }
        span{
          color: #fff;
          font-size: 24px;
          font-weight: bold;
        }
     }
    .bg{
      width: 100%;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      z-index: 0;
      position: fixed;
      user-select: none;
      
    }
    .mask{
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.7);
      position: fixed;
      top: 0;
      left: 0;
      z-index: 0;
    }
    .middle{
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      min-height: 56vh;
      position: absolute;
      transform: translateY(-50%);
      top: 50%;
      .middle-left{
        width: 50%;
        height: 100%;
        position: relative;
        color: #FFFFFF;
        >p{
          font-size: 48px;
          font-weight: bold;
          line-height: 64px;
          text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.4);
        }
        >div{
          height: 35px;
          font-size: 26px;
          line-height: 35px;
          text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.4);
        }
        
      }
      .middle-right{
        width: 400px;
        height: 380px;
        background: #FFFFFF;
        box-shadow: 0px 2px 20px 0px rgba(5, 38, 38, 0.15);
        border-radius: 10px;
        position: relative;
        .middle-form{
          width: 80%;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%,-50%);
          >div{
            text-align: center;
            font-size: 24px;
            &:not(&:last-of-type){
              margin-bottom: 50px;
            }
          }
        }
      }
    }
  }
}
</style>

<style scoped>
.el-button--primary {
  width: 100%;
}
</style>
