<template>
    <div class="statistics-container">
        <div class="statistics-header">
            <span @click="tabClick('training')" :class="['statistics-tab',routerName == 'training' ? 'statistics-tab-active':'']">研修统计</span>
            <span @click="tabClick('hour')" :class="['statistics-tab',routerName == 'hour' ? 'statistics-tab-active':'']">学时统计</span>
            <span @click="tabClick('result')" :class="['statistics-tab',routerName == 'result' ? 'statistics-tab-active':'']">能力点统计</span>
            <span @click="tabClick('groupData')" :class="['statistics-tab',routerName == 'groupData' ? 'statistics-tab-active':'']">教研组数据</span>
        </div>
        <router-view></router-view>
    </div>
</template>
<script>
export default {
    data() {
        return {
            routerName: 'training'
        }
    },
    methods: {
        tabClick(router) {
            this.$router.push({
                name: router
            })
        },
        
    },
    mounted(){
        this.routerName = this.$route.name
    }
}
</script>
<style lang="less" scoped>
@import "./Statistics.less";
</style>