<template>
  <div class="part-box part-box-pad teacher-clazz-rank ">
    <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>
    <el-table ref="TableList" :data="dataList" border>
      <el-table-column
        prop="inspectCollegeName"
        label="考查学院"
      ></el-table-column>
      <el-table-column prop="teacherName" label="任课老师"></el-table-column>
      <el-table-column
        prop="avgScoreAssign"
        label="应届平均分"
        width="100"
      ></el-table-column>
      <el-table-column prop="rank" label="考查学院院内排名"></el-table-column>
    </el-table>
    <div v-if="dataList.length" class="table-more" @click="showMoreList">
      <i class="el-icon-plus"></i>查看更多数据
    </div>

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

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

export default {
  name: "teacher-clazz-rank",
  components: { PreviewMoreTeacherListDialog },
  props: {
    filter: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      dataList: [],
      total: 0
    };
  },
  methods: {
    async getData() {
      const datas = {
        ...this.filter,
        pageNumber: 1,
        pageSize: 10
      };
      const data = await schoolCourseTeacherClassRank(datas);
      this.dataList = data.records.slice(0, 5);
      this.total = data.total;
    },
    showMoreList() {
      this.$refs.PreviewMoreTeacherListDialog.open();
    }
  }
};
</script>
