<template>
    <div class="err-page-box" :style="{'background-color':pageBg}">
        <div class="err-img">
            <img :src="errIcon" />
        </div>
        <div clas="err-right" :style="{color: fontColor}">
            <div class="err-code">{{errType}}</div>
            <div class="err-message">{{errMessage}}</div>
            <div class="browser-list">
                <div class="browser-item" v-for="(item ,index) in data" :key="index" @click="gotoUrl(item.url)">
                    <div class="icon">
                        <img :src="item.icon" />
                    </div>
                    <div class="title">{{ item.name }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "ErrorPage",
    props: {
        pageBg: {
            type: String,
            default: '#F5F7F9'
        },
        errType: {
            type: Number | String,
            default: 403
        },
        errMessage: {
            type: String,
            default: '抱歉，您当前浏览器版本过低，为更好体验本系统，请使用以下最新版本浏览器'
        },
        errIcon: {
            type: String,
            default: 'http://cdn.gugusj.com/jbr_admin_docments/icon-browser1.png'
        },
        data: {
            type: Array,
            default:() => []
        },
        fontColor: {
            type: String,
            default: ''
        }
    },
    methods: {
        gotoUrl(url) {
            window.open(url,'_blank')
        }
    }
}
</script>

<style lang="less" scoped>
    .err-page-box {
        display: flex;
        height: 100%;
        align-items: center;
        justify-content: center;
        .err-img {
            width:440px;
            height: auto;
            margin-right: 50px;
        }
        .err-right {
            color: #515a6e;
        }
        .err-code {
            margin-bottom: 16px;
            font-weight: 600;
            font-size: 42px;
            line-height: 60px;
        }
        .err-message {
            margin-bottom: 16px;
            font-size: 20px;
            line-height: 28px;
        }
        .browser-list {
            display: flex;
            align-items: center;
            margin: 20px 0;
            .browser-item {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                width: 100px;
                height: auto;
                margin-right: 50px;
                cursor: pointer;
                .icon {
                    width: 100px;
                    height: 100px;
                }
                .title {
                    font-size: 16px;
                    color: #333;
                    line-height: 30px;
                }
            }
        }
    }
</style>