<template>
  <div class="elem-fill-line">
    <div v-if="data.isFirst" class="elem-title">
      {{ data.topicName }}
    </div>
    <div class="elem-body">
      <ul
        v-for="line in data.fillCount"
        :key="line"
        class="elem-fill-quesiton"
        :style="groupStyles"
      >
        <li v-if="line === 1" class="elem-fill-no">
          <span :style="lineNoStyles">{{ data.questionNo }}.</span>
        </li>
        <li
          v-if="line !== data.fillCount"
          class="elem-fill-comma"
          :style="lineNoStyles"
        >
          ,
        </li>
        <li class="elem-fill-line" :style="lineStyles"></li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "ElemFillLine",
  props: {
    data: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {};
  },
  computed: {
    lineStyles() {
      return {
        height: this.data.lineSpacing + "px",
      };
    },
    lineNoStyles() {
      return {
        top: this.data.lineSpacing - 4 + "px",
      };
    },
    groupStyles() {
      return {
        width: 100 / this.data.fillCountPerLine + "%",
      };
    },
  },
  methods: {},
};
</script>
