<template>
  <div class="school-course">
    <div class="page-head">
      <h2>
        <span>全校课程考试分析</span>
      </h2>
    </div>
    <div class="part-box part-box-filter part-box-flex" v-if="setReady">
      <el-form ref="FilterForm" label-position="left" label-width="60px" inline>
        <el-form-item label="学期：">
          <semester-select
            v-model="filter.semesterId"
            :select-default="selectDefault"
            :clearable="false"
            @change="semesterChange"
          ></semester-select>
        </el-form-item>
        <el-form-item label="考试：">
          <exam-select
            ref="ExamSelect"
            v-model="filter.examId"
            :semester-id="filter.semesterId"
            :select-default="selectDefault"
            :clearable="false"
            @change="examChange"
          ></exam-select>
        </el-form-item>
        <el-form-item label="课程：">
          <course-select
            ref="CourseSelect"
            v-model="filter.courseCode"
            :exam-id="filter.examId"
            :select-default="selectDefault"
            :clearable="false"
            @change="courseChange"
          ></course-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" round @click="search">查询</el-button>
        </el-form-item>
      </el-form>
      <div class="part-box-action">
        <el-button :disabled="loading" round @click="toExport"
          ><i class="icon icon-export"></i> 导出课程分析报表</el-button
        >
      </div>
    </div>
    <!--  -->
    <el-row :gutter="20">
      <el-col :span="12">
        <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>
                </div>
              </el-popover>
            </h3>
          </div>
          <div class="summary-info">
            <div class="summary-info-row">
              <div class="summary-info-item">
                <i class="summary-info-icon"><i class="icon icon-start"></i></i>
                <p>考试时间</p>
                <p>{{ summary.examTime | timestampFilter }}</p>
              </div>
              <div class="summary-info-item">
                <i class="summary-info-icon"><i class="icon icon-users"></i></i>
                <p>有效(实考)人数</p>
                <p>{{ summary.realityCount }}</p>
              </div>
              <div class="summary-info-item">
                <i class="summary-info-icon"><i class="icon icon-full"></i></i>
                <p>满分</p>
                <p>{{ summary.totalScore }}</p>
              </div>
            </div>
            <div class="summary-info-row">
              <div class="summary-info-item">
                <i class="summary-info-icon"
                  ><i class="icon icon-course"></i
                ></i>
                <p>课程</p>
                <p>{{ summary.courseName }}</p>
              </div>
              <div class="summary-info-item">
                <i class="summary-info-icon"
                  ><i class="icon icon-college"></i
                ></i>
                <p>考查学院</p>
                <p>{{ summary.inspectCollegeCount }}</p>
              </div>
              <div class="summary-info-item">
                <i class="summary-info-icon"
                  ><i class="icon icon-absent"></i
                ></i>
                <p>缺考/违纪</p>
                <p>{{ summary.absentCount }}</p>
              </div>
            </div>
          </div>
          <div class="summary-school">
            <p>
              <span>开课学院：</span><span>{{ summary.teachCollegeName }}</span>
            </p>
            <p>
              <span>考查学院：</span
              ><span>{{ summary.inspectCollegeName }}</span>
            </p>
          </div>
        </div>
        <TeacherClazzRank ref="TeacherClazzRank" :filter="filter" />
      </el-col>
      <el-col :span="12">
        <div class="part-box part-box-pad">
          <div class="part-box-head">
            <h3>
              <span>分数段分布情况</span>
            </h3>
          </div>
          <div class="chart-box chart-fsdfb">
            <v-chart
              :option="scoreAnalyseOption"
              v-if="scoreAnalyseOption"
            ></v-chart>
          </div>
          <div class="chart-summary">
            <div class="chart-summary-body">
              <div class="chart-summary-item">
                <i class="chart-summary-icon">
                  <i class="icon icon-wave-cyan"></i>
                </i>
                <p>平均分<span>(总体)</span></p>
                <p>{{ distribut.scoreAndRate.avgScore }}<span>分</span></p>
              </div>
              <div class="chart-summary-item">
                <i class="chart-summary-icon"
                  ><i class="icon icon-data-cyan"></i
                ></i>
                <p>不及格率<span>(总体)</span></p>
                <p>{{ distribut.scoreAndRate.notPassRate }}<span>%</span></p>
              </div>
              <div class="chart-summary-item">
                <i class="chart-summary-icon"
                  ><i class="icon icon-wave-blue"></i
                ></i>
                <p>平均分<span>(应届)</span></p>
                <p>
                  {{ distribut.scoreAndRate.currentAvgScore }}<span>分</span>
                </p>
              </div>
              <div class="chart-summary-item">
                <i class="chart-summary-icon"
                  ><i class="icon icon-data-blue"></i
                ></i>
                <p>不及格率<span>(应届)</span></p>
                <p>
                  {{ distribut.scoreAndRate.currentNotPassRate }}<span>%</span>
                </p>
              </div>
            </div>
          </div>
          <div class="chart-table">
            <table class="table">
              <tr>
                <th rowspan="2">分数段</th>
                <th colspan="2" class="text-center">总体</th>
                <th colspan="2" class="text-center">应届</th>
              </tr>
              <tr>
                <th>有效人数</th>
                <th>占比</th>
                <th>有效人数</th>
                <th>占比</th>
              </tr>
              <tr v-for="(grade, index) in distribut.grades" :key="index">
                <td>{{ grade.scores }}</td>
                <td>{{ grade.totalRealityCount }}</td>
                <td>{{ grade.totalRate }}%</td>
                <td>{{ grade.currentRealityCount }}</td>
                <td>{{ grade.currentRate }}%</td>
              </tr>
              <tr>
                <td>小计</td>
                <td>{{ distribut.scoreAndRate.totalRealityCount }}</td>
                <td></td>
                <td>{{ distribut.scoreAndRate.currentRealityCount }}</td>
                <td></td>
              </tr>
            </table>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  schoolCourseOverview,
  schoolCourseGradeDistribut,
  schoolCourseExportDataAnalysis
} from "../../api";
import { getScoreAnalyseOption } from "../../chartOption";
import { calcSum } from "@/plugins/utils";
import { downloadByApi } from "@/plugins/download";
import TeacherClazzRank from "./TeacherClazzRank";

