<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" autofocus placeholder="账号"></el-input>
      </el-form-item>
      <el-form-item prop="checkPass">
        <el-input type="password" v-model="ruleForm2.checkPass"  placeholder="密码" @keyup.enter.native="handleSubmit2"></el-input>
      </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>
    <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 axios from 'axios'
  import http from '../api/http';
  //import NProgress from 'nprogress'
  export default {
    data() {
      return {
        vedioCanPlay: true,
        fixStyle: '',
        logining: false,
        ruleForm2: {
          account: '',
          checkPass: ''
        },
        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 _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};
            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) {
                let msg = "登录错误";
                this.$message({
                  message: msg,
                  type: "error"
                });
              } else if (token) {
                sessionStorage.setItem('user', JSON.stringify(authentication));
                sessionStorage.setItem('token','Bearer '+ token);
                //设置token,设置axios 基本配置,但是刷新后 这个登录保存的就没了
                axios.defaults.headers.common['Authorization'] = 'Bearer '+token;
                //处理用户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(_this.$router.options.routes,_this.userMenus);

                console.log("user:");
                console.log(_this.$router.options.routes);
                _this.$router.push({path: '/userPayOrder'});
              }
            }).catch(error => {
              this.$message({
                message: error.toString(),
                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>