teachcloud-print-web/card/elements/fill-question/ElemFillQuestion.vue

<template>
  <div :class="classes">
    <div class="elem-title" v-if="isFirstSpin">
      {{ data.parent.topicName }}
    </div>
    <div class="elem-body">
      <ul
        class="group-item"
        v-for="(group, gindex) in questions"
        :key="gindex"
        :style="gindex !== questions.length - 1 ? groupGapStyles : null"
      >
        <li
          class="question-item"
          v-for="(question, qindex) in group"
          :key="qindex"
          :style="getQuestionGapStyles(group, qindex)"
        >
          <span
            class="option-item"
            v-for="(option, oindex) in question"
            :key="oindex"
            :style="optionGapStyles"
          >
            <i>{{ option }}</i>
          </span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "elem-fill-question",
  props: {
    data: {
      type: Object
    }
  },
  computed: {
    isFirstSpin() {
      return (
        this.data.parent &&
        this.data.startNumber === this.data.parent.startNumber
      );
    },
    classes() {
      return [
        "elem-fill-question",
        `elem-fill-question-${this.data.optionDirection}`,
        {
          "elem-fill-question-simple":
            !this.data.isMultiply && !this.data.isBoolean,
          "elem-fill-question-multiply": this.data.isMultiply,
          "elem-fill-question-boolean": this.data.isBoolean,
          "elem-fill-question-first": this.isFirstSpin
        }
      ];
    },
    groupGapStyles() {
      return {
        marginRight: this.data.groupGap + "px"
      };
    },
    // questionGapStyles() {
    //   return this.data.optionDirection === "vertical"
    //     ? { marginRight: this.data.questionGap + "px" }
    //     : { marginBottom: this.data.questionGap + "px" };
    // },
    optionGapStyles() {
      const styles =
        this.data.optionDirection === "vertical"
          ? { marginBottom: this.data.optionGap + "px" }
          : { marginRight: this.data.optionGap + "px" };
      // styles.fontSize = this.data.fontSize;
      return styles;
    }
  },
  data() {
    return {
      questions: []
    };
  },
  methods: {
    parseQuestion(data) {
      let questionNo = data.startNumber;
      let questions = [];
      const choiceList = this.getChoiceList(data);
      if (data.questionDirection === "vertical") {
        const groupNum = Math.ceil(
          data.questionsCount / data.questionCountPerGroup
        );
        for (let i = 0; i < groupNum; i++) {
          questions[i] = [];
          const questionCountPerGroup =
            i === groupNum - 1
              ? data.questionsCount - data.questionCountPerGroup * i
              : data.questionCountPerGroup;
          for (let j = 0; j < questionCountPerGroup; j++) {
            questions[i][j] = [questionNo++, ...choiceList];
          }
        }
      } else {
        for (let i = 0; i < data.questionsCount; i++) {
          const groupIndex = i % data.groupPerLine;
          if (!questions[groupIndex]) questions[groupIndex] = [];
          questions[groupIndex].push([questionNo++, ...choiceList]);
        }
      }
      this.questions = questions;
    },
    getChoiceList(data) {
      if (data.isBoolean) {
        return data.booleanType.split(",");
      } else {
        return "abcdefghijklmnopqrstuv"
          .toUpperCase()
          .slice(0, data.optionCount)
          .split("");
      }
    },
    getQuestionGapStyles(group, qindex) {
      const size = group.length - 1 === qindex ? 0 : this.data.questionGap;
      return this.data.optionDirection === "vertical"
        ? { marginRight: size + "px" }
        : { marginBottom: size + "px" };
    }
  },
  watch: {
    data: {
      immediate: true,
      handler(val) {
        this.parseQuestion(val);
      }
    }
  }
};
</script>