export default {
  name: "school-course",
  components: { TeacherClazzRank },
  data() {
    return {
      isInit: false,
      setReady: false,
      selectDefault: false,
      filter: {
        semesterId: "",
        examId: "",
        courseCode: ""
      },
      current: 1,
      size: this.GLOBAL.pageSize,
      total: 0,
      summary: {},
      distribut: { scoreAndRate: {}, grades: [] },
      scoreAnalyseOption: null,
      loading: false
    };
  },
  created() {
    this.initPage();
  },
  methods: {
    initPage() {
      const schoolExamSet = this.$ls.get("schoolExamSet");
      if (schoolExamSet) {
        this.filter = this.$objAssign(
          { semesterId: "", examId: "", courseCode: "" },
          schoolExamSet
        );
        this.isInit = true;
        this.setReady = true;
        this.$nextTick(async () => {
          await this.$refs.ExamSelect.search();
          await this.$refs.CourseSelect.search();
          this.search();
          this.selectDefault = true;
          this.$ls.remove("schoolExamSet");
        });
      } else {
        this.setReady = true;
        this.selectDefault = true;
      }
    },
    search() {
      if (
        !this.filter.semesterId ||
        !this.filter.examId ||
        !this.filter.courseCode
      ) {
        this.$message.error("请选择学期、考试和课程！");
        return;
      }
      this.$refs.TeacherClazzRank.getData();
      this.getSummary();
      this.getDistribut();
    },
    async getSummary() {
      const data = await schoolCourseOverview(this.filter);
      this.summary = data || {};
    },
    async getDistribut() {
      this.distribut = await schoolCourseGradeDistribut(this.filter);
      this.distribut.grades.reverse();
      this.distribut.grades.forEach(grade => {
        grade.scores = grade.scores.split(",").join("-");
      });
      this.distribut.scoreAndRate.totalRealityCount = calcSum(
        this.distribut.grades.map(item => item.totalRealityCount)
      );
      this.distribut.scoreAndRate.currentRealityCount = calcSum(
        this.distribut.grades.map(item => item.currentRealityCount)
      );
      this.buildChart(this.distribut);
    },
    buildChart(datas) {
      const scoreAnalyse = [
        {
          name: "总体",
          datas: datas.grades
            .map(item => {
              return {
                name: item.scores + "分",
                value: item.totalRealityCount
              };
            })
            .reverse()
        },
        {
          name: "应届",
          datas: datas.grades
            .map(item => {
              return {
                name: item.scores + "分",
                value: item.currentRealityCount
              };
            })
            .reverse()
        }
      ];
      this.scoreAnalyseOption = getScoreAnalyseOption(scoreAnalyse);
    },
    semesterChange() {
      this.filter.examId = null;
      this.examChange();
    },
    examChange() {
      this.filter.courseCode = null;
    },
    courseChange() {
      // 初次载入页面加载默认数据
      if (
        !this.isInit &&
        this.filter.examId &&
        this.filter.semesterId &&
        this.filter.courseCode
      ) {
        this.isInit = true;
        this.search();
      }
    },
    async toExport() {
      if (this.loading) return;

      if (
        !this.filter.semesterId ||
        !this.filter.examId ||
        !this.filter.courseCode
      ) {
        this.$message.error("学期、考试和课程必须同时选择！");
        return;
      }

      this.loading = true;
      const res = await downloadByApi(() => {
        return schoolCourseExportDataAnalysis(this.filter);
      }, `开课成绩明细.xlsx`).catch(() => {});

      this.loading = false;

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