<template>
  <div>
    <div class="loginBackgroundInfo">
      <img :src="imgSrc" width="100%" height="100%" alt="" />
    </div>
    <template>
      <el-row :gutter="24" style="height:100%;width:100%">
        <el-col :xs="0"  :sm="1"  :md="2"  :lg="4"  :xl="3"><div class="grid-content "></div></el-col>
        <el-col :xs="24" :sm="21" :md="16" :lg="15" :xl="15">
          <div class="grid-content ">
            <div :style="bodyDefaultStyle">
              <div class="bodyBack">
                <div class="bodyBorder">
                  <div class="logoStyle">
                    <img :src="logoImg" width="172px" height="64px" class="logoImg" />
                  </div>
                  <div class="boxStyle">
                    <div class="subBoxStyle">
                      <el-input v-model="loginId" class="inpurtBox" placeholder="输入账号">
                        <i slot="prefix" class="el-input__icon el-icon-user-solid"></i>
                      </el-input>
                    </div>
                  </div>
                  <div class="boxStyle">
                    <div class="subBoxStyle">
                      <el-input v-model="pwd" class="inpurtBox" placeholder="输入密码">
                        <i slot="prefix" class="el-input__icon el-icon-user-solid"></i>
                      </el-input>
                    </div>
                  </div>
                  <div class="msgBoxStyle">
                    <div class="msgStyle">{{errMsg}}</div>
                  </div>
                  <div class="boxStyle">
                    <div class="subBoxStyle">
                      <el-button type="primary" @click="login"><font style="font-size:22px">立即登录</font></el-button>
                    </div>
                  </div>

                </div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :xs="0"  :sm="1"  :md="2"  :lg="1"  :xl="1"><div class="grid-content "></div></el-col>
        <el-col :xs="0"  :sm="1"  :md="2"  :lg="2"  :xl="1"><div class="grid-content "></div></el-col>
        <el-col :xs="0"  :sm="0"  :md="2"  :lg="2"  :xl="4"><div class="grid-content "></div></el-col>
    </el-row>
    </template>
  </div>
</template>
<script>
  import {mapActions} from 'vuex';
  let background = require('../assets/login/logbackground.png');
  let logo = require('../assets/login/logo.png');
  export default {
    name: 'login',
    data () {
      return {
        imgSrc:background,
        bodyDefaultStyle:{height:"0px", width:"100%"},
        logoImg:logo,

    

        loginId:"",
        pwd:"",
        errMsg:"错误消息",
      }
    },
    mounted() {
      let _this = this;
      window.onresize = () => {
        
        _this.initBodyHeight();    // 获取页面滚动高度
      };
    },
    created() {
      this.initBodyHeight();
    },
    destroyed() {
      console.log("onresize已销毁");
      window.onresize = null;
    },
    methods: {
      initBodyHeight() {
        this.bodyDefaultStyle.height = window.innerHeight-20+"px";
        console.log(window.innerHeight-40 +"px");
      },
      async login(){
        let pwd = this.pwd;
        let loginId = this.loginId;
        if (!pwd || !loginId) {
          this.$message.error("请输入账号密码");
          return;
        }
        let result = await this.$store.dispatch('users/login', { loginId:this.loginId, pwd:this.pwd });
        if (result.success) {
          this.$router.push({path: '/home'});
        } else {
          this.$message.error(result.msg);
        }
      }
    }
  }
</script>
<style type="text/css">
 .loginBackgroundInfo{
    width:100%;  
    height:100%;  /**宽高100%是为了图片铺满屏幕 */
    z-index:-1;
    position: absolute;
 }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .loginBody {
    height: 600px;
    width: 100%;
  }
  .logoStyle {
    width: 100%;
    height: 94px;
  }
  .bodyBack{
    background-color: rgb(0 0 0 / 15%);
    width: 630px;
    height: 430px;
    min-height: 150px;
    background-size:100% 100%;
    position: absolute;
    top: 20%;
    margin: 0 0 0 0;
    text-align: center;
  }
  .logoImg{
    position: relative;
    top: 20px;
  }
  .boxStyle{
    width: 100%;
    height: 76px;
    text-align: center;
  }
  .subBoxStyle{
    position: relative;
    top: 26px;
    width: 460px;
    height: 50px;
    margin:0 auto;
  }
  .subBoxStyle .el-input__inner {
    height: 50px !important;
    background-color: rgb(0 0 0 / 15%);
  }
  .subBoxStyle .el-button {
    height: 100% !important;
    width: 100% !important;
    border-radius: 0px;
    background-color: rgb(255 255 255 / 15%);
    border-color: rgb(255 255 255 / 35%);
  }
  .msgBoxStyle{
    width: 100%;
    height: 18px;
    text-align: left;
  }
  .msgStyle{
    position: relative;
    left: 85px;
    text-align: left;
    width: 50%;
    height: 100%;
  }
  .bodyBorder {
    width: 94%;
    height: 94%;
    border: 1px solid rgb(255 255 255 / 15%)!important;
    margin: 2% auto;
  }
  
</style>
