<template>
  <div class="report">
    <template v-if="dataReady">
      <report-summary></report-summary>
      <report-college v-if="college.length"></report-college>
      <report-class v-if="classData.length"></report-class>
      <report-teacher
        v-if="teacher.length || teacherClass.length"
      ></report-teacher>
      <report-question
        v-if="objective.length"
        type="objective"
      ></report-question>
      <report-question
        v-if="subjective.length"
        type="subjective"
      ></report-question>
      <report-main-question
        v-if="mainQuestionAnalysis.length"
      ></report-main-question>
    </template>
  </div>
</template>

<script>
import reportData from "./data";
import { mapState, mapMutations } from "vuex";
import ReportSummary from "./ReportSummary.vue";
import ReportCollege from "./ReportCollege.vue";
import ReportClass from "./ReportClass.vue";
import ReportTeacher from "./ReportTeacher.vue";
import ReportQuestion from "./ReportQuestion.vue";
import ReportMainQuestion from "./ReportMainQuestion.vue";
import { scoreReport } from "../../api";
import previewTemp from "./previewTemp";

export default {
  name: "report",
  props: {
    baseinfo: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  components: {
    ReportSummary,
    ReportCollege,
    ReportClass,
    ReportTeacher,
    ReportQuestion,
    ReportMainQuestion,
  },
  data() {
    return {
      dataReady: false,
    };
  },
  computed: {
    ...mapState("report", [
      "scoreRange",
      "college",
      "classData",
      "teacher",
      "teacherClass",
      "objective",
      "subjective",
      "mainQuestionAnalysis",
    ]),
  },
  mounted() {
    this.initData();
  },
  methods: {
    ...mapMutations("report", ["setData", "resetData"]),
    initData1() {
      this.resetData();
      this.setData({
        ...reportData,
        baseinfo: {
          examName: "测试考试1",
          schoolName: "测试学校1",
          courseName: "测试科目1",
          filter: {},
        },
      });
      this.dataReady = true;

      this.$nextTick(() => {
        this.fillCatalogNum();
      });
    },
    async initData() {
      this.resetData();
      const res = await scoreReport({
        examId: this.baseinfo.examId,
        paperNumber: this.baseinfo.paperNumber,
        ...this.baseinfo.filter,
      });
      if (!res) return;
      this.setData({
        ...res,
        baseinfo: {
          ...this.baseinfo,
          examName: res.examName,
          semesterName: res.semesterName,
        },
      });
      this.dataReady = true;

      this.$nextTick(() => {
        this.fillCatalogNum();
      });
    },
    fillCatalogNum() {
      document.querySelectorAll(".foot-right").forEach((item, index) => {
        const pno = index + 1;
        item.innerHTML = `<span class="page-num">PAGE ${pno}</span><span class="foot-num-bg"></span>`;
      });
    },
    getTemp() {
      return previewTemp(this.$el.outerHTML);
    },
  },
};
</script>
