<template>
  <div class="app-container">
    <el-card>
      <template #header>老师信息</template>
      <mx-condition :query-params="queryParams" @query="handleQuery" @invalid="handleInvalidQuery"></mx-condition>
      <div v-if="dataList.length" class="mt20 fx-column">
        <template v-for="(group,idx) in displayGradeClass">
          <el-card shadow="never" :class="{'mt20':idx>0}">
            <template #header>{{ group.grade.label }}(共{{ group.grade.children.length }}个班)</template>
            <template v-if="group.headteachers.length">
              <div class="f14 f-666 mb5">班主任</div>
              <el-row :gutter="12">
                <el-col :span="6" v-for="(item,index) in group.headteachers" :key="index" class="mb12">
                  <mx-teacher-info :avatar="item.avatar" :name="item.nickName" content-height="90px"
                                   :classes="intersectGradeClass(item.headteacherClassNames, group.grade).toString()">
                  </mx-teacher-info>
                </el-col>
              </el-row>
            </template>
            <template v-if="group.teachers.length">
              <div class="f14 f-666 mb5">授课老师</div>
              <el-row :gutter="12">
                <el-col :span="6" v-for="(item,index) in group.teachers" :key="index" class="mb12">
                  <mx-teacher-info content-height="90px" :avatar="item.avatar" :name="item.nickName"
                                   :subjects="item.subjectNames.toString()"
                                   :classes="intersectGradeClass(item.classNames, group.grade).toString()">
                  </mx-teacher-info>
                </el-col>
              </el-row>
            </template>
          </el-card>
        </template>
      </div>
      <evaluation-empty v-else class="mt20" :shadow="false"></evaluation-empty>
    </el-card>
  </div>
</template>

<script>

import {
  resourcesPerms
} from '@/api/webApi/back.js'
import classTreeMixin from '@/components/Cache/modules/mx-classTree-translate-mixin'
import MxTeacherInfo from './components/mx-teacher-info.vue'
import MxCondition from '@/components/MxCondition/mx-condition'

export default {
  mixins: [classTreeMixin],
  components: {
    MxCondition,
    MxTeacherInfo
  },
  data() {
    return {
      queryParams: {
        classGradeId: '',
        classId: '',
        userSubjectId: ''
      },
      dataList: [],
      displayGradeClass: []
    }
  },
  methods: {
    handleInvalidQuery() {
      this.dataList = []
    },
    handleQuery(model) {
      resourcesPerms({
        gradeId: model.classGradeId,
        classId: model.classId,
        subjectId: model.userSubjectId
      }).then(res => {
        this.dataList = res.data || []
        this.resetDisplayTree()
      })
    },
    translateClassTreeReady() {
      this.resetDisplayTree()
    },
    resetDisplayTree() {
      if (!this.classTreeReady) return
      // 使用standardClassTree结构简单些
      const result = []
      this.standardClassTree.forEach(grade => {
        const classes = grade.children
        const matchedTeachers = this.dataList
          .filter(t => t.classes.some(tc => classes.some(c => c.label == tc.className)))
        const matchedHeadteachers = this.dataList
          .filter(t => t.headteacherClassIds.some(tcId => classes.some(c => c.value == tcId)))
        if (matchedTeachers.length || matchedHeadteachers.length) {
          const gradeResult = {
            grade,
            teachers: matchedTeachers,
            headteachers: matchedHeadteachers
          }
          gradeResult.teachers.forEach(t => {
            t.classNames = t.classes.map(c => c.className)
            t.subjectNames = t.subjects.map(s => s.subjectName)
          })
          gradeResult.headteachers.forEach(t => {
            t.headteacherClassNames = t.headteacherClassIds.map(id => {
              return classes.find(c => c.value == id)?.label || '未知班级'
            })
          })
          result.push(gradeResult)
        }
      })
      console.log('formatted grade class teachers', result)
      this.displayGradeClass = result
    },
    intersectGradeClass(classNames, grade) {
      return classNames.filter(name => grade.children.some(c => c.label == name))
    }
  }
}
</script>

<style scoped>

</style>
