<template>
  <div class="my-class-exam-view">
    <div class="page-head page-head-flex">
      <h2>
        <span>我的课堂考试分析</span>
      </h2>
    </div>
    <div class="part-box part-box-filter" 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"
            :select-default="selectDefault"
            :clearable="false"
            :semester-id="filter.semesterId"
            @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"
            is-teach
            :clearable="false"
            @change="courseChange"
          ></course-select>
        </el-form-item>
        <el-form-item label="考查学院：">
          <inspect-college-select
            ref="InspectCollegeSelect"
            v-model="filter.inspectCollegeId"
            :filter="filter"
            :select-default="selectDefault"
            :clearable="false"
            @change="inspectCollegeChange"
          ></inspect-college-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" round @click="search">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-row :gutter="20" type="flex">
      <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-course"></i
                ></i>
                <p>课程</p>
                <p>{{ summary.courseName }}</p>
              </div>
            </div>
            <div class="summary-info-row">
              <div class="summary-info-group">
                <div class="summary-info-item">
                  <i class="summary-info-icon"
                    ><i class="icon icon-full"></i
                  ></i>
                  <p>满分</p>
                  <p>{{ summary.fullScore }}</p>
                </div>
              </div>
              <div class="summary-info-group">
                <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-absent"></i
                  ></i>
                  <p>缺考/违纪</p>
                  <p>{{ summary.absentCount }}</p>
                </div>
              </div>
              <div class="summary-info-group">
                <div class="summary-info-item">
                  <i class="summary-info-icon"
                    ><i class="icon icon-users"></i
                  ></i>
                  <p>课堂有效(实考)</p>
                  <p>{{ summary.courseRealityCount }}</p>
                </div>
                <div class="summary-info-item">
                  <i class="summary-info-icon"
                    ><i class="icon icon-absent"></i
                  ></i>
                  <p>缺考/违纪</p>
                  <p>{{ summary.courseAbsentCount }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <QuestionDifficultScoreAnalysis ref="QuestionDifficultScoreAnalysis" />
      </el-col>
      <el-col :span="12">
        <div class="part-box part-box-pad school-course">
          <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="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>{{ scoreAnalyseSummary.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>{{ scoreAnalyseSummary.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>{{ scoreAnalyseSummary.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>
                  {{ scoreAnalyseSummary.currentNotPassRate }}<span>%</span>
                </p>
              </div>
            </div>
          </div>
        </div>
        <DifficultLevelAnalysis ref="DifficultLevelAnalysis" />
      </el-col>
    </el-row>
    <MistakeAnalysis
      v-if="mistakeDatas"
      :datas="mistakeDatas"
      title="我的课堂考生错题难度分析"
    />
  </div>
</template>

<script>
import { getScoreAnalyseOption } from "../../chartOption";
import { schoolTeacherView } from "../../api";
import QuestionDifficultScoreAnalysis from "./QuestionDifficultScoreAnalysis";
import DifficultLevelAnalysis from "./DifficultLevelAnalysis";
import MistakeAnalysis from "../../course/owner-course-exam-analysis/MistakeAnalysis";

export default {
  name: "my-class-exam-view",
  components: {
    QuestionDifficultScoreAnalysis,
    DifficultLevelAnalysis,
    MistakeAnalysis
  },
  data() {
    return {
      isInit: false,
      setReady: false,
      selectDefault: false,
      filter: {
        semesterId: "",
        examId: "",
        courseCode: "",
        inspectCollegeId: ""
      },
      summary: {},
      // report
      scoreAnalyse: [],
      scoreAnalyseSummary: {},
      scoreAnalyseOption: null,
      mistakeDatas: null
    };
  },
  created() {
    this.initPage();
  },
  methods: {
    initPage() {
      const myClassCourseSet = this.$ls.get("myClassCourseSet");
      if (myClassCourseSet) {
        console.log(myClassCourseSet);
        this.filter = this.$objAssign(
          { semesterId: "", examId: "", courseCode: "", inspectCollegeId: "" },
          myClassCourseSet
        );
        this.isInit = true;
        this.setReady = true;
        this.$nextTick(async () => {
          await this.$refs.ExamSelect.search();
          await this.$refs.CourseSelect.search();
          await this.$refs.InspectCollegeSelect.initData();
          this.search();
          this.selectDefault = true;
          this.$ls.remove("myClassCourseSet");
        });
      } else {
        this.setReady = true;
        this.selectDefault = true;
      }
    },
    search() {
      if (
        !this.filter.semesterId ||
        !this.filter.examId ||
        !this.filter.courseCode
      ) {
        this.$message.error("学期、考试和课程都必须选择！");
        return;
      }
      this.mistakeDatas = null;
      this.getData();
      // 试题难度得分情况分析
      this.$refs.QuestionDifficultScoreAnalysis.initData(this.filter);
      // 各难度水平题目上的作答分析
      this.$refs.DifficultLevelAnalysis.initData(this.filter);
    },
    async getData() {
      const datas = {
        ...this.filter
      };
      const data = await schoolTeacherView(datas);
      this.initData(data);
    },
    initData(datas) {
      this.summary = datas.teachCourseResult;
      // 赋分分数段分布情况
      if (datas.gradeDistribution) {
        this.scoreAnalyse = [
          {
            name: "总体",
            datas: datas.gradeDistribution.map(item => {
              return {
                name: item.describe + "分",
                value: item.allCountAfter
              };
            })
          },
          {
            name: "应届",
            datas: datas.gradeDistribution.map(item => {
              return {
                name: item.describe + "分",
                value: item.currentCountAfter
              };
            })
          }
        ];
        this.scoreAnalyseOption = getScoreAnalyseOption(this.scoreAnalyse);
      }
      this.scoreAnalyseSummary = datas.surveyTeacher;

      // 考生错题难度
      this.mistakeDatas = datas.questionInfo.questionList[0];
    },
    semesterChange() {
      this.filter.examId = null;
    },
    examChange() {
      this.filter.courseCode = null;
    },
    courseChange() {
      this.filter.inspectCollegeId = null;
    },
    inspectCollegeChange() {
      // 初次载入页面加载默认数据
      if (
        !this.isInit &&
        this.filter.examId &&
        this.filter.semesterId &&
        this.filter.courseCode &&
        this.filter.inspectCollegeId
      ) {
        this.isInit = true;
        this.search();
      }
    },
    distinctionChange(mod) {
      this.curDistinction = mod;
    }
  }
};
</script>
