<style lang="less" scoped>
  @import './Index.less';
</style>

<template>
  <div class="sm-container">
    <div class="sm-header">
      <span :class="tabIndex == 0 ? 'tab-active' : ''" @click="handleTabClick(0)">{{$t('schoolBaseInfo.createPeriod')}}</span>
      <span :class="tabIndex == 1 ? 'tab-active' : ''" @click="handleTabClick(1)">{{$t('schoolBaseInfo.classroomSetting')}}</span>
    </div>

    <div class="data-container">
      <transition name="fade">
        <keep-alive>
          <router-view />
        </keep-alive>        
      </transition>
    </div>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        tabIndex: 0
      }
    },
    methods: {
      handleTabClick(index) {
        this.tabIndex = index;
        this.$router.push(index == 0 ? '/school/system' : '/school/classroom');
      }
    },
    created() {
      let path = this.$route.path
      if (path == '/school/system') {
        this.tabIndex = 0;
      } else if (path == '/school/classroom') {
        this.tabIndex = 1;
      }
    }

  }
</script>
