<template>
    <div class="error-page">
        <div class="content-con">
            <img :src="require('_a/images/error-page/error-401.svg')">
            <div class="text-con">
                <h4>401</h4>
                <h5>Oh~~无权限访问，请联系管理员分配权限~</h5>
            </div>
            <Button size="large" type="text" @click="backHome">返回首页</Button>
            <Button size="large" type="text" @click="backPrev">返回上一页</Button>
        </div>
    </div>
</template>

<script>
import { cacheStorage } from '@/utils'
    export default {
        name: 'error_401',
        methods: {
            backHome () {
                console.log(cacheStorage.getItem(process.env.VUE_APP_AUTH_TOKEN))
                this.$router.replace({
                    name: cacheStorage.getItem(process.env.VUE_APP_AUTH_TOKEN) ? this.$store.state.auth.indexPage : 'login'
                })
            },
            backPrev () {
                console.log(cacheStorage.getItem(process.env.VUE_APP_AUTH_TOKEN))
                if (cacheStorage.getItem(process.env.VUE_APP_AUTH_TOKEN)) {
                    this.$router.go(-1)
                } else {
                    this.$router.replace({
                        name: 'login'
                    })
                }
            }
        },
    }
</script>
<style lang="less" scoped>
    .error-page {
        width: 100%;
        height: 100%;
        position: relative;
        background: #f8f8f9;

        .content-con {
            width: 700px;
            height: 600px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -60%);

            img {
                display: block;
                width: 100%;
                height: 100%;
            }

            .text-con {
                position: absolute;
                left: 0px;
                top: 0px;

                h4 {
                    position: absolute;
                    left: 0px;
                    top: 0px;
                    font-size: 80px;
                    font-weight: 700;
                    color: #348EED;
                }

                h5 {
                    position: absolute;
                    width: 700px;
                    left: 0px;
                    top: 100px;
                    font-size: 20px;
                    font-weight: 700;
                    color: #67647D;
                }
            }

            .back-btn-group {
                position: absolute;
                right: 0px;
                bottom: 20px;
            }
        }
    }

</style>
