<template>
  <div class="container">
    <v-header :title="title" :isShowPrevPage="isShowPrevPage">
      <span slot="action" class="header-slot pull-right"></span>
    </v-header>
    <div class="content" ref="contentWrapper">
        <div>
            <router-view></router-view>
        </div>
    </div>
    <tab-bar :menus="tabBarMenus"></tab-bar>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
    name: 'Index',
    components: {
        VHeader: () => import('@/common/header/VHeader'),
        TabBar: () => import('@/common/tabBar/TabBar')
    },
    data () {
        return {
            title: '标题',
            isShowPrevPage: true,
            scroll: '',
            tabBarMenus: [
                {
                    label: '我的资源',
                    icon: '&#xe89e;',
                    path: '/education/myResources/myUpload',
                    belongTo: 'myUpload'
                },
                {
                    label: '学习资源库',
                    icon: '&#xe87d;',
                    path: '/education/schoolResources/index',
                    belongTo: 'schoolResources'
                }
            ]
        }
    },
    methods: {
        initDataFromRoute (route) {
            /* 根据路由参数来显示对应数据 */
            this.tabBarMenus[1].belongTo = route.meta.belongTo
            if (route.meta.showTabs) {
                this.showTabs = true
            } else {
                this.showTabs = false
            }
            if (route.meta.hidePrevPage) {
                this.isShowPrevPage = false
            } else {
                this.isShowPrevPage = true
            }
            if (route.query.title) {
                this.title = route.query.title
            } else {
                this.title = route.meta.title
            }
        }
    },
    mounted () {
        this.$nextTick(() => {
            this.scroll = new BScroll(this.$refs.contentWrapper, {
                click: true
            })
        })
    },
    created () {
        this.initDataFromRoute(this.$route)
    },
    watch: {
        $route (to, from) {
            this.initDataFromRoute(to)
        }
    }
}
</script>

<style lang="less" scoped>
.content {
    background: white;
}
</style>
