<template>
    <div id="app">
        <div class="container-fluid" :style="containerStyle" :class="{ 'v-app': !isOldVsscmp }">
            <div class="container" v-if="isOldVsscmp"><router-view v-if="isRouterAlive"></router-view></div>
            <template v-else ><router-view v-if="isRouterAlive"></router-view></template>
        </div>
    </div>
</template>
<script>
export default {
    name: 'App',
    provide () {
        return {
            reload: this.reload
        }
    },
    data () {
        return {
            isRouterAlive: true
        }
    },
    computed: {
        // 是否来源老框架
        isOldVsscmp: {
            get () {
                return this.$store.state.isOldVsscmp
            },
            set (v) {
                this.$store.commit('saveOriginInfo', v)
            }
        },
        containerStyle () {
            let { isOldVsscmp } = this
            return isOldVsscmp ? { padding: '20px 15px' } : { 'background-color': '#fff', 'padding-bottom': '15px' }
        }
    },
    methods: {
        reload () {
            this.isRouterAlive = false
            this.$nextTick(function () {
                this.isRouterAlive = true
            })
        }
    },
    mounted () {
        this.isOldVsscmp = /(https:\/\/oa.vschool100.cn)|(https:\/\/test.vschool100.com)/.test(document.referrer)
    }
}
</script>

<style lang="stylus" scoped>
#app
    // color #73879C
    color #606266
    background #F7F7F7
    font-family Arial,"Microsoft Yahei","Helvetica Neue",Helvetica,sans-serif
    font-size 15px
    font-weight 400
    line-height 1.471
    height 100%
    .container-fluid
        // padding 20px 15px 0
        min-height 100%
        // padding-bottom 15px
        .container
            background-color #fff
            padding-bottom 15px
/deep/ .v-app > div > .body
    margin-bottom -15px
</style>
