<template>
  <div class="owner-course-exam-analysis inspect-course-exam-analysis">
    <div class="page-head page-head-flex">
      <h2>
        <span>开课课程考试分析</span>
      </h2>
      <div v-if="orgName">
        <i class="icon icon-sign"></i>开课学院：{{ orgName }}
      </div>
    </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"
            :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>

    <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-item">
                <i class="summary-info-icon"><i class="icon icon-full"></i></i>
                <p>满分</p>
                <p>{{ summary.fullScore }}</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-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.coefficient }}</span>
            </p>
            <p>
              <span>开课学院：</span><span>{{ summary.teachCollegeName }}</span>
            </p>
            <p>
              <span>考查学院：</span>
              <span>
                <MoreText
                  v-if="summary.inspectCollegeNames"
                  :content="summary.inspectCollegeNames"
                />
              </span>
              <!-- <span>{{ summary.inspectCollegeNames }}</span> -->
            </p>
          </div>
        </div>
        <QuestionDifficultScoreAnalysis ref="QuestionDifficultScoreAnalysis" />
        <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.一般情况下，区分度应为正值，值越大则区分度越好；若区分度为负值，则为消极区分，则说明这个题目可能存在问题，建议审查原因；区分度为0，为无区分作用。
                  </p>
                </div>
              </el-popover>
            </h3>
            <!-- modules -->
            <div class="module-select">
              <div
                v-for="mod in distinctionList"
                :key="mod.id"
                :class="[
                  'module-select-item',
                  {
                    'module-select-item-act': mod.id === curDistinction.id
                  }
                ]"
                @click="distinctionChange(mod)"
              >
                {{ mod.paperType }}
              </div>
            </div>
          </div>
          <div class="chart-box chart-qfdnd">
            <v-chart
              :option="curDistinction.chartOption"
              v-if="curDistinction.chartOption"
            ></v-chart>
          </div>
        </div>
      </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 class="chart-table">
            <table class="table">
              <tr>
                <th rowspan="3">分数段</th>
                <th colspan="4" class="text-center">赋分前</th>
                <th colspan="4" class="text-center">赋分后</th>
              </tr>
              <tr class="text-center">
                <th colspan="2">总体</th>
                <th colspan="2">应届</th>
                <th colspan="2">总体</th>
                <th colspan="2">应届</th>
              </tr>
              <tr>
                <th>有效人数</th>
                <th>占比</th>
                <th>有效人数</th>
                <th>占比</th>
                <th>有效人数</th>
                <th>占比</th>
                <th>有效人数</th>
                <th>占比</th>
              </tr>
              <tr v-for="(grade, index) in scoreAnalyseList" :key="index">
                <td class="text-left">{{ grade.describe }}</td>
                <td>{{ grade.allCountBefore }}</td>
                <td>{{ grade.allCountRateBefore }}%</td>
                <td>{{ grade.currentCountBefore }}</td>
                <td>{{ grade.currentCountRateBefore }}%</td>
                <td>{{ grade.allCountAfter }}</td>
                <td>{{ grade.allCountRateAfter }}%</td>
                <td>{{ grade.currentCountAfter }}</td>
                <td>{{ grade.currentCountRateAfter }}%</td>
              </tr>
              <tr>
                <td class="text-left">小计</td>
                <td>{{ scoreAnalyseListSum.allCountBefore }}</td>
                <td></td>
                <td>{{ scoreAnalyseListSum.currentCountBefore }}</td>
                <td></td>
                <td>{{ scoreAnalyseListSum.allCountAfter }}</td>
                <td></td>
                <td>{{ scoreAnalyseListSum.currentCountAfter }}</td>
                <td></td>
              </tr>
            </table>
          </div>
        </div>
        <DifficultLevelAnalysis ref="DifficultLevelAnalysis" />
        <TeacherClazzScore ref="TeacherClazzScore" :filter="filter" />
      </el-col>
    </el-row>
    <MistakeAnalysis v-if="mistakeDatas" :datas="mistakeDatas" />
  </div>
</template>

