<template>
    <div class="teacher-container">
        <div class="teacher-header">
            <span @click="tabClick('expert')" :class="['teacher-tab',routerName == 'expert' ? 'teacher-tab-active':'']">专家管理</span>
            <span @click="tabClick('teacher')" :class="['teacher-tab',routerName == 'teacher' || routerName == 'addTeacher' ? 'teacher-tab-active':'']">教师管理</span>
            <span @click="tabClick('group')" :class="['teacher-tab',routerName == 'group' ? 'teacher-tab-active':'']">教研组管理</span>
            <Button v-show="routerName == 'group'" type="info" size="small" class="save-group-btn" @click="toSaveGroup" :loading="loading">保存分组</Button>
        </div>
        <router-view></router-view>
    </div>
</template>
<script>
export default {
    data() {
        return {
            routerName: 'teacher',
            loading:false
        }
    },
    methods: {
        tabClick(router) {
            this.$router.push({
                name: router
            })
        },
        toSaveGroup(){
            this.loading = true
            this.$EventBus.$emit('noSaveGroup')
        }
    },
    mounted() {
        console.log(this.$route)
        this.routerName = this.$route.name
    },
    created() {
        //由DB取得該校所有使用者並放入state.schoolUserList
        this.$store.dispatch('user/getSchoolTeacher').then(
            res => {
                if (res.code == 0) {
                    this.$Message.error('無法取得使用者資料')
                }
            },
            err => {
                this.$Message.error('user/setSchoolTeacher API error!')
            }
        )
        this.$EventBus.$off('noSaveOk')
        this.$EventBus.$on('noSaveOk', val => {
            this.loading = false
        })
    }
}
</script>
<style lang="less" scoped>
@import "./Index.less";
</style>