<template>
    <div class="login">
        <div class="login-bg login-bg-1">
            <img src="@/assets/img1-login.png" alt />
        </div>
        <div class="login-bg login-bg-2">
            <img src="@/assets/img2-login.png" alt />
        </div>
        <div class="login-bg login-bg-3">
            <img src="@/assets/img3-login.png" alt />
        </div>
        <div class="login-bg login-bg-4">
            <img src="@/assets/img4-login.png" alt />
        </div>
        <div class="login-bg login-bg-5">
            <img src="@/assets/img5-login.png" alt />
        </div>
        <div class="login-cover">
            <div class="login-cover-logo">
                <img src="@/assets/logo.png" alt="logo" />
            </div>
            <div class="login-cover-title">垛机视觉系统</div>
        </div>
        <!-- <div class="login-footer">Copyright © 2020 ZheHe technology CO., LTD.</div> -->
    </div>
</template>

<script type="text/javascript">
import userInfo from '@/assets/user.json'
export default {
    name: "login",
    data() {
        return {
            // btn loading控制
            isLoading: false,

            // 是否存在权限
            isAuth: false
        };
    },
    methods: {
        // 输入后判断手机号是否存在
        existsAccount() {
            if (!this.form.getFieldValue("account")) return;
            this.$api.userApi
                .existsAccount({
                    query: { account: this.form.getFieldValue("account") }
                })
                .then(res => {
                    console.log(res);
                }).catch(err => {

                });
        },
        // 权限校验
        permissionCheck(res) {
            // 保存账户信息
            sessionStorage.setItem("userInfo", JSON.stringify(res));
            this.setState({ userInfo: res });
            // account模块存在默认权限登录
            if (this.isAuth) {
                // 1 菜单
                const one = res.permissionList.filter(item => item.type === 1);
                // 2 菜单项
                const two = res.permissionList.filter(item => item.type === 2);
                if (one && one.length) {
                    this.$router.push({ name: one[0].rights });
                } else if (two && two.length) {
                    this.$router.push({ name: two[0].rights });
                } else {
                    this.$message.info("没有权限");
                    sessionStorage.clear();
                }
            } else {
                // 默认第一个路由登录
                const routerName = this.$router.options.routes[0].children[0]
                    .name;
                this.$router.push({ name: routerName });
            }
        }
    },
    beforeRouteEnter(to, from, next) {
        if (location.search) {
            let action = window.location.search.substring(
                window.location.search.indexOf("=") + 1
            );
            if (action === "logout") {
                localStorage.clear();
                sessionStorage.clear();
            }
            next();
        } else {
            localStorage.setItem(
                "userInfo",
                JSON.stringify(userInfo)
            );
            if (localStorage.getItem("userInfo")) {
                next(vm => {
                    let permissionList = JSON.parse(
                        localStorage.getItem("userInfo")
                    ).permissionList;
                    let router = vm.$router.options.routes[0].children;
                    if (
                        !location.search &&
                        !permissionList.some(item => item.type === 2)
                    ) {
                        vm.$message.info("没权限", 1, () => {
                            vm.$api({
                                url: "/app/userCenter",
                                method: "GET"
                            }).then(res => {
                                window.open(
                                    res.url + "?redirect=" + location.origin,
                                    "_self"
                                );
                            }).catch(err => {

                            });
                        });
                        return;
                    }
                    for (let item of router) {
                        if (
                            permissionList.some(a => {
                                if (a.rights === item.name && a.type === 2)
                                    return true;
                            })
                        ) {
                            vm.$router.push({ name: item.name });
                            return;
                        }
                    }
                });
            } else {
                if (!location.search) {
                    next(vm => {
                        vm.$api({
                            url: "/app/userCenter",
                            method: "GET"
                        }).then(res => {
                            window.open(
                                res.url + "?redirect=" + location.origin,
                                "_self"
                            );
                        }).catch(err => {

                        });
                    });
                }
            }
        }
    }
};
</script>
<style lang="scss">
.login {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #f0f3f7;
    display: flex;
    align-items: center;
    justify-content: center;

    &-bg {
        position: absolute;

        &-1 {
            left: 176px;
            top: 113px;
        }
        &-2 {
            left: 197px;
            top: 242px;
        }
        &-3 {
            left: 79px;
            bottom: 59px;
        }
        &-4 {
            right: 280px;
            top: 82px;
        }
        &-5 {
            right: 0;
            bottom: 59px;
        }
    }

    &-cover {
        width: 368px;
        &-logo {
            display: flex;
            justify-content: center;
            line-height: 48px;
            img {
                height: 120px;
            }
        }
        &-title {
            text-align: center;
            height: 22px;
            font-size: 14px;
            font-family: PingFangSC-Regular;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.45);
            line-height: 22px;
            margin: 16px 0 32px 0;
        }

        .ant-tabs-nav-scroll {
            display: flex;
            justify-content: center;
        }
    }

    &-submit {
        width: 100%;
    }

    &-forget {
        height: 22px;
        font-size: 14px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.45);
        line-height: 22px;
        text-align: right;
        margin-bottom: 24px;
    }

    &-footer {
        position: fixed;
        left: 50%;
        bottom: 28px;
        transform: translateX(-50%);
    }
}
</style>
