<template>
  <div class="inspect-course-exam-overview">
    <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">
      <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>
    <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>
                  <p>
                    3.缺考人数：全部课程都缺考的学生人数；
                  </p>
                </div>
              </el-popover>
            </h3>
          </div>
          <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>
          <div class="exam-summary">
            <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>
      </el-col>
      <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="chart-box chart-pk">
            <v-chart
              :option="courseOtherOption"
              v-if="courseOtherOption"
            ></v-chart>
          </div>
        </div>
      </el-col>
    </el-row>
    <div class="part-box part-box-pad">
      <div class="part-box-head mb-0">
        <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>
      </div>
      <div class="chart-box chart-course">
        <v-chart
          :option="commonCourseOption"
          @click="commonCourseClick"
          v-if="commonCourseOption"
        ></v-chart>
      </div>
      <p class="report-tips">
        低于全校位置平均值的课程共计<b>{{ lowAvgCourseList.length }}科</b>：
        <b>{{ lowAvgCourseList.join("、") }}</b>
      </p>
    </div>
  </div>
</template>

<script>
import { getCommonCourseOption, getCourseOtherOption } from "../chartOption";
import { courseSurveyInspectView } from "../api";

export default {
  name: "inspect-course-exam-overview",
  data() {
    return {
      isInit: false,
      filter: {
        semesterId: "",
        examId: ""
      },
      orgName: "",
      summary: {},
      lowAvgCourseList: [],
      commonCourseList: [],
      commonCourseOption: null,
      courseOtherOption: null
    };
  },
  created() {
    const orgInfo = this.$ls.get("user", { orgInfo: { name: "" } }).orgInfo;
    if (orgInfo) this.orgName = orgInfo.name;
  },
  methods: {
    search() {
      this.getData();
    },
    semesterChange() {
      this.filter.examId = null;
    },
    examChange() {
      // 初次载入页面加载默认数据
      if (!this.isInit && this.filter.examId && this.filter.semesterId) {
        this.isInit = true;
        this.search();
      }
    },
    async getData() {
      if (!this.filter.semesterId || !this.filter.examId) {
        this.$message.error("学期和考试都必须选择！");
        return;
      }
      const data = await courseSurveyInspectView(this.filter);
      this.initData(data);
    },
    initData(datas) {
      this.summary = datas.examBaseInfo;
      this.commonCourseOption = null;
      this.courseOtherOption = null;
      if (!datas.collegeInfo) return;
      this.lowAvgCourseList = datas.collegeInfo.lowAvgInfo.lowAvgCourseList.map(
        item => item.courseName
      );
      if (!datas.collegeInfo.collegeCourseInfoList.length) return;
      const positions = datas.collegeInfo.collegeCourseInfoList.map(
        item => item.colRelativePosition
      );
      const maxPosition = Math.max.apply(null, positions);
      const minPosition = Math.min.apply(null, positions);
      let basePosition = 0;
      if (minPosition < 0) basePosition = Math.abs(minPosition) * 1.3;
      this.commonCourseList = datas.collegeInfo.collegeCourseInfoList.map(
        item => {
          return {
            name: item.courseName,
            courseCode: item.courseCode,
            position: item.colRelativePosition,
            count: item.colRealityCount,
            max: maxPosition + basePosition,
            value: item.colRelativePosition + basePosition,
            basePosition
          };
        }
      );
      this.commonCourseOption = getCommonCourseOption(this.commonCourseList);
      this.courseOtherOption = getCourseOtherOption(this.commonCourseList);
    },
    commonCourseClick(option) {
      console.log(option);
      if (option.componentType !== "series") return;
      const curCourse = this.commonCourseList.find(
        item => item.name === option.name
      );
      this.$ls.set("inspectCourseSet", {
        semesterId: this.filter.semesterId,
        examId: this.filter.examId,
        courseCode: curCourse.courseCode
      });
      this.$router.push({ name: "InspectCourseExamAnalysis" });
    }
  }
};
</script>
