<!--  -->
<template>
<div class='layout'>
  <div class="layout-con">
    <div class="logo">
      <span>广东省博物馆</span>
    </div>
    <img class="bg" :src="require('@/assets/img/bg.jpg')" alt="">
    <div class="mask"></div>
    <div class="middle">
      <div class="middle-left">
        <div>广东省博物馆<br/>管理后台</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 onkeyup="this.value=this.value.replace(/[, ]/g,'')" maxlength="20" show-word-limit v-model="formLogin.username" placeholder="账号"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input onkeyup="this.value=this.value.replace(/[, ]/g,'')" maxlength="20" show-word-limit @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 { encodeStr } from '@/util'
import { Base64 } from 'js-base64'

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.trim(),
          password: encodeStr(Base64.encode(this.formLogin.password.trim())),
          from:'cms'
        }
        if (valid) {
          this.$http.post('admin/login', data).then(res => {
            if (res.code === 0) {
              window.localStorage.setItem('token', String(res.data.token))
              window.localStorage.setItem('role', res.data.role[0])
              window.localStorage.setItem('userId', res.data.user.id)

              this.$router.push('/')
            } else {
              this.$notify.error({
                title: '错误',
                message: res.msg
              })
            }
          })
        } 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: 40px;
          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: 800px;
      min-height: 56vh;
      position: absolute;
      transform: translate(-50%,-50%);
      left: 50%;
      top: 50%;
      .middle-left{
        background: rgba(#B63C25, 0.7);
        width: 50%;
        height: 100%;
        position: relative;
        >div{
          width: 90%;
          text-align: center;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%,-50%);
          font-size: 32px;
          text-shadow: 0 4px 6px rgba(0, 0, 0, 0.7);
          color: #f2ecde;
          line-height: 40px;
        }
        img{
          position: absolute;
          width: 100%;
          left: 0;
        }
        .top{
          top: 0;
        }
        .bottom{
          bottom: 0;
          transform: rotate(180deg);
        }
      }
      .middle-right{
        position: relative;
        height: 100%;
        background: rgba(#fff, 0.7);
        width: 50%;
        .middle-form{
          width: 80%;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%,-50%);
          >div{
            text-align: center;
            margin-bottom: 50px;
            font-size: 24px;
          }
        }
      }
    }
  }
}
</style>

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