<!-- Created by henian.xu on 2019/10/30. -->

<template>
    <div class="error-page">
        <div class="inner">
            <div class="code">
                {{ statusCode }}
            </div>
            <div class="message">
                {{ message_ }}
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'ErrorPage',
    props: {
        code: {
            type: String,
            default: '',
        },
        message: {
            type: String,
            default: '',
        },
    },
    computed: {
        statusCode() {
            return this.$route.params.statusCode || this.code || '';
        },
        message_() {
            return this.$route.query.message || this.message || '';
        },
    },
    created() {
        this.$nextTick(() => {
            document.documentElement.classList.add('html-full');
        });
    },
    destroyed() {
        document.documentElement.classList.remove('html-full');
    },
};
</script>

<style lang="scss">
.error-page {
    background-color: #e9ecef;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100%;
    min-width: 1200px;

    > .inner {
        text-align: center;
        > .code {
            font-size: 80px;
            font-weight: bold;
            color: #868e96;
        }
        > .message {
            color: #adb5bd;
        }
    }
}
</style>
