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