<template>
  <div class="paper-container" id="paper" v-loading="loading">
    <paper-header :title="rawData.name" :total-score="totalScore" />
    <paper-type-card type="type" :name="typeKey" :columns="typeStat.columns" :rows="typeStat.rows" v-if="typeStat.rows"></paper-type-card>
    <div class="paper-table-pie">
      <paper-type-card type="difficult" class="paper-diffi-tb" :name="difficultKey" :columns="difficultStat.columns" :rows="difficultStat.rows" v-if="difficultStat.rows"></paper-type-card>
      <el-card class="paper-diffi-pie">
        <paper-pie-chart v-if="difficultPieData.length" :data="difficultPieData"></paper-pie-chart>
      </el-card>
    </div>
    <paper-type-card type="knowledge" :name="knowledgeKey" :columns="knowledgeStat.columns" :rows="knowledgeStat.rows" v-if="knowledgeStat.rows"></paper-type-card>
    <el-card v-for="(typeGroup, index) in typeGroupedQuestions" :key="typeGroup.label" class="paper-type-group">
      <div class="paper-subTitle">
        {{ groupOpt[index] }}、{{ typeGroup.label }}
      </div>
      <div v-for="question in typeGroup.questions" :key="question.questionId" class="paper-question">
        <mx-seperator style="margin: 0 -20px 15px -20px" />
        <div class="">
          <!-- 大题 -->
          <div style="display: flex; justify-content: flex-start">
            <div>
              {{ question.seq || 1 }}、({{ question.scoreTotal }}分)<span v-html="'\u00a0'" />
            </div>
            <div class="answer_main_title" style="flex: 1" v-html="question.title"></div>
          </div>
          <!-- 小题 -->
          <div style="padding-left: 50px" v-if="question.subQuestions">
            <div style="margin-bottom: 15px" v-for="(subQuestion, ix) in question.subQuestions" :key="subQuestion.questionId">
              <div v-html="ix + 1 + '、' + subQuestion.title"></div>
              <div style="margin-top: 20px" v-if="subQuestion.typeId == 1">
                <div v-for="(opt, idx) in subQuestion.options" :key="opt">
                  <div style="margin-bottom: 15px" v-html="selectOpt[idx] + ' 、 ' + opt"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <template v-if="question.typeId == 1">
            <div style="margin-top: 20px">
              <div v-for="(itemOpt, idx) in question.options" :key="idx">
                <el-radio style="margin-bottom: 15px" :label="selectOpt[idx]" border size="medium">{{ selectOpt[idx] + " 、 "
                  }}<span style="white-space: normal" v-html="itemOpt"></span></el-radio>
              </div>
            </div>
          </template>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
import { previewEvaluationForTeacher } from "@/api/webApi/front";
import paperHeader from "./paperHeader.vue";
import PaperTypeCard from "./paperTypeCard.vue";
import PaperPieChart from "./paperPieChart.vue";
export default {
  components: { paperHeader, PaperTypeCard, PaperPieChart },
  props: {
    evaluationId: {
      type: Number | String,
      default: "",
    },
  },
  data() {
    return {
      loading: false,
      selectOpt: ["A", "B", "C", "D", "E", "F", "G"],
      groupOpt: ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十"],
      totalScore: "",
      rawData: {},
      typeStat: {},
      typeKey: "题型分析",
      difficultStat: {},
      difficultKey: "难度分析",
      difficultPieData: [],
      knowledgeStat: {},
      knowledgeKey: "知识点分析",
      typeGroupedQuestions: [],
    };
  },
  created() {
    this.preparePreviewData();
  },
  methods: {
    preparePreviewData() {
      this.loading = true;
      previewEvaluationForTeacher({ evaluationId: this.evaluationId }).then(
        (res) => {
          console.log("previewEvaluationForTeacher res", res);
          if (res.code == 200 || res.code == 0) {
            this.rawData = res.data;
            this.resolveQuestionStat();
            this.resolveGroupQuestions();
            this.resolvePieData();
            this.$nextTick(() => this.mxGlobal.MathQueue("paper"));
          } else {
            this.msgError(res.msg || "previewEvaluationForTeacher 请求异常");
          }
          this.loading = false;
        }
      );
    },
    resolveGroupQuestions() {
      let currentType = null;
      let sumScore = 0;
      this.rawData.questions.forEach((q) => {
        if (!currentType || currentType.label != q.type) {
          currentType = {
            value: q.typeId,
            label: q.type,
            questions: [],
          };
          this.typeGroupedQuestions.push(currentType);
        }
        sumScore += q.scoreTotal * 1;
        currentType.questions.push(q);
      });
      this.totalScore = sumScore;
    },
    resolveQuestionStat() {
      this.typeStat = this.rawData.questionStat[this.typeKey];
      this.difficultStat = this.rawData.questionStat[this.difficultKey];
      this.knowledgeStat = this.rawData.questionStat[this.knowledgeKey];
    },
    resolvePieData() {
      const startIdx = 1;
      let results = [];
      for (
        let index = startIdx;
        index < this.difficultStat.columns.length;
        index++
      ) {
        const name = this.difficultStat.columns[index];
        let summary = 0;
        for (let idx = 0; idx < this.difficultStat.rows.length; idx++) {
          const val = this.difficultStat.rows[idx][index];
          summary += val * 1;
        }
        results.push({
          name: name,
          value: summary,
        });
      }
      this.difficultPieData = results;
      console.log("difficultPieData", this.difficultPieData);
    },
  },
};
</script>
<style scoped>
.paper-container {
  background-color: #f5f5f5;
  border-radius: 8px;
}
.paper-subTitle {
  margin-left: 10px;
  font-size: 14px;
  font-family: "PingFangSC-Medium", "PingFang SC";
  font-weight: bolder;
  color: #171640;
}
.paper-table-pie {
  margin-top: 10px;
  margin-bottom: 10px;
  display: flex;
}
.paper-diffi-tb {
  flex: 1;
  margin-right: 10px;
}
.paper-diffi-pie {
  background-color: white;
  min-height: 390px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.paper-type-group {
  background-color: #ffffff;
  margin-top: 10px;
  padding: 10px 0;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
}
.paper-question {
  padding: 10px;
}

.el-radio.is-bordered.is-error {
  border-color: #f56c6c;
}

.el-radio.is-bordered.is-checked {
  border-color: #47c6a2;
}

/deep/ .el-radio__input.is-checked .el-radio__inner {
  border-color: #47c6a2;
  background: #47c6a2;
}

.el-radio.is-bordered.is-error /deep/ .el-radio__label {
  color: #f56c6c;
}

.el-radio.is-bordered.is-checked /deep/ .el-radio__label {
  color: #47c6a2;
}

.fenshu /deep/ .el-input__inner {
  width: 50%;
  line-height: 40px;
  border: none;
  background: #eee;
  color: #333;
  text-align: center;
}

.el-radio--medium.is-bordered {
  height: auto;
  padding-bottom: 8px;
}

.fenshu:focus-visible {
  outline: none;
}

/deep/ .el-textarea__inner {
  height: 180px;
}
</style>