<template>
    <div class="main">
        <v-head></v-head>
        <div class="layout">
            <navbar></navbar>
            <div class="content">
                <transition name="move" mode="out-in">
                    <router-view class="view"></router-view>
                </transition>
                <el-backtop target=".content"></el-backtop>
            </div>
            <v-footer ref="footer"></v-footer>
        </div>
    </div>
</template>

<script>
import vHead from "../header";
import navbar from "../navbar";
import vFooter from "../footer";
import { mapState, mapActions } from "vuex";
import util from "@/libs/util";
import Setting from "@/setting";

export default {
    data() {
        return {};
    },
    components: {
        vHead,
        navbar,
        vFooter
    },
    mounted() {
        this.autoLogout();
    },
    methods: {
        ...mapActions("user", [
            "logout"
        ]),
        // 长时间未操作,自动退出登录
        autoLogout() {
            let lastTime = new Date().getTime();
            document.onmousedown = () => {
                lastTime = new Date().getTime();
            };

            setInterval(() => {
                if (util.local.get(Setting.tokenKey) && (new Date().getTime() - lastTime) > Setting.autoLogoutTime) {
                    util.errorMsg("用户登录过期，请重新登录");
                    setTimeout(this.logout, 1500);
                }
            }, 1000);
        }
    }
};
</script>
<style lang="scss" scoped>
.main {
    min-height: 100%;

    .content {
        min-height: calc(100vh - 176px);
        padding: 24px 24px;
    }
}
</style>