<template>
  <el-dialog
    title="题型分布"
    width="100%"
    :visible.sync="modalIsShow"
    :modal="false"
    append-to-body
    custom-class="side-dialog"
    @open="visibleChange"
  >
    <el-form>
      <el-form-item label="统计维度">
        <el-select v-model="type" @change="getPaperData">
          <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>
  </el-dialog>
</template>

<script>
import { paperQtypeInfoApi } from "../api";

export default {
  name: "PaperQuestypeInfo",
  props: {
    paperId: {
      type: [String, Number],
      default: "",
    },
  },
  data() {
    return {
      modalIsShow: false,
      type: "count",
      paperData: { head: [] },
      headFirst: [],
      headSecond: [],
    };
  },
  methods: {
    visibleChange() {
      this.getPaperData();
    },
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    },
    async getPaperData() {
      const res = await paperQtypeInfoApi({
        paperId: this.paperId,
        type: this.type,
      });
      this.paperData = res.data;
      this.headFirst = this.paperData.head.slice(0, 2);
      this.headSecond = this.paperData.head.slice(2);
    },
    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,
        };
      }
    },
  },
};
</script>
