<template>
  <div class="student-report">
    <!-- cover -->
    <report-cover
      :student="student"
      :exams="exams"
      @show-report="showReport"
      @exam-change="examChange"
      v-if="dateReady && !showDetail"
    ></report-cover>
    <!-- detail -->
    <report-detail
      class="student-report-body"
      :data="curCourse"
      v-if="showDetail"
    ></report-detail>
    <div class="back-guide" v-if="showDetail" @click="toCover">
      <p>返回<br />封面</p>
    </div>
  </div>
</template>

<script>
import ReportCover from "./components/ReportCover";
import ReportDetail from "./components/ReportDetail";
import flexible from "./flexible";
flexible.refreshRem();
import { findStudentReallyInfo } from "./api";

export default {
  name: "student-report",
  components: { ReportCover, ReportDetail },
  data() {
    return {
      // studentCode: "2018302130090",
      studentCode: this.$route.params.studentCode,
      schoolId: this.$route.params.schoolId,
      examId: this.$route.params.examId,
      courseCode: this.$route.params.courseCode,
      student: {},
      exams: [],
      curCourse: {},
      showDetail: false,
      dateReady: false
    };
  },
  created() {
    document.body.style.backgroundColor = "#2a1e52";
    this.getStudent();
  },
  methods: {
    async getStudent() {
      const data = await findStudentReallyInfo({
        studentCode: this.studentCode,
        schoolId: this.schoolId
      });
      if (!data) {
        this.$message.error("获取学生数据错误！");
        return;
      }

      // if (!data.studentInfo) {
      //   this.$message.error("学生不存在！");
      //   return;
      // }

      this.student = data.studentInfo;
      if (this.examId) {
        data.examInfo = data.examInfo.filter(
          exam => exam.examId === this.examId
        );
      }
      this.exams = data.examInfo.map(exam => {
        exam.name = `${exam.semester}${exam.examName}`;
        exam.courseInfo = exam.courseInfo
          .filter(item => item.studentCurrent)
          .map(item => {
            // 未发布当做已发布
            if (item.publishStatus === "UN_PUBLISH")
              item.publishStatus = "PUBLISH";
            return item;
          });

        if (this.courseCode) {
          exam.courseInfo = exam.courseInfo.filter(
            item => item.courseCode === this.courseCode
          );
        }
        return exam;
      });
      this.dateReady = true;
    },
    examChange(exam) {
      this.student.examCode = exam.examCode;
    },
    showReport(course) {
      this.curCourse = {
        ...course,
        studentCode: this.student.studentCode,
        schoolId: this.schoolId
      };
      document.documentElement.scrollTop = 0;
      this.showDetail = true;
    },
    toCover() {
      this.showDetail = false;
      document.documentElement.scrollTop = 0;
    }
  },
  beforeDestroy() {
    document.body.style.backgroundColor = "";
  }
};
</script>

<style lang="scss" src="../../assets/styles/student.scss"></style>
