<template>
  <div class="school-teacher-class-score">
    <div class="page-head">
      <h2>
        <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>
      </h2>
    </div>
    <div class="part-box part-box-filter">
      <el-form ref="FilterForm" label-position="left" label-width="60px" inline>
        <el-form-item label="学期：">
          <semester-select
            v-model="filter.semesterId"
            select-default
            :clearable="false"
            @change="semesterChange"
          ></semester-select>
        </el-form-item>
        <el-form-item label="考试：">
          <exam-select
            v-model="filter.examId"
            :semester-id="filter.semesterId"
            select-default
            :clearable="false"
            @change="examChange"
          ></exam-select>
        </el-form-item>
        <el-form-item label="课程：">
          <course-select
            v-model="filter.courseCode"
            :exam-id="filter.examId"
            inspect
          ></course-select>
        </el-form-item>
        <el-form-item label="考查学院：">
          <inspect-college-select
            v-model="filter.inspectCollegeId"
            :filter="filter"
          ></inspect-college-select>
        </el-form-item>
        <el-form-item label="任课教师：">
          <teach-select
            v-model="filter.teacherId"
            :filter="filter"
          ></teach-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" round @click="search">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="part-box part-box-pad">
      <el-table
        ref="TableList"
        :data="dataList"
        border
        @sort-change="sortChange"
      >
        <el-table-column
          prop="teacherName"
          label="任课老师"
          sortable="custom"
        ></el-table-column>
        <el-table-column
          prop="inspectCollegeName"
          label="考查学院"
          sortable="custom"
        ></el-table-column>
        <el-table-column prop="courseCode" label="课程(代码)" sortable="custom">
          <span slot-scope="scope">
            {{ scope.row.courseName }}（{{ scope.row.courseCode }}）
          </span>
        </el-table-column>
        <el-table-column
          prop="teachCollegeName"
          label="开课学院"
          sortable="custom"
        ></el-table-column>
        <el-table-column
          prop="avgScoreAssign"
          label="应届平均分"
        ></el-table-column>
        <el-table-column
          prop="rank"
          label="考查学院院内排名"
          sortable="custom"
        ></el-table-column>
      </el-table>
      <div class="part-page">
        <el-pagination
          background
          layout="total,prev, pager, next"
          :current-page="current"
          :total="total"
          :page-size="size"
          @current-change="toPage"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

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

export default {
  name: "school-teacher-class-score",
  data() {
    return {
      isInit: false,
      filter: {
        semesterId: "",
        examId: "",
        inspectCollegeId: "",
        courseCode: "",
        teacherId: "",
        column: null,
        order: null
      },
      current: 1,
      size: this.GLOBAL.pageSize,
      total: 0,
      dataList: []
    };
  },
  methods: {
    search() {
      this.toPage(1);
    },
    async getList() {
      const datas = {
        ...this.filter,
        pageNumber: this.current,
        pageSize: this.size
      };
      const data = await schoolTeacherAllTeacherClassRank(datas);
      this.dataList = data.records;
      this.total = data.total;
    },
    toPage(page) {
      this.current = page;
      this.getList();
    },
    semesterChange() {
      this.filter.examId = null;
      this.examChange();
    },
    examChange() {
      this.filter.teachCollegeId = null;
      this.filter.courseCode = null;
      this.filter.teacherId = null;

      // 初次载入页面加载默认数据
      if (!this.isInit && this.filter.examId && this.filter.semesterId) {
        this.isInit = true;
        this.search();
      }
    },
    sortChange({ prop, order }) {
      if (order) {
        this.filter.column = prop;
        this.filter.order = order.replace("ending", "").toUpperCase();
      } else {
        this.filter.column = null;
        this.filter.order = null;
      }
      this.getList();
    }
  }
};
</script>
