<template>
  <el-dialog
    class="preview-paper-structure-dialog"
    :visible.sync="modalIsShow"
    title="试卷结构"
    top="0"
    width="800px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    fullscreen
    @open="visibleChange"
  >
    <div class="mb-4 tab-btns">
      <el-button
        v-for="tab in dataList"
        :key="tab.paperType"
        size="medium"
        :type="curTab == tab.paperType ? 'primary' : 'default'"
        @click="switchPaper(tab)"
        >{{ tab.paperType }}卷</el-button
      >
    </div>

    <el-table ref="TableList" :data="dataList">
      <el-table-column prop="objective" label="题型">
        <span slot-scope="scope">
          {{ scope.row.objective ? "客观题" : "主观题" }}
        </span>
      </el-table-column>
      <el-table-column prop="mainNumber" label="大题号"></el-table-column>
      <el-table-column prop="subNumber" label="小题号"></el-table-column>
      <el-table-column prop="mainTitle" label="大题名称"></el-table-column>
      <el-table-column prop="totalScore" label="分数"></el-table-column>
      <el-table-column prop="answer" label="答案"></el-table-column>
    </el-table>

    <div slot="footer"></div>
  </el-dialog>
</template>

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

export default {
  name: "preview-paper-structure-dialog",
  props: {
    instance: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      modalIsShow: false,
      dataList: [],
      curTab: "",
      paperList: []
    };
  },
  methods: {
    visibleChange() {
      this.getData();
    },
    async getData() {
      this.dataList = [];
      const data = await examStructurePreviewStructure(this.instance.id);
      this.dataList = data || [];
    },
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    },
    switchPaper(paper) {
      this.curTab = paper.paperType;
      this.paperList = paper.content;
    }
  }
};
</script>
