<template>
  <div class="app-container">
    <form-search :searchformShow="{gradeid:''}" :withoutSearchButton="true" @handleQuery="handleQuery"></form-search>
    <el-row :gutter="24">
      <template v-for="(grade,index) in displayClassTree">
        <el-col :span="24" :key="'header_'+index">
          <div class="pt20 pb10">
            <label class="mx-title">{{grade.gradeName}} (共{{grade.clazz.length}}个班)</label>
          </div>
        </el-col>
        <el-col :span="6" v-for="(clazz,idx) in grade.clazz" :key="clazz.classId">
          <class-card :grade="grade" :clazz="clazz" @click.native="handleClassClick(clazz, grade)" class="mb15 pointer"></class-card>
        </el-col>
      </template>
    </el-row>
    <evaluation-empty v-if="!displayClassTree || !displayClassTree.length" />
  </div>
</template>
<script>
import {
  getUserGradeAndClasses
} from "@/api/webApi/back.js"
import classCard from "./classCard.vue"

export default {
  components: { classCard },
  data() {
    return {
      filterParms: {
        gradeId: ''
      },
      gradeClassTree: [],
      displayClassTree: []
    }
  },
  created() {
    this.handleQuery({})
  },
  methods: {
    handleQuery: function (params) {
      this.filterParms.gradeId = params.gradeid || '';
      this.ensureGradeClassTree(this.filterClassesByGrade)
    },
    ensureGradeClassTree(callback) {
      if (this.gradeClassTree.length) {
        callback()
      } else {
        getUserGradeAndClasses().then(res => {
          this.gradeClassTree = res.data
          callback()
        })
      }
    },
    filterClassesByGrade() {
      if (this.filterParms.gradeId) {
        this.displayClassTree = this.gradeClassTree.filter(g => g.gradeId == this.filterParms.gradeId)
      } else {
        this.displayClassTree = [...this.gradeClassTree]
      }
    },
    handleClassClick(clazz, grade) {
      let nextPath = ''
      switch (this.$route.name) {
        case "Single":
          nextPath = '/idc/class-manage/single'
          break;
        case "Multiple":
          nextPath = '/idc/class-manage/multiple'
          break;
        case "Ranking":
          nextPath = '/idc/class-manage/ranking'
          break;
        case "Wrong":
          nextPath = '/idc/class-manage/wrong'
          break;
        default:
          console.log("Error: Unsupported route-name:" + this.$route.name)
          return
      }
      this.$router.push({
        path: nextPath,
        query: {
          classId: clazz.classId,
          isSimulateTeacher: true
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.mx-title {
  font-size: 16px;
  font-weight: 500;
  color: #1a1942;
}
</style>