<template>
  <div class="report-cover student-cover">
    <div class="cover-body report-part">
      <h1>{{ curExam.name || "暂无考试信息" }}</h1>
      <div class="cover-menu">
        <div class="menu-title">
          <h3><i class="icon icon-report"></i>报告列表</h3>
          <h3 v-if="exams.length > 1" @click="toSelectExam">
            <i class="icon icon-calendar"></i>历次学情
          </h3>
        </div>
        <div class="menu-list" v-if="curExam.courseInfo.length">
          <div
            v-for="course in curExam.courseInfo"
            :key="course.courseCode"
            :class="[
              'menu-item',
              { 'menu-item-absent': course.publishStatus !== 'PUBLISH' }
            ]"
            @click="selectCourse(course)"
          >
            <p>{{ course.courseName }}</p>
            <span class="menu-item-right">
              <i
                class="icon icon-triangle-right"
                v-if="course.publishStatus === 'PUBLISH' && !course.absent"
              ></i>
              <i v-else>{{ course.absent ? "缺考或违纪" : "未发布" }}</i>
            </span>
          </div>
        </div>
        <div class="menu-list menu-none" v-else>
          未查询到课程
        </div>
      </div>
      <div class="cover-content">
        <h2>亲爱的{{ student.name }}同学：</h2>
        <div class="cover-content-info" v-if="curExam.courseInfo.length">
          <p>
            你参加了{{
              curExam.name
            }}，这一次考试根据本学期相关课程的教学大纲及培养目标测量出你的学习情况，并形成报告。
          </p>
          <p>
            本次报告将向你说明相关课程考试分数背后的意义，它除了评估你在学习上的整体情况，还分别多维度、多角度地进行检测；我们根据检测结果提出一些建议，希望你变得更出色。
          </p>
          <p>
            我们鼓励你与你的老师共同讨论这些报告，以便更深入的了解你的学习状态，以提供更适合你的教育资源，有效改善学习方式。
          </p>
          <p>
            我们衷心的期望你能在科学评价指导的基础上获得更大的学业成就，在未来的学习上也更为自信与愉快。
          </p>
        </div>
        <div class="cover-content-info" v-else>
          <p>
            抱歉，你没有参加近期学期期末的基础公共课考试，或你所参加考试的公共基础课程暂未纳入分析，所以暂时查询不到你的课程！
          </p>
        </div>
      </div>
    </div>
    <div class="cover-back1"></div>
    <div class="cover-back2"></div>
    <div class="cover-person"></div>

    <select-exam
      :exams="exams"
      :selected-exam="curExam.examCode"
      @modified="examChange"
      ref="SelectExam"
    ></select-exam>
  </div>
</template>

<script>
import SelectExam from "./SelectExam";
const initExam = {
  name: "",
  examCode: "",
  courseInfo: []
};

export default {
  name: "report-cover",
  components: { SelectExam },
  props: {
    student: {
      type: Object,
      default() {
        return {};
      }
    },
    exams: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      curExam: { ...initExam }
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      let examIndex = 0;
      if (this.student.examCode) {
        examIndex = this.exams.findIndex(
          item => item.examCode === this.student.examCode
        );
      }
      this.examChange(this.exams[examIndex]);
    },
    selectCourse(course) {
      if (course.publishStatus !== "PUBLISH" || course.absent) return;
      this.$emit("show-report", {
        examId: this.curExam.examId,
        courseCode: course.courseCode
      });
    },
    toSelectExam() {
      if (!this.exams.length) return;
      this.$refs.SelectExam.open();
    },
    examChange(exam) {
      this.curExam = exam || { ...initExam };
      this.$emit("exam-change", this.curExam);
    }
  }
};
</script>
