<template>
  <div class="backgroud">
    <el-row>
      <el-col :xs="{span: 22, offset: 1}" :sm="{span: 12, offset: 6}" :md="{span: 8, offset: 8}" :lg="{span: 6, offset: 9}" :xl="{span: 6, offset: 9}" :style="fixStyle" id="loginCol">
        <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-position="left" label-width="0px" class="demo-ruleForm login-container" id="loginForm">
          <h3 class="title">系统登录</h3>
          <el-form-item prop="account">
            <el-input type="text" v-model="ruleForm2.account" autofocus placeholder="账号"></el-input>
          </el-form-item>
          <el-form-item prop="checkPass">
            <el-input type="password" v-model="ruleForm2.checkPass"  placeholder="密码" @keydown.enter.native="keyDown" show-password></el-input>
          </el-form-item>
          <el-form-item prop="verify">
            <el-input type="text" v-model="ruleForm2.verify"  placeholder="请在2分钟内输入下方图片中的答案" @keyup.enter.native="handleSubmit2"></el-input>
          </el-form-item>
          <el-form-item>
            <img
                style="width: 98%; height: 60px"
                :src="verifyImg"
                @click="getVerifyCode"
            >
          </el-form-item>
          <el-checkbox v-model="checked" checked class="remeberme">记住密码</el-checkbox>
          <el-form-item style="width:100%;">
            <el-button type="primary" style="width:100%;" @click.native.prevent="handleSubmit2" :loading="logining" :plain="true">登录</el-button>
            <!--<el-button @click.native.prevent="handleReset2">重置</el-button>-->
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {getRandCode} from "@/api/user";
import {mapActions} from 'vuex'
import http from "@/api/http";
import axios from 'axios'

export default {
  name: 'App',
  data() {
    return {
      verifyImg: "",
      vedioCanPlay: false,
      fixStyle: '',
      logining: false,
      ruleForm2: {
        account: '',
        // checkPass: 'zzairport@kako2020'
        checkPass: '',
        verify: '',
        verifyToken: ''
      },
      rules2: {
        account: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          //{ validator: validaePass }
        ],
        checkPass: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          //{ validator: validaePass2 }
        ],
        checkVerify: [
          { required: false, message: '请输入验证码', trigger: 'blur' }
        ]
      },
      checked: false,
      userMenus: []
    }
  },
  methods: {
    ...mapActions( // 语法糖
        ['setUserInfoStore'] // 相当于this.$store.dispatch('modifyName'),提交这个方法
    ),
    getVerifyCode: function(){
      getRandCode().then((res) =>{
        let status = res.status;
        this.ruleForm2.verifyToken  = res.data.jwtToken;
        this.verifyImg =   res.data.data.verifyImg;
      }).catch(error => {
        this.$message({
          message: "验证码获取失败:"+error.toString(),
          type: "error"
        });
      });
    },
    fixLoginHeight:function (){
      const windowHeight = document.body.clientHeight
      const colElement = document.getElementById("loginCol")
      if (colElement) {
        const col_height = colElement.offsetHeight; // 获取元素的高度
        this.fixStyle = {
          'margin-top': (windowHeight - col_height) / 2 + 'px',
        }
      }
    },
    handleMenuList : function (router,menu) {
      var _this = this;
      var routerName = "";
      var routerTemp = router.concat();

      routerTemp.forEach(function (v_router,v_index,v_arr) {
        routerName = v_router.name;

        //查找返回的目录列表是否包含路由名称,有就返回匹配到的元素,没有就移除
        let result = menu.find(item => {
          return item.name === routerName;
        });

        //匹配到继续判断是否子元素,有子元素继续递归
        if (result) {
          if (v_router.children && v_router.children.length>0) {
            _this.handleMenuList(v_router.children, result.children);
          }
        }else {
          //没有则可以移除
          let deletRouter = router.findIndex(itm => itm.name === routerName );
          router.splice(deletRouter,1);
        }
      });
      // console.log("longined router:");
      // console.log(routerName);
      // console.log(_this.$router.options.routes);
//            本地存储用户目录 ，防刷新目录丢失用
      sessionStorage.setItem('menu', JSON.stringify(_this.$router.options.routes));
    },
    handleSubmit2: function (ev) {
      var _this = this;
      this.$refs.ruleForm2.validate((valid) => {
        if (valid) {
          //_this.$router.replace('/table');
          this.logining = true;
          //NProgress.start();
          var loginParams = {
            username: this.ruleForm2.account,
            password: this.ruleForm2.checkPass,
            verify: this.ruleForm2.verify,
            verifyToken:this.ruleForm2.verifyToken
          };
          http.login(loginParams).then(res => {
            this.logining = false;
            //NProgress.done();
            let status = res.status;
            let authentication = res.data.authentication;
            let token = authentication.token;
            let loginUserMenus = res.data.loginUserMenus;
            if (status !== 200) {
              this.getVerifyCode();
              let msg = "登录错误";
              this.$message({
                message: msg,
                type: "error"
              });
            } else if (token) {
              sessionStorage.setItem('user', JSON.stringify(authentication));
              sessionStorage.setItem('token','Bearer '+ token);
              this.setUserInfoStore(authentication);
              //设置token,设置axios 基本配置,但是刷新后 这个登录保存的就没了
              axios.defaults.headers.common['Authorization'] = 'Bearer '+token;
              //处理用户menu
              _this.userMenus =  loginUserMenus.list;
              let sysMenus = _this.$router.options.routes;
              _this.handleMenuList(_this.$router.options.routes,_this.userMenus);
              _this.$router.push({path: '/main'});
            }
          }).catch(error => {
            this.$message({
              message: error.toString()+"-登录验证失败;",
              type: "error"
            });
            this.getVerifyCode();
          }).finally(()=>{
            this.logining = false;
          });
        } else {
          return false;
        }
      });
    }
  },
  mounted:function (){
    this.$store.commit('set_user_menu', []);
    this.$store.commit('set_user_info', {
      userId: 0,
      username: '',
      companyId: 0,
      companyName: '',
      realname: '',
      userface: '',
      companyInfo:{}
    });
    this.$nextTick(() => {
      window.onresize = () => {
        this.fixLoginHeight()
      }
      window.onresize();
    })

    document.onkeydown = function (e) {
      let key = window.event.keyCode;
      if (key == 13) {
        _this.handleSubmit2();
      }
    };

  },
  created(){
    this.getVerifyCode()
  },
}
</script>

<style lang="scss" scoped>
  #loginForm{
    filter:alpha(Opacity=80);
    -moz-opacity:0.8;
    opacity: 0.8;
  }
  .backgroud {
    width: 100%;
    height: 100vh; /* 设置为视口高度 */
    z-index: 1;
    position: absolute;
    background:url("/static/login/login_backgroud.jpg") rgba(0, 0, 0, 0.4);
  }
  .login-container {
    /*box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);*/
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    background-clip: padding-box;
    padding: 35px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
    .title {
      margin: 0px auto 40px auto;
      text-align: center;
      color: #505458;
    }
    .remember {
      margin: 0px 0px 35px 0px;
    }
  }
</style>