<template>
  <div>
    <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" auto-complete="off" placeholder="账号"></el-input>
      </el-form-item>
      <el-form-item prop="checkPass">
        <el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off" placeholder="密码"></el-input>
      </el-form-item>
      <el-checkbox v-model="checked" checked class="remember">记住密码</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>
  <div class="homepage-hero-module">
    <div class="video-container">
      <div :style="fixStyle" class="filter"></div>
      <video :style="fixStyle" autoplay loop class="fillWidth" v-on:canplay="canplay">
        <source src="/static/login/New-jumbo.mp4" type="video/mp4"/>
        浏览器不支持 video 标签，建议升级浏览器。
        <!--<source src="/static/login/New-jumbo.webm" type="video/webm"/>-->
        <!--浏览器不支持 video 标签，建议升级浏览器。-->
      </video>
      <div class="poster hidden" v-if="!vedioCanPlay">
        <img :style="fixStyle" src="https://s2.best-wallpaper.net/wallpaper/2560x1600/1511/Airplane-passenger-airliner-flight-sea-lights-airport-evening_2560x1600.jpg" alt="">
      </div>
    </div>
  </div>
  </div>
</template>

<script>
  import { requestLogin,getuserMenus } from '../api/api';
  import rt from '../routes'
  //import NProgress from 'nprogress'
  export default {
    data() {
      return {
          vedioCanPlay: true,
          fixStyle: '',
          logining: false,
          ruleForm2: {
          account: 'admin',
          checkPass: '123456'
          },
          rules2: {
          account: [
            { required: true, message: '请输入账号', trigger: 'blur' },
            //{ validator: validaePass }
          ],
          checkPass: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            //{ validator: validaePass2 }
          ]
          },
          checked: true,
          userMenus: []
      };
    },
    methods: {
        canplay() {
            this.vedioCanPlay = true
        },
      handleReset2() {
        this.$refs.ruleForm2.resetFields();
      },
        handleMenuList : function (router,menu) {
            var _self = this;
            var routerName = "";
            router.forEach(function (v_router) {
                routerName = v_router.name;
                menu.forEach(function (v_menu) {
                    //查找返回的目录列表是否包含路由名称,有就返回匹配到的元素,没有就移除
                    let result = menu.find(item => {
                        return item.name === routerName;
                    });

                    //匹配到继续判断是否子元素,有子元素继续递归
                    if (result) {
                        if(v_router.children) {
                            _self.handleMenuList(v_router.children,result.children);
                        }
                        //没有则可以移除
                    }else {
                        router.splice(router.findIndex(itm => itm.name === routerName ),1);
                    }
                })
            });
            console.log("longined router:");
            console.log(_self.$router.options.routes);
            //本地存储用户目录 ，防刷新目录丢失用
            sessionStorage.setItem('menu', JSON.stringify(_self.$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};
                    requestLogin(loginParams).then(res => {
                        this.logining = false;
                        //NProgress.done();
                        let status = res.status;
                        let authentication = res.data.authentication;
                        let user = authentication.principal;
                        let loginSuccess = authentication.authenticated;
                        let loginUserMenus = res.data.loginUserMenus;
                        if (status !== 200) {
                            let msg = "登录错误";
                            this.$message({
                                message: msg,
                                type: "error"
                            });
                        } else if (loginSuccess) {
                            sessionStorage.setItem('user', JSON.stringify(user));
                            //处理用户menu
                            _this.userMenus =  loginUserMenus.list;
                            console.log("userMenus:");
                            console.log(_this.userMenus);
                            console.log(loginUserMenus.list);
                            let sysMenus = _this.$router.options.routes;

                            console.log("sysMenus:");
                            console.log(sysMenus);

                            _this.handleMenuList(sysMenus,_this.userMenus);

                            console.log("user:");
                            console.log(_this.$router.options.routes);
                            this.$router.push({path: '/main'});
                        }
                    }).catch(error => {
                        let msg = error.message;
                        this.$message({
                            message: msg,
                            type: "error"
                        });
                        this.logining = false;
                    });
                } else {
                    return false;
                }
            });
        }
    },
      mounted:function () {
          window.onresize = () => {
              const windowWidth = document.body.clientWidth
              const windowHeight = document.body.clientHeight
              const windowAspectRatio = windowHeight / windowWidth
              let videoWidth
              let videoHeight
              if (windowAspectRatio < 0.5625) {
                  videoWidth = windowWidth
                  videoHeight = videoWidth * 0.5625
                  this.fixStyle = {
                      height: windowWidth * 0.5625 + 'px',
                      width: windowWidth + 'px',
                      'margin-bottom': (windowHeight - videoHeight) / 2 + 'px',
                      'margin-left': 'initial'
                  }
              } else {
                  videoHeight = windowHeight
                  videoWidth = videoHeight / 0.5625
                  this.fixStyle = {
                      height: windowHeight + 'px',
                      width: windowHeight / 0.5625 + 'px',
                      'margin-left': (windowWidth - videoWidth) / 2 + 'px',
                      'margin-bottom': 'initial'
                  }
              }
          }
          window.onresize()
      }
  }

</script>

<style lang="scss" scoped>
  #loginForm{
    filter:alpha(Opacity=90);
    -moz-opacity:0.9;
    opacity: 0.9;
  }
  .homepage-hero-module,
  .video-container {
    height: 100vh;
    /*overflow: hidden;*/
    position: absolute;
    top:0px;
    left: 0;
    z-index: -1;
  }

  .video-container .poster img,
  .video-container video {
    z-index: 0;
    position: absolute;
  }

  .video-container .filter {
    z-index: 1;
    position: absolute;
    background: 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;
    margin: 180px auto;
    width: 350px;
    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>