<template>
  <div class="school-exam">
    <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>1.统计范围包含应届、非应届类型的考生数据；</p>
            <p>2.有效人数：成绩有效的实考人数；</p>
            <p>3.缺考人数：全部课程都缺考的学生人数；</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"
            select-default
            :clearable="false"
            :semester-id="filter.semesterId"
            @change="examChange"
          ></exam-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" round @click="search">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="school-exam-overview">
      <div class="exam-summary">
        <div class="summary-item summary-time">
          <div class="summary-tag">
            <div class="tag-body">
              <i class="tag-icon"><i class="icon icon-start"></i></i>
            </div>
            <div class="tag-body">
              <p>考试开始时间</p>
              <p>{{ summary.examTime | timestampFilter }}</p>
            </div>
          </div>
        </div>
        <div class="summary-item summary-college">
          <div class="summary-tag">
            <div class="tag-body">
              <i class="tag-icon"><i class="icon icon-college"></i></i>
            </div>
            <div class="tag-body">
              <p>考查学院</p>
              <p>{{ summary.collegeCount }}</p>
            </div>
          </div>
        </div>
        <div class="summary-item summary-grid">
          <div class="summary-tag">
            <div class="tag-body">
              <i class="tag-icon"><i class="icon icon-course"></i></i>
            </div>
            <div class="tag-body">
              <p>课程数量</p>
              <p>{{ summary.courseCount }}</p>
            </div>
          </div>
          <div class="summary-tag">
            <div class="tag-body">
              <p>公共课</p>
              <p>{{ summary.publicCourseCount }}</p>
            </div>
            <div class="tag-body">
              <p>专业课</p>
              <p>{{ summary.majorCourseCount }}</p>
            </div>
          </div>
        </div>
        <div class="summary-item summary-grid summary-reality-course">
          <div class="summary-tag">
            <div class="tag-body">
              <i class="tag-icon"><i class="icon icon-book"></i></i>
            </div>
            <div class="tag-body">
              <p>应考课次</p>
              <p>{{ summary.totalCourseTimes }}</p>
            </div>
          </div>
          <div class="summary-tag">
            <div class="tag-body">
              <p>有效(实考)课次</p>
              <p>{{ summary.realityCourseTimes }}</p>
            </div>
            <div class="tag-body">
              <p>缺考/违纪课次</p>
              <p>{{ summary.absentCourseTimes }}</p>
            </div>
          </div>
        </div>
        <div class="summary-item summary-grid summary-reality-person">
          <div class="summary-tag">
            <div class="tag-body">
              <i class="tag-icon"><i class="icon icon-users"></i></i>
            </div>
            <div class="tag-body">
              <p>应考人数</p>
              <p>{{ summary.totalCount }}</p>
            </div>
          </div>
          <div class="summary-tag">
            <div class="tag-body">
              <p>有效(实考)人数</p>
              <p>{{ summary.realityCount }}</p>
            </div>
            <div class="tag-body">
              <p>缺考/违纪人数</p>
              <p>{{ summary.absentCount }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="part-box part-box-pad">
      <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>1.总体：包含应届、非应届类型。</p>
              <p>2.应届：只包含应届类型；</p>
              <p>3.点击课程名称，可以下钻查看该课程的详细分析。</p>
            </div>
          </el-popover>
        </h3>
        <el-button type="text" :disabled="loading" @click="toExport">
          <i class="el-icon-download"></i> 导出课程分析EXCEL报表
        </el-button>
      </div>
      <el-table
        ref="TableList"
        :data="dataList"
        border
        @sort-change="sortChange"
      >
        <el-table-column prop="courseCode" label="课程(代码)" min-width="120">
          <span
            class="text-link"
            slot-scope="scope"
            @click="toDetail(scope.row)"
          >
            {{ scope.row.courseName }}（{{ scope.row.courseCode }}）
          </span>
        </el-table-column>
        <el-table-column
          prop="teachCollegeName"
          label="开课学院"
          min-width="80"
        ></el-table-column>
        <el-table-column
          prop="inspectCollegeCount"
          label="考查学院"
          width="90"
        ></el-table-column>
        <el-table-column label="总体" align="center">
          <el-table-column
            prop="realityCount"
            label="有效人数"
            width="100"
          ></el-table-column>
          <el-table-column
            prop="currentRealityRate"
            label="应届占比(人数)"
            width="140"
          >
            <span slot-scope="scope">
              {{ scope.row.currentRealityRate }}%
              <i class="color-gray">({{ scope.row.currentRealityCount }})</i>
            </span>
          </el-table-column>
          <el-table-column
            prop="prevRealityRate"
            label="非应届占比(人数)"
            width="140"
          >
            <span slot-scope="scope">
              {{ scope.row.pastRealityRate }}%
              <i class="color-gray">({{ scope.row.pastRealityCount }})</i>
            </span>
          </el-table-column>
          <el-table-column
            prop="avgScore"
            label="平均分"
            width="80"
          ></el-table-column>
          <el-table-column
            prop="notPassRate"
            label="不及格率(人数)"
            width="140"
          >
            <span slot-scope="scope">
              {{ scope.row.notPassRate }}%
              <i class="color-gray">({{ scope.row.notPassCount }})</i>
            </span>
          </el-table-column>
          <el-table-column
            prop="absentCount"
            label="缺考"
            width="80"
          ></el-table-column>
        </el-table-column>
        <el-table-column label="应届" align="center">
          <el-table-column
            prop="currentAvgScore"
            label="平均分"
            min-width="80"
            sortable="custom"
          ></el-table-column>
          <el-table-column
            prop="currentNotPassRate"
            label="不及格率(人数)"
            min-width="140"
            sortable="custom"
          >
            <span slot-scope="scope">
              {{ scope.row.currentNotPassRate }}%
              <i class="color-gray">({{ scope.row.currentNotPassCount }})</i>
            </span>
          </el-table-column>
        </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 {
  schoolExamOverview,
  schoolExamCourseSummary,
  schoolExamExportCourseSummary
} from "../api";
import { downloadByApi } from "@/plugins/download";

export default {
  name: "school-exam",
  data() {
    return {
      isInit: false,
      filter: {
        semesterId: "",
        examId: "",
        column: null,
        order: null
      },
      current: 1,
      size: this.GLOBAL.pageSize,
      total: 0,
      summary: {},
      dataList: [],
      loading: false
    };
  },
  methods: {
    search() {
      if (!this.filter.semesterId || !this.filter.examId) {
        this.$message.error("请选择学期和考试！");
        return;
      }
      this.getSummary();
      this.toPage(1);
    },
    async getSummary() {
      const data = await schoolExamOverview(this.filter);
      this.summary = data || {};
    },
    async getList() {
      const datas = {
        ...this.filter,
        pageNumber: this.current,
        pageSize: this.size
      };
      const data = await schoolExamCourseSummary(datas);
      this.dataList = data.records;
      this.total = data.total;
    },
    toPage(page) {
      this.current = page;
      this.getList();
    },
    semesterChange() {
      this.filter.examId = null;
    },
    examChange() {
      // 初次载入页面加载默认数据
      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();
    },
    toDetail(row) {
      console.log(row);
      this.$ls.set("schoolExamSet", {
        semesterId: this.filter.semesterId,
        examId: this.filter.examId,
        courseCode: row.courseCode
      });
      this.$router.push({ name: "SchoolCourse" });
    },
    async toExport() {
      if (this.loading) return;

      if (!this.filter.semesterId || !this.filter.examId) {
        this.$message.error("请选择学期和考试！");
        return;
      }

      this.loading = true;
      const res = await downloadByApi(() => {
        return schoolExamExportCourseSummary(this.filter);
      }, `全校课程考试分析汇总.xlsx`).catch(() => {});

      this.loading = false;

      if (res) {
        this.$message.success("文件下载成功！");
      } else {
        this.$message.error("文件下载失败，请重新尝试！");
      }
    }
  }
};
</script>
