<template>
  <div class="elem-score-table">
    <table class="score-table">
      <tr>
        <th style="width: 60px; min-width: 40px">题号</th>
        <th
          v-for="(item, index) in detailNums"
          :key="item"
          :style="{ minWidth: (index < 9 ? 30 : 40) + 'px' }"
        >
          {{ item }}
        </th>
        <th style="width: 60px; min-width: 40px">总分</th>
        <th style="width: 80px; min-width: 60px">总分人</th>
      </tr>
      <tr>
        <td style="width: 60px; min-width: 40px">得分</td>
        <td
          v-for="(item, index) in detailNums"
          :key="item"
          :style="{ minWidth: (index < 9 ? 30 : 40) + 'px' }"
        ></td>
        <td style="width: 60px; min-width: 40px"></td>
        <td style="width: 80px; min-width: 60px"></td>
      </tr>
    </table>
  </div>
</template>

<script>
import { numberToChinese } from "@/plugins/utils";
export default {
  name: "ElemScoreTable",
  props: {
    data: {
      type: Object,
      default() {
        return {
          detailCount: 5,
        };
      },
    },
  },
  data() {
    return {
      detailNums: [],
    };
  },
  mounted() {
    let detailNums = [];
    for (let i = 0; i < this.data.detailCount; i++) {
      detailNums[i] = numberToChinese(i + 1);
    }
    this.detailNums = detailNums;
  },
  methods: {},
};
</script>
