<template>
  <div :class="clses" :id="data.id">
    <template v-if="data.type === 'text'">
      <p>{{ data.content }}</p>
    </template>
    <template v-else>
      <component :is="getTypeComp" :data="data.content"></component>
    </template>
  </div>
</template>

<script>
import TopicAnswer from "./TopicAnswer.vue";
import TopicTitle from "./TopicTitle.vue";

export default {
  name: "cont-item",
  components: { TopicAnswer, TopicTitle },
  props: {
    data: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  computed: {
    clses() {
      return ["cont-item", `cont-${this.data.cls}`];
    },
    getTypeComp() {
      return this.data.cls.indexOf("topic-answer") !== -1
        ? "topic-answer"
        : "topic-title";
    },
  },
  data() {
    return {};
  },
  methods: {},
};
</script>
