<template>
  <el-dialog
    class="score-detail-dialog"
    :visible.sync="modalIsShow"
    title="评分明细"
    top="10px"
    width="500px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    @open="visibleChange"
  >
    <h4>客观题评分明细：</h4>
    <table class="table">
      <tr>
        <td>大题号</td>
        <td>小题号</td>
        <td>答案</td>
        <td>得分</td>
      </tr>
      <tr v-for="(item, ind) in objectiveScoreDetail" :key="ind">
        <td>{{ item.mainNumber }}</td>
        <td>{{ item.subNumber }}</td>
        <td>{{ item.answer }}</td>
        <td>{{ item.score }}</td>
      </tr>
    </table>
    <h4>主观题评分明细：</h4>
    <table class="table">
      <tr>
        <td>大题号</td>
        <td>小题号</td>
        <td>得分</td>
      </tr>
      <tr v-for="(item, ind) in subjectiveScoreDetail" :key="ind">
        <td>{{ item.mainNumber }}</td>
        <td>{{ item.subNumber }}</td>
        <td>{{ item.score }}</td>
      </tr>
    </table>
  </el-dialog>
</template>

<script>
export default {
  name: "score-detail-dialog",
  props: {
    data: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      modalIsShow: false,
      objectiveScoreDetail: [],
      subjectiveScoreDetail: [],
    };
  },
  methods: {
    visibleChange() {
      this.objectiveScoreDetail = JSON.parse(this.data.objectiveScoreDetail);
      this.subjectiveScoreDetail = JSON.parse(this.data.subjectiveScoreDetail);
    },
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    },
  },
};
</script>
