<!--  -->
<template>
  <div class="m-container">
    <h2>
      <div class="squrt"></div>
      课外练习
    </h2>
    <div class="m-core">
      <tab-router v-model.trim="activeIndex" type="card" @tab-click="handleClick">
        <el-tab-pane lazy label="班级布置" name="1">
          <afterSchoolList v-if="activeIndex == 1"></afterSchoolList>
        </el-tab-pane>
        <el-tab-pane lazy label="学员布置" name="2">
          <afterWorkList v-if="activeIndex == 2"></afterWorkList>
        </el-tab-pane>
        <el-tab-pane lazy label="学员历史" name="3">
          <oldAfterWorkList v-if="activeIndex == 3"></oldAfterWorkList>
        </el-tab-pane>
      </tab-router>
    </div>
  </div>
</template>

<script>
import afterSchoolList from "@/views/afterSchoolManager/afterSchoolList";
import afterWorkList from "@/views/afterSchoolManager/afterWorkList";
import oldAfterWorkList from "@/views/afterSchoolManager/components/oldAfterWorkList.vue";
export default {
  components: { afterSchoolList, afterWorkList, oldAfterWorkList },
  data() {
    const query = this.$route.query;
    return {
      activeIndex: query.opt || "1",
    };
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.init();
  },
  methods: {
    init() {
      if (this.$route.query.activeIndex) {
        this.activeIndex = this.$route.query.activeIndex + "";
      }
      console.log();
    },

    handleClick(val) {
      this.activeIndex = val.name;
    },
  },
};
</script>
