<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 :data="data.payload" v-on="$listeners" v-if="data.type === 1"></course-tag-message>
        <search-tag-message :data="data.payload" v-on="$listeners" v-if="data.type === 2"></search-tag-message>
        <tag-message :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: {
    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: 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>
