<template lang="pug">
    .container
        slot
            template(v-if ="type === '403_error'")
                div.left
                    h2 403
                    h3 {{$t('403_err_title')}}
                    div.info
                        span {{$t('403_err_msg')}}
                        span.help
                            a(href="http://iwp.anker-in.com/km/doc/km_doc_knowledge/kmDocKnowledge.do?method=view&fdId=16706b7b0bfc491bd8d8f3849809cf4c&categoryId=167067a6e35664b84a9ae2e4367823a2&status=all&nodeType=CATEGORY&s_css=default") {{$t('system_administrator')}}
                    div.mt20.links
                            a(href="http://iwp.anker-in.com/sys/search/search.do?method=condition&searchId=15f2063b4ed0ec9ec5243e04d79a8f9c&fdModelName=com.landray.kmss.km.review.model.KmReviewMain&canClose=false") {{$t('request_for_access')}}
                div.right
                   img(src="./imgs/err-bg-403.png")
            template(v-else-if="type === '500_error'")
                div.left
                    h2 500
                    h3 {{$t('500_err_title')}}
                    div.info
                        span {{$t('500_err_msg')}}
                    div.mt20.links
                            a(@click.prevent="gotoHome") {{$t('home_page')}}
                div.right
                    img(src="./imgs/err-bg-500.png")
            template(v-else-if="type === 'publish_error'")
                div.left
                    h3 {{$t('publish_err_title')}}
                    div.info
                        span {{$t('publish_err_msg')}}
                    div.mt20.links
                            a(@click.prevent="callback") {{$t('exit')}}
                div.right
                    img(src="./imgs/err-bg-publish.png")
            template(v-else-if="type === 'network_error'")
                div.left
                    h3 {{$t('network_err_title')}}
                    div.info
                        span {{$t('network_err_msg')}}
                    div.mt20.links
                            a(@click.prevent="refresh") {{$t('refresh')}}
                div.right
                    img(src="./imgs/err-bg-network.png")
            template(v-else="type === '404_error'")
                div.left
                    h2 404
                    h3 {{$t('404_err_title')}}
                    div.info
                        span {{$t('404_err_msg')}}
                    div.mt20.links
                            a(@click.prevent="gotoBack") {{$t('back_now')}}
                            a.ml20(@click.prevent="gotoHome") {{$t('home_page')}}
                div.right
                    img(src="./imgs/err-bg-404.png")
</template>

<script>
import { callbackify } from 'util';
    export default {
        name: 'oc-new-error',

        props: {
            type :{type: String, default:"404_error"},
            callback: { type: Function, default: null },
        },
        methods: {
            gotoHome() {
                if(this.$route.query.redirect) {
                    window.location.href = decodeURIComponent(this.$route.query.redirect);
                }
                else {
                    window.location.href = '/'
                    // this.gotoBack();
                }
            },

            gotoBack() {
                if(this.$route.query.redirect) {
                    window.location.href = decodeURIComponent(this.$route.query.redirect);
                } else {
                    window.history.go(-1);
                }
            },
            refresh(){
                window.location.reload();
            }
        }
    }
</script>

<style lang="stylus" scoped>
    .container
        background-size 600px
        background-color #fff
        font-family initial
        overflow auto
        display flex
        height 100%
        flex-direction row
        align-items center
        justify-content center
        color #fff
        font-size 14px
        min-width 1024px
        h2
            font-size 80px
            font-weight 900
            color #f2f2f2
            
        h3
            font-size 24px
            font-weight 600
            color #333

        .info
            margin-top 5px
            font-size 14px
            color #999
            .help
                >a
                    margin-left 20px
                    color #0522b7
    
    .links a
        padding 5px 8px
        background #2639a0 
        height 30px
        line-height 30px
        border-radius 4px
        font-size 14px
        color #fff
        &:hover
            text-decoration none
            background-color #0522b7
    .right
        min-width 600px
    
</style>