<template>
  <div class="report-teacher">
    <report-box
      v-for="(page, pindex) in pages"
      :key="pindex"
      title="任课老师分析"
    >
      <div
        v-for="(chart, index) in page.charts"
        :key="`chart-${index}`"
        class="college-chart"
      >
        <v-chart :option="chart" :init-options="initOption"></v-chart>
      </div>
      <table v-if="page.tables.length" class="report-table report-table-border">
        <tr>
          <th>任课老师</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-teacher">
            <div>{{ item.teacher }}</div>
          </td>
          <td class="td-class">
            <div>{{ item.className }}</div>
          </td>
          <td>{{ item.maxScore }}</td>
          <td>{{ item.minScore }}</td>
          <td>{{ item.passCount }}</td>
          <td>{{ item.passRate }}</td>
          <td>{{ item.excellentCount }}</td>
          <td>{{ item.excellentRate }}</td>
          <td>{{ item.avgScore }}</td>
        </tr>
      </table>
    </report-box>
  </div>
</template>

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

export default {
  name: "report-teacher",
  components: { ReportBox },
  data() {
    return {
      pages: [],
      initOption,
    };
  },
  mounted() {
    this.initData();
  },
  computed: {
    ...mapState("report", ["teacher", "teacherClass"]),
  },
  methods: {
    initData() {
      const teacher = this.teacher.map((item) => {
        return {
          ...item,
          name: item.teacher,
        };
      });
      const maxChartCountPerPage = 4;
      const maxTableCountPerPage = 30;
      const groupCharts = sectionArr(teacher, 4).map((data) =>
        getBarTeachersOptions(data)
      );
      let pages = [];
      let curPage = { charts: [], tables: [] };
      groupCharts.forEach((item) => {
        curPage.charts.push(item);
        if (curPage.charts.length === maxChartCountPerPage) {
          pages.push(curPage);
          curPage = { charts: [], tables: [] };
        }
      });
      const firstPageTableCount = Math.floor(
        (maxChartCountPerPage - curPage.charts.length) *
          (maxTableCountPerPage / maxChartCountPerPage)
      );
      const groupTables = sectionArrFirstPage(
        this.teacherClass,
        maxTableCountPerPage,
        firstPageTableCount
      );
      groupTables.forEach((item) => {
        curPage.tables = item;
        pages.push(curPage);
        curPage = { charts: [], tables: [] };
      });
      this.pages = pages;
    },
  },
};
</script>
