<template>
  <div class="part-box part-box-pad teacher-clazz-score">
    <div class="part-box-head">
      <h3>
        <span>教师各课堂成绩排名</span>
        <el-popover
          popper-class="el-popper-dark"
          placement="right-start"
          width="300"
          trigger="hover"
        >
          <i class="el-icon-question" slot="reference"></i>
          <div>
            <p>按任课教师课堂在各考查学院内平均分进行排名。</p>
          </div>
        </el-popover>
      </h3>
    </div>
    <div class="teacher-table">
      <table class="table">
        <tr>
          <th rowspan="2">考查学院</th>
          <th rowspan="2">任课老师</th>
          <th colspan="2" class="text-center">应届平均分</th>
          <th rowspan="2">考查学院<br />院内排名</th>
        </tr>
        <tr>
          <th>赋分前</th>
          <th>赋分后</th>
        </tr>
        <tr v-for="(teacher, index) in teacherList" :key="index">
          <td>{{ teacher.inspectCollegeName }}</td>
          <td>{{ teacher.teacherName }}</td>
          <td>{{ teacher.currentAvgScoreBefore }}</td>
          <td>{{ teacher.currentAvgScoreAfter }}</td>
          <td>{{ teacher.teacherRank }}</td>
        </tr>
      </table>

      <div
        v-if="teacherList.length"
        class="table-more"
        @click="showMoreTeacherList"
      >
        <i class="el-icon-plus"></i>查看更多数据
      </div>
    </div>

    <!-- PreviewMoreTeacherListDialog -->
    <PreviewMoreTeacherListDialog
      ref="PreviewMoreTeacherListDialog"
      :filter="filter"
    />
  </div>
</template>

<script>
import { courseSurveyTeacherTeacherView } from "../../api";
import PreviewMoreTeacherListDialog from "./PreviewMoreTeacherListDialog";

export default {
  name: "teacher-clazz-score",
  components: { PreviewMoreTeacherListDialog },
  props: {
    filter: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      teacherList: [],
      teacherTotal: 0
    };
  },
  methods: {
    async getData() {
      if (
        !this.filter.examId ||
        !this.filter.semesterId ||
        !this.filter.courseCode
      )
        return;

      const datas = {
        ...this.filter,
        pageNumber: 1,
        pageSize: 10
      };
      const data = await courseSurveyTeacherTeacherView(datas);
      this.teacherList = data.records.slice(0, 5);
      this.teacherTotal = data.total;
    },
    showMoreTeacherList() {
      this.$refs.PreviewMoreTeacherListDialog.open();
    }
  }
};
</script>
