<template>
  <section class="content">
    <el-form>
      <el-form-item label="统计维度">
        <el-select v-model="type" @change="onSelChange">
          <el-option label="题数" value="count"></el-option>
          <el-option label="分值" value="score"></el-option>
        </el-select>
      </el-form-item>
    </el-form>

    <el-table :data="paperData.data" border :span-method="objectSpanMethod">
      <el-table-column label="题型" align="center">
        <el-table-column
          v-for="(colval, colIndex) in headFirst"
          :key="colIndex"
        >
          <template slot="header">
            <span style="margin-left: 10px">{{ colval }}</span>
          </template>
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row[colIndex] }}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="大题" align="center">
        <el-table-column
          v-for="(colval, colIndex) in headSecond"
          :key="colIndex"
        >
          <template slot="header">
            <span style="margin-left: 10px">{{ colval }}</span>
          </template>
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row[colIndex + 2] }}</span>
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>
  </section>
</template>
<script>
import { QUESTION_API } from "@/constants/constants.js";
import { mapState } from "vuex";

export default {
  props: {
    paperId: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      paperData: {},
      type: "count",
      loading: false,
    };
  },
  computed: {
    ...mapState({ user: (state) => state.user }),
    headFirst: function () {
      if (!this.paperData.head) {
        return null;
      }
      return this.paperData.head.slice(0, 2);
    },
    headSecond: function () {
      if (!this.paperData.head) {
        return null;
      }
      return this.paperData.head.slice(2);
    },
  },
  //初始化查询
  created() {
    this.init();
  },
  methods: {
    onSelChange() {
      this.init();
    },
    objectSpanMethod({ rowIndex, columnIndex }) {
      // console.log(row, column);
      if (columnIndex === 0 && rowIndex === 0) {
        return {
          rowspan: 5,
          colspan: 1,
        };
      }
      if (columnIndex === 0 && rowIndex > 0 && rowIndex < 5) {
        return {
          rowspan: 0,
          colspan: 0,
        };
      }
      if (columnIndex === 0 && rowIndex === 5) {
        return {
          rowspan: 4,
          colspan: 1,
        };
      }
      if (columnIndex === 0 && rowIndex > 5 && rowIndex < 9) {
        return {
          rowspan: 0,
          colspan: 0,
        };
      }
    },

    init() {
      this.$http
        .get(
          QUESTION_API +
            "/paper/question/type?id=" +
            this.paperId +
            "&type=" +
            this.type
        )
        .then((response) => {
          this.paperData = response.data;
        });
    },
  },
};
</script>
