GCLS_Page_Learn/src/views/main/index.vue

<template>
  <main class="main-container">
    <keep-alive>
      <component :is="currentTabComponent" />
    </keep-alive>
  </main>
</template>

<script>
import TaskList from './TaskList.vue';
import TemplateList from './TemplateList.vue';
import CurriculaListStudent from './curricula_list/student.vue';
import CurriculaListTeacher from './curricula_list/teacher.vue';

export default {
  components: {
    TaskList,
    TemplateList,
    CurriculaListStudent,
    CurriculaListTeacher
  },
  provide() {
    return {
      changeTab: this.changeTab
    };
  },
  data() {
    const state = this.$store.state;
    let popedom_code_list = state.user.popedom_code_list;
    let isStudent = state.user.user_type === 'STUDENT';
    function curTab() {
      return isStudent || popedom_code_list.includes(2000001) ? 'TaskList' : 'TemplateList';
    }
    let currentTab = this.$route.query.tab || curTab();

    return {
      currentTab
    };
  },
  computed: {
    currentTabComponent() {
      if (['TemplateList', 'TaskList'].includes(this.currentTab)) return this.currentTab;
      return `${this.currentTab}${this.$store.state.user.user_type === 'TEACHER' ? 'Teacher' : 'Student'}`;
    }
  },
  methods: {
    changeTab(tab) {
      this.currentTab = tab;
    }
  }
};
</script>

<style lang="scss" scoped>
@import '~@/styles/mixin';

.main-container {
  @include container;
}
</style>