<template>
  <div :class="classes">
    <div class="stdno-empty" v-if="data.examNumberStyle === 'PASTE'">
      <p class="">粘贴条形码区</p>
    </div>
    <div class="stdno-fill" v-if="data.examNumberStyle === 'FILL'">
      <div class="stdno-fill-head">
        <h5>学号</h5>
        <div class="stdno-fill-rect">
          <div
            class="stdno-fill-number"
            v-for="n in examNumberDigit"
            :key="n"
            :style="columnStyles"
          ></div>
        </div>
      </div>
      <div class="stdno-fill-body">
        <div
          class="stdno-fill-list"
          v-for="n in examNumberDigit"
          :key="n"
          :style="columnStyles"
        >
          <div class="stdno-fill-option" v-for="m in 10" :key="m">
            <i>{{ m - 1 }}</i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "head-stdno",
  props: {
    data: {
      type: Object,
    },
  },
  data() {
    return {
      examNumberDigit: this.data.examNumberDigit || 13,
    };
  },
  computed: {
    classes() {
      return ["head-stdno", "card-head-body-spin"];
    },
    columnStyles() {
      return {
        width: (100 / this.examNumberDigit).toFixed(2) + "%",
      };
    },
  },
  methods: {},
};
</script>
