<template>
  <div class="report-question">
    <report-box
      v-for="(page, pindex) in pages"
      :key="pindex"
      :title="page.title"
    >
      <div v-if="page.charts" class="question-chart" :style="page.charts.style">
        <v-chart
          :option="page.charts.chart"
          :init-options="initOption"
        ></v-chart>
      </div>
      <table v-if="page.tables" class="report-table report-table-border">
        <tr>
          <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.subNumber }}</td>
          <td>{{ item.score }}</td>
          <td>{{ item.avgScore }}</td>
          <td>{{ item.scoreRate | progressFilter }}</td>
          <td>{{ item.fullScoreRate | progressFilter }}</td>
        </tr>
      </table>
    </report-box>
  </div>
</template>

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

export default {
  name: "report-question",
  components: { ReportBox },
  props: {
    type: String,
  },
  data() {
    return {
      questionCharts: [],
      questionTables: [],
      pages: [],
      chartSplitRange: 30,
      initOption,
    };
  },
  computed: {
    ...mapState("report", ["objective", "subjective"]),
    typeName() {
      return this.type === "subjective" ? "主观题" : "客观题";
    },
    title() {
      return `${this.typeName}成绩分析`;
    },
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      if (this.type === "subjective") {
        this.pages = this.buildPapers(this.subjective);
        return;
      }

      const pages = [];
      this.objective.forEach((item) => {
        const result = this.buildPapers(
          item.list,
          this.objective.length > 1 ? item.paperType : ""
        );
        pages.push(...result);
      });

      this.pages = pages;
    },
    buildPapers(question, paperType = "") {
      const questionCharts = sectionArr(question, this.chartSplitRange).map(
        (data) => {
          return {
            chart: getBarPointTopicOptions(data),
            count: data.length,
            style: this.getChartStyle(data.length),
          };
        }
      );
      const questionTables = sectionArr(question, this.chartSplitRange);

      const title = paperType
        ? `${this.title}-${paperType}卷`
        : `${this.title}`;

      let pages = [];
      if (question.length <= 14) {
        pages = [
          {
            title,
            charts: questionCharts[0],
            tables: questionTables[0],
          },
        ];
      } else {
        questionCharts.forEach((chart) => {
          pages.push({
            title,
            charts: chart,
            tables: null,
          });
        });
        questionTables.forEach((table) => {
          pages.push({
            title,
            charts: null,
            tables: table,
          });
        });
      }
      return pages;
    },
    getChartStyle(count) {
      const labelHeight = 28;
      return {
        height: `${100 + count * labelHeight}px`,
      };
    },
  },
};
</script>
