<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="密码"></el-input>
      </el-form-item>
      <el-form-item prop="verify">
        <el-input type="text" v-model="ruleForm2.verify"  placeholder="请输入下方图片显示的验证码" @keyup.enter.native="handleSubmit2"></el-input>
      </el-form-item>
      <el-form-item>
        <img
                style="width: 125px; 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-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 {getRandCode} from '../api/user';
  //import NProgress from 'nprogress'
  export default {
    data() {
      return {
        verifyImg: "",
        vedioCanPlay: true,
        fixStyle: '',
        logining: false,
        ruleForm2: {
          account: '',
          checkPass: '',
          verify: '',
          verifyToken: ''
        },
        rules2: {
            account: [
              { required: true, message: '请输入账号', trigger: 'blur' },
              //{ validator: validaePass }
            ],
            checkPass: [
              { required: true, message: '请输入密码', trigger: 'blur' },
              //{ validator: validaePass2 }
            ],
            checkVerify: [
              { required: true, message: '请输入验证码', trigger: 'blur' }
            ]
          },
        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));
        },

      getVerifyCode: function(){
        getRandCode().then((res) =>{
          let status = res.status;
          this.ruleForm2.verifyToken  = res.data.jwtToken;
          this.verifyImg =   res.data.data.verifyImg;
        }).catch({

        });
      },
      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);
                            //设置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: '/main'});
                        }
                    }).catch(error => {
                      this.$message({
                          message: error.toString(),
                          type: "error"
                      });
                      this.logining = false;
                      this.getVerifyCode();
                    });
                } 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();
      // this.ticket();
      //   this.randCode();
    },
    created(){
      this.getVerifyCode()
    }
  }

</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>