<template>
  <div class="message-card" :class="classes">
    <div class="message-card-content">
      <slot :data="data.payload">
        <div class="message-card-text" v-if="data.type === 0">{{data.payload.text}}</div>
        <course-tag-message
          :courseId="courseId"
          :isTest="isTest"
          :data="data.payload"
          v-on="$listeners"
          v-if="data.type === 1"
        ></course-tag-message>
        <search-tag-message
          :courseId="courseId"
          :isTest="isTest"
          :data="data.payload"
          v-on="$listeners"
          v-if="data.type === 2"
        ></search-tag-message>
        <tag-message
          :courseId="courseId"
          :data="data.payload"
          v-on="$listeners"
          v-if="data.type === 3"
        ></tag-message>
      </slot>
    </div>
  </div>
</template>
<script>
import CourseTagMessage from './courseTagMessage.vue'
import SearchTagMessage from './searchTagMessage.vue'
import TagMessage from './tagMessage.vue'

export default {
  name: 'MessageCard',
  props: {
    courseId: { type: String },
    isTest: { type: Boolean, default: false },
    data: { type: Object }
  },
  components: { CourseTagMessage, SearchTagMessage, TagMessage },
  computed: {
    isMyPublish() {
      return this.data.from === 'user'
    },
    classes() {
      return {
        'is-my': this.isMyPublish,
        'is-system': !this.isMyPublish
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.message-card {
  clear: both;
  margin-bottom: 20px;
}
.message-card-text {
  display: inline-block;
  padding: 10px;
  background-color: #fff;
  border-radius: 6px;
}
.is-system {
  .message-card-content {
    text-align: left;
  }
}
.is-my {
  .message-card-content {
    text-align: right;
  }
  .message-card-text {
    color: #fff;
    background-color: #67a8ff;
  }
}
</style>
