<template>
  <div class="report-container">
    <paper-header :title="name" :totalScore="totalScore"></paper-header>
    <paper-type-card :name="classData.name" type="type" :columns="classData.columns" :rows="classData.rows" v-if="classData.rows">
      <template slot="suffix">
        <report-teacher-tops :data="topData" class="mt40"></report-teacher-tops>
      </template>
    </paper-type-card>
    <paper-type-card :name="objectiveData.name" :columns="objectiveData.columns" :rows="objectiveData.rows" v-if="objectiveData.rows" :autoPageEnable="true" :autoPageConfig="{
        pagingSize: 5,
        pagingTabNameFormatter: mergePagingTabNameFormatter
      }" type="type" class="mt20"></paper-type-card>
    <paper-type-card :name="subjectiveData.name" :columns="subjectiveData.columns" :rows="subjectiveData.rows" v-if="subjectiveData.rows" :autoPageEnable="true" :autoPageConfig="{
        pagingSize: 4,
        pagingTabNameFormatter: mergePagingTabNameFormatter
      }" type="type" class="mt20"></paper-type-card>
    <paper-type-card :name="scoreData.name" :columns="scoreData.columns" :rows="scoreData.rows" v-if="scoreData.rows" type="type" class="mt20"></paper-type-card>
    <paper-type-card :name="rateData.name" :columns="rateData.columns" :rows="rateData.rows" v-if="rateData.rows" :columnTemplateConfig="rateColumnTemplateConfig" type="type" class="mt20">
      <template #template-go-question="{value}">
        <div v-if="value&&value!='--'" class="mx-question-no-list">
          <div class="mx-question-item" v-for="no in value.split('，')" @click="showQuestionByNo(no)">{{no}}</div>
        </div>
        <div v-else>{{value}}</div>
      </template>
    </paper-type-card>
    <paper-type-card :name="knowledgeData.name" :columns="knowledgeData.columns" :rows="knowledgeData.rows" v-if="knowledgeData.rows" :starColumnConfig="{index:1}" :columnTemplateConfig="{'对应题号':'template-go-question'}" type="difficult" class="mt20">
      <template #template-go-question="{value}">
        <div v-if="value&&value!='--'" class="mx-question-no-list">
          <div class="mx-question-item" v-for="no in value.split('，')" @click="showQuestionByNo(no)">{{no}}</div>
        </div>
        <div v-else>{{value}}</div>
      </template>
    </paper-type-card>

    <el-dialog :title="'来源于'+name" :visible.sync="dialogVisible" v-if="dialogVisible" width="60%">
      <analysis :questionId="analysisQuestionId" :examineeId="analysisExamineeId" :wrongMode="false" :lockAnswerInSolving="true"></analysis>
    </el-dialog>
  </div>
</template>
<script>
import "@/assets/styles/report.scss";
import paperHeader from "../../evaluating/components/paperHeader.vue";
import PaperTypeCard from "../../evaluating/components/paperTypeCard.vue";
import ReportTeacherSummary from "./reportTeacherSummary.vue";
import ReportTeacherTops from "./reportTeacherTops.vue";
import {
  getClassReportForStudent
} from "@/api/webApi/report";
import analysis from "@/views/evaluating/components/analysis";
import reportMixins from "./report-mixins.js"

export default {
  mixins: [reportMixins],
  components: {
    paperHeader,
    PaperTypeCard,
    ReportTeacherSummary,
    ReportTeacherTops,
    analysis
  },
  props: {
    evaluationClassId: {
      type: Number | String,
      default: "",
    },
    customerCode: {
      type: String,
      default: "",
    },
    name: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      dialogVisible: false,
      analysisQuestionId: 0,
      analysisExamineeId: 0,
      totalScore: "",
      rawData: {},
      summaryKey: "考试情况分析",
      classKey: "班级情况分析",
      topKeys: ["大幅进步", "大幅退步", "班级前五名", "班级后五名"],
      wrongKey: "班级高频错题",
      objectiveKey: "客观题得分",
      subjectiveKey: "主观题得分",
      scoreKey: "各题型年级、班级得分率对比",
      rateKey: "得分率分级",
      knowledgeKey: "知识点分析",
      classData: [],
      topData: [],
      objectiveData: {},
      subjectiveData: {},
      scoreData: {},
      rateData: {},
      rateColumnTemplateConfig: {},
      knowledgeData: {},
    };
  },
  created() {
    getClassReportForStudent({
      evaluationClassId: this.evaluationClassId,
      customerCode: this.customerCode,
    }).then((res) => {
      console.log("getClassReportForStudent res", res);
      if (res.code == 200 || res.code == 0) {
        this.rawData = res.data;
        this.resolveReportHeader();
        this.resolveReportClass();
        this.resolveReportTops();
        this.resolveObjectives();
        this.resolveSubjectives();
        this.resolveReportScore();
        this.resolveRates();
        this.resolveReportKnowledge();
      } else {
        this.msgError(res.msg || "getClassReportForStudent 请求异常");
      }
    });
  },
  methods: {
    resolveReportHeader() {
      this.totalScore = this.rawData[this.summaryKey].options["总分"];
    },
    resolveReportClass() {
      this.classData = this.rawData[this.classKey]
      this.classData.name = this.classData.name || this.classKey
    },
    resolveReportTops() {
      this.topData = this.topKeys.map((key) => ({
        label: key,
        tableData: this.rawData[key],
      }));
    },
    resolveObjectives() {
      const objData = this.rawData[this.objectiveKey];
      this.objectiveData = this.mergeAnswerColumns(objData, "题号", "选项", "正确答案", "人数")
      this.objectiveData.name = this.objectiveData.name || this.objectiveKey
    },
    resolveSubjectives() {
      const subData = this.rawData[this.subjectiveKey]
      this.subjectiveData = this.mergeAnswerColumns(subData, "题号", "得分率", "正确答案", "人数")
      this.subjectiveData.name = this.subjectiveData.name || this.subjectiveKey
    },
    resolveReportScore() {
      this.scoreData = this.rawData[this.scoreKey];
      this.scoreData.name = this.scoreData.name || this.scoreKey
    },
    resolveRates() {
      this.rateData = this.rawData[this.rateKey];
      this.rateData.name = this.rateData.name || this.rateKey;
      this.rateColumnTemplateConfig = {}
      this.rateData.columns.forEach((col, idx) => {
        if (idx > 0) this.rateColumnTemplateConfig[col] = "template-go-question"
      })
    },
    resolveReportKnowledge() {
      this.knowledgeData = this.rawData[this.knowledgeKey];
      this.knowledgeData.name = this.knowledgeData.name || this.knowledgeKey
    },
    showQuestionByNo(no) {
      const questionIdMapping = this.rawData.questionSeqId.options;
      const questionId = questionIdMapping[no];
      if (!questionId) {
        this.msgError(`未匹配到题号'${no}'的题目编号`)
        return
      }
      this.analysisQuestionId = questionId
      this.analysisExamineeId = this.rawData[this.summaryKey].options.examineeId
      this.dialogVisible = true
    }
  },
};
</script>
<style lang="scss" scoped>
.mx-question-no-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.mx-question-item {
  margin: 0 5px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;

  width: 20px;
  height: 20px;
  border: 1px solid #555555;
  color: #555555;
  border-radius: 10px;
}
</style>
