<template>
  <message-bubble :isMine="isMine" :message="message">
    <template v-for="(item, index) in contentList">
      <span class="text-box" :key="index" v-if="item.name === 'text'">{{ item.text }}</span>
      <img v-else-if="item.name === 'img'" :src="item.src" width="20px" height="20px" :key="index" alt="" />
    </template>
  </message-bubble>
</template>

<script>
import messageBubble from "@/components/timApp/message/message-bubble.vue";
import { decodeText } from "@/utils/decodeText";

export default {
  name: "TextElement",
  components: {
    messageBubble,
  },
  props: {
    payload: {
      type: Object,
      required: true,
    },
    message: {
      type: Object,
      required: true,
    },
    isMine: {
      type: Boolean,
    },
  },
  computed: {
    contentList() {
      return decodeText(this.payload);
    },
  },
};
</script>

<style lang="scss" scoped>
.text-box {
  display: inline-block;
  width: 100%;
  overflow: hidden;
}
</style>