<script>
import {
  getScoreAnalyseOption,
  getDistinctionAnalyseOption
} from "../../chartOption";
import { courseSurveyTeacherView } from "../../api";
import QuestionDifficultScoreAnalysis from "./QuestionDifficultScoreAnalysis";
import DifficultLevelAnalysis from "./DifficultLevelAnalysis";
import TeacherClazzScore from "./TeacherClazzScore";
import MistakeAnalysis from "./MistakeAnalysis";
import MoreText from "../../../../components/MoreText";
import { calcSum } from "@/plugins/utils";

export default {
  name: "owner-course-exam-analysis",
  components: {
    QuestionDifficultScoreAnalysis,
    DifficultLevelAnalysis,
    TeacherClazzScore,
    MistakeAnalysis,
    MoreText
  },
  data() {
    return {
      isInit: false,
      setReady: false,
      selectDefault: false,
      filter: {
        semesterId: "",
        examId: "",
        courseCode: ""
      },
      summary: {},
      orgName: "",
      // report
      scoreAnalyse: [],
      scoreAnalyseSummary: {},
      scoreAnalyseList: [],
      scoreAnalyseListSum: {},
      scoreAnalyseOption: null,
      distinctionList: [],
      curDistinction: {},
      mistakeDatas: null
    };
  },
  created() {
    const orgInfo = this.$ls.get("user", { orgInfo: { name: "" } }).orgInfo;
    if (orgInfo) this.orgName = orgInfo.name;
    this.initPage();
  },
  methods: {
    initPage() {
      const ownerCourseSet = this.$ls.get("ownerCourseSet");
      if (ownerCourseSet) {
        this.filter = this.$objAssign(
          { semesterId: "", examId: "", courseCode: "" },
          ownerCourseSet
        );
        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("ownerCourseSet");
        });
      } 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.TeacherClazzScore.getData();
      // 试题难度得分情况分析
      this.$refs.QuestionDifficultScoreAnalysis.initData(this.filter);
      // 各难度水平题目上的作答分析
      this.$refs.DifficultLevelAnalysis.initData(this.filter);
    },
    async getData() {
      const datas = {
        ...this.filter
      };
      const data = await courseSurveyTeacherView(datas);
      this.initData(data);
    },
    initData(datas) {
      this.summary = datas.teachCourseSurveyResult;
      // 赋分分数段分布情况
      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.scoreAnalyseList = datas.gradeDistribution.reverse();
      this.scoreAnalyseListSum.allCountBefore = calcSum(
        this.scoreAnalyseList.map(item => item.allCountBefore)
      );
      this.scoreAnalyseListSum.allCountAfter = calcSum(
        this.scoreAnalyseList.map(item => item.allCountAfter)
      );
      this.scoreAnalyseListSum.currentCountBefore = calcSum(
        this.scoreAnalyseList.map(item => item.currentCountBefore)
      );
      this.scoreAnalyseListSum.currentCountAfter = calcSum(
        this.scoreAnalyseList.map(item => item.currentCountAfter)
      );
      // 区分度及难度分析情况
      this.distinctionList = datas.questionInfo.questionList.map(
        (item, index) => {
          const dataList = item.cellList.map(elem => {
            return {
              name: `${elem.mainNumber}-${elem.subNumber}`,
              detailName: elem.questionName,
              validity: elem.validity,
              scoreRate: elem.scoreRate / 100
            };
          });

          return {
            id: `distinction${index}`,
            paperType: item.paperType,
            chartOption: getDistinctionAnalyseOption(dataList)
          };
        }
      );
      this.distinctionChange(this.distinctionList[0]);
      // 考生错题难度
      this.mistakeDatas = datas.questionInfo.questionList[0];
    },
    semesterChange() {
      this.filter.examId = null;
    },
    examChange() {
      this.filter.courseCode = null;
    },
    courseChange() {
      // 初次载入页面加载默认数据
      if (
        !this.isInit &&
        this.filter.examId &&
        this.filter.semesterId &&
        this.filter.courseCode
      ) {
        this.isInit = true;
        this.search();
      }
    },
    distinctionChange(mod) {
      this.curDistinction = mod;
    }
  }
};
</script>
