<template>
  <div class="container" style="position: relative;">
    <v-header :title="title" :isShowPrevPage="isShowPrevPage">
      <span slot="action" class="header-slot pull-right"></span>
    </v-header>
    <tabs v-show="showTabs" :menus="tabsMenus" :mode="'1'" :position="'bottom'"></tabs>
    <div class="content" ref="contentWrapper">
        <div>
            <router-view></router-view>
        </div>
    </div>
    <action-menu v-show="!currentIsFirstLevel"/>
    <tab-bar :menus="tabBarMenus"></tab-bar>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
    name: 'Index',
    components: {
        VHeader: () => import('@/common/header/VHeader'),
        Tabs: () => import('@/common/tab/Tabs'),
        TabBar: () => import('@/common/tabBar/TabBar'),
        ActionMenu: () => import('./components/ActionMenu')
    },
    data () {
        return {
            title: '校本资源',
            isShowPrevPage: false,
            currentIsFirstLevel: true, // 当前列表是不是第一层文件夹
            showTabs: true, // 是否显示Tabs组件
            tabsMenus: [
                {
                    label: '我上传的',
                    path: '/education/myResources/myUpload',
                    belongTo: '/education/myResources/myUpload'
                },
                {
                    label: '收藏分享',
                    path: '/education/myResources/favorShare',
                    belongTo: '/education/myResources/favorShare'
                }
            ],
            tabBarMenus: [
                {
                    label: '我的资源',
                    icon: '&#xe89e;',
                    path: '/education/myResources/myUpload',
                    belongTo: 'myUpload'
                },
                {
                    label: '学习资源库',
                    icon: '&#xe87d;',
                    path: '/education/schoolResources/index',
                    belongTo: 'schoolResources'
                }
            ],
            scroll: ''
        }
    },
    mounted () {
        this.$nextTick(() => {
            this.scroll = new BScroll(this.$refs.contentWrapper, {
                click: true
            })
        })
        this.$EventBus.$on('intoLayer', this.folderIntoLayer)
    },
    created () {
        // this.initDataFromRoute(this.$route)
    },
    watch: {
        // $route (to, from) {
        //     this.initDataFromRoute(to)
        // }
    },
    methods: {
        folderIntoLayer (currentIsFirstLevel, title) {
            /* 当页面进入对应层次文件夹进行改变操作 */
            this.title = title
            this.showTabs = currentIsFirstLevel
            this.currentIsFirstLevel = currentIsFirstLevel
        }
        // initDataFromRoute (route) {
        //     /* 根据路由参数来显示对应数据 */
        //     this.tabBarMenus[0].belongTo = route.meta.belongTo
        //     console.log(this.tabBarMenus[0].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
        //     }
        // }
    }
}
</script>

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