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

<script>
export default {
  name: "ElemFillQuestion",
  props: {
    data: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {};
  },
  computed: {
    classes() {
      return [
        "elem-fill-question",
        {
          "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.data.isFirst,
        },
      ];
    },
    signName() {
      if (this.data.isBoolean) {
        return "判断";
      } else if (this.data.isMultiply) {
        return "多选";
      } else {
        return "单选";
      }
    },
    signClasses() {
      return [
        "fill-question-sign",
        {
          "is-simple": !this.data.isMultiply && !this.data.isBoolean,
          "is-multiply": this.data.isMultiply,
          "is-boolean": this.data.isBoolean,
        },
      ];
    },
    groupGapStyles() {
      return {
        marginRight: this.data.groupGap + "px",
      };
    },
    optionGapStyles() {
      const styles = { marginRight: this.data.optionGap + "px" };
      return styles;
    },
  },
  methods: {
    getQuestionGapStyles(group, qindex) {
      const size = group.length - 1 === qindex ? 0 : this.data.questionGap;
      return {
        marginBottom: size + "px",
      };
    },
  },
};
</script>
