<template>
  <div class="student-report-manage">
    <div class="page-head">
      <h2>
        <span>学生报告管理</span>
      </h2>
    </div>
    <div class="part-box part-box-filter">
      <el-form ref="FilterForm" label-position="left" label-width="55px" inline>
        <el-form-item label="学期：">
          <semester-select
            v-model="filter.semesterId"
            auto-fetch
            @change="semesterChange"
          ></semester-select>
        </el-form-item>
        <el-form-item label="考试：">
          <exam-select
            ref="ExamSelect"
            v-model="filter.examId"
            :semester-id="filter.semesterId"
            @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="班级：">
          <class-select
            v-model="filter.clazzId"
            :filter="filter"
          ></class-select>
        </el-form-item>
        <el-form-item label="是否缺考：" label-width="85px">
          <el-select
            v-model="filter.isAbsent"
            placeholder="是否缺考"
            style="width: 110px;"
            clearable
          >
            <el-option
              v-for="(val, key) in ABSENT_TYPE"
              :key="key"
              :value="key"
              :label="val"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学号：">
          <el-input
            v-model.trim="filter.studentCode"
            placeholder="输入学号"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label-width="0px">
          <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="students" border stripe>
        <el-table-column prop="studentName" label="姓名"></el-table-column>
        <el-table-column prop="studentCode" label="学号"></el-table-column>
        <el-table-column prop="examName" label="考试"></el-table-column>
        <el-table-column prop="courseCode" label="课程(代码)">
          <span slot-scope="scope">
            {{ scope.row.courseName }}（{{ scope.row.courseCode }}）
          </span>
        </el-table-column>
        <el-table-column prop="collegeName" label="学院"></el-table-column>
        <el-table-column prop="clazzName" label="班级"></el-table-column>
        <el-table-column prop="absent" label="是否缺考" width="80">
          <span
            slot-scope="scope"
            :class="{ 'color-danger': scope.row.absent }"
            >{{ scope.row.absent ? "缺考" : "正常" }}</span
          >
        </el-table-column>
        <el-table-column label="操作" align="center" width="80px">
          <template slot-scope="scope">
            <el-button
              class="btn-table-icon"
              type="text"
              icon="icon icon-circle-right"
              @click="toDetail(scope.row)"
              title="详情"
              v-if="!scope.row.absent"
            ></el-button>
          </template>
        </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>

    <!-- PreviewStudentReport -->
    <preview-student-report
      :instance="curStudent"
      ref="PreviewStudentReport"
    ></preview-student-report>
  </div>
</template>

<script>
import PreviewStudentReport from "./PreviewStudentReport.vue";
import { examStudentReportList } from "../../api";

export default {
  name: "student-report-manage",
  components: { PreviewStudentReport },
  data() {
    return {
      filter: {
        semesterId: "",
        examId: "",
        courseCode: "",
        clazzId: "",
        inspectCollegeId: "",
        studentCode: "",
        isAbsent: "0"
      },
      ABSENT_TYPE: {
        0: "正常",
        1: "缺考"
      },
      current: 1,
      size: this.GLOBAL.pageSize,
      total: 0,
      students: [],
      curStudent: {}
    };
  },
  mounted() {
    this.search();
  },
  methods: {
    search() {
      this.toPage(1);
    },
    async getList() {
      const datas = {
        ...this.filter,
        pageNumber: this.current,
        pageSize: this.size
      };
      if (datas.isAbsent) datas.isAbsent = !!(datas.isAbsent * 1);
      const data = await examStudentReportList(datas);
      this.students = data.records;
      this.total = data.total;
    },
    toPage(page) {
      this.current = page;
      this.getList();
    },
    semesterChange() {
      this.filter.examId = null;
      this.$refs.ExamSelect.search();
      this.examChange();
    },
    examChange() {
      this.filter.clazzId = null;
      this.filter.courseCode = null;
      this.filter.inspectCollegeId = null;
    },
    toDetail(row) {
      if (row.absent) return;
      this.curStudent = {
        schoolId: row.schoolId,
        studentName: row.studentName,
        studentCode: row.studentCodeEncoder
      };
      this.$refs.PreviewStudentReport.open();
    }
  }
};
</script>
