<!--  -->
<template>
  <div class="m-container">
    <h2>
      <div class="squrt"></div>课外训练
    </h2>
    <div class="m-core">
      <el-tabs v-model.trim="activeIndex"
               type="card"
               @tab-click="handleClick">
        <el-tab-pane label="课外训练"
                     name="1">
          <afterSchoolList v-if="activeStatus[0]"></afterSchoolList>
        </el-tab-pane>
        <!-- <el-tab-pane label="课外训练(教学)" name="2">
          <afterSchoolTeach
            v-if="activeIndex == 2"
          ></afterSchoolTeach>
        </el-tab-pane> -->
        <el-tab-pane label="课外训练(学员)"
                     name="2">
          <afterWorkList v-if="activeStatus[1]"></afterWorkList>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import afterSchoolList from "@/views/afterSchoolManager/afterSchoolList";
import afterWorkList from "@/views/afterSchoolManager/afterWorkList";
import afterSchoolTeach from "@/views/afterSchoolManager/afterSchoolTeach";
export default {
  components: { afterSchoolList, afterWorkList, afterSchoolTeach },
  data () {
    return {
      activeIndex: "1",
      extracurricularExercisesId: null,
      activeStatus: [true, false],
    };
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created () { },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    this.init();
  },
  activated () {
    this.init()
  },
  methods: {
    init () {
      this.$route.query.activeIndex
        ? (this.activeIndex = this.$route.query.activeIndex)
        : this.activeIndex;

    },
    handleClick (val, event) {
      this.activeIndex = val.name
      this.activeStatus[val.name - 1] = true
    }
  }
};
</script>
<style lang='scss' scoped>
</style>