<template>
  <div class="report-main-question report-question">
    <report-box v-for="(page, pindex) in pages" :key="pindex" title="大题分析">
      <table v-if="page.tables" class="report-table report-table-border">
        <tr>
          <th class="td-question">题目名称</th>
          <th>题号</th>
          <th>满分</th>
          <th>最高分</th>
          <th>最低分</th>
          <th>平均分</th>
          <th>得分率(%)</th>
          <th>零分人数</th>
          <th>满分人数</th>
        </tr>
        <tr v-for="(item, ind) in page.tables" :key="ind">
          <td class="td-question">
            <div>{{ item.title }}</div>
          </td>
          <td>{{ item.mainNumber }}</td>
          <td>{{ item.score }}</td>
          <td>{{ item.maxScore }}</td>
          <td>{{ item.minScore }}</td>
          <td>{{ item.avgScore }}</td>
          <td>{{ item.scoreRate | progressFilter }}</td>
          <td>{{ item.zeroScoreCount }}</td>
          <td>{{ item.fullScoreCount }}</td>
        </tr>
      </table>
    </report-box>
  </div>
</template>

<script>
import { mapState } from "vuex";
import ReportBox from "./ReportBox.vue";
import { sectionArr } from "./utils";

export default {
  name: "report-main-question",
  components: { ReportBox },
  props: {
    type: String,
  },
  data() {
    return {
      pages: [],
      chartSplitRange: 30,
    };
  },
  computed: {
    ...mapState("report", ["mainQuestionAnalysis"]),
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      const question = this.mainQuestionAnalysis;

      const questionTables = sectionArr(question, this.chartSplitRange);

      const pages = [];
      questionTables.forEach((table) => {
        pages.push({
          charts: null,
          tables: table,
        });
      });

      this.pages = pages;
    },
  },
};
</script>
