<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>-->
<!--        &lt;!&ndash;<el-button @click.native.prevent="handleReset2">重置</el-button>&ndash;&gt;-->
<!--      </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 标签，建议升级浏览器。-->
<!--        &lt;!&ndash;<source src="/static/login/New-jumbo.webm" type="video/webm"/>&ndash;&gt;-->
<!--        &lt;!&ndash;浏览器不支持 video 标签，建议升级浏览器。&ndash;&gt;-->
<!--      </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, testLogin} from '../api/user';
  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({

        });
      },
      // 获取地址栏参数
      getUrlKey: function (name) {
        return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ""])[1].replace(/\+/g, '%20')) || null
      },
      // 获取票据
      ticket: function () {
        let ticket = this.getUrlKey("ticket");
        if (ticket!=undefined){
          let loginParams = {
            ticket : ticket
          }
          testLogin(loginParams).then(res => {
            //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: '/main'});
            }
          }).catch(error => {
            this.$message({
              message: error.toString(),
              type: "error"
            });
            this.logining = false;
          });
        }else {
          console.log("票据为空 请求路由")
          window.location.href = 'http://10.5.14.103:27080/sso/login?service=http://10.50.7.70:9909/%23/ssologin'
          // window.location.href = 'http://10.5.14.103:27080/sso/login?service=http://10.50.3.73:8880/%23/SsoLogin'
        }
      }
    },
    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();
    },
    created(){
    }
  }

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