<template>
  <div class="custom-element-wrapper">
    <image-element
        v-if="this.payload.data === 'image'"
        :isMine=isMine
        :payload="Object.assign(message.payload,{ imageInfoArray:[ { url: message.payload.description } ] })"
        :message="message"/>
    <video-element
        v-else-if="this.payload.data === 'video'"
        :isMine="isMine"
        :payload="Object.assign(message.payload,{ videoUrl: message.payload.description })"
        :message="message"
    />
    <template v-else>
      <message-bubble :isMine=isMine :message=message>
        <message-group-live-status v-if="text.isFromGroupLive && text.isFromGroupLive === 1" :liveInfo='text'/>
        <template v-else>{{ text }}</template>
      </message-bubble>
    </template>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import MessageBubble from '../message-bubble'
import MessageGroupLiveStatus from '../message-group-live-status'
import ImageElement from '../message-elements/image-element.vue'
import VideoElement from './video-element'

export default {
  name: 'CustomElement',
  props: {
    payload: {
      type: Object,
      required: true
    },
    message: {
      type: Object,
      required: true
    },
    isMine: {
      type: Boolean
    }
  },
  components: {
    VideoElement,
    MessageBubble,
    MessageGroupLiveStatus,
    ImageElement,
  },
  computed: {
    ...mapState({
      currentUserProfile: state => state.user.currentUserProfile
    }),
    text() {
      return this.translateCustomMessage(this.payload)
    },
    rate() {
      return parseInt(this.payload.description)
    }
  },
  methods: {
    guid() {
      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
        let r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8)
        return v.toString(16)
      })
    },
    translateCustomMessage(payload) {
      let videoPayload = {}
      try {
        videoPayload = JSON.parse(payload.data)
      } catch (e) {
        videoPayload = {}
      }
      if (payload.data === 'group_create') {
        return `${payload.extension}`
      }
      if (videoPayload.roomId) {
        videoPayload.roomId = videoPayload.roomId.toString()
        videoPayload.isFromGroupLive = 1
        return videoPayload
      }
      if (payload.text) {
        return payload.text
      } else {
        return '[自定义消息]'
      }
    },
  }
}
</script>

<style lang="stylus" scoped>
.image-element
  max-width 250px
  cursor zoom-in
  width: 100%

.text
  font-weight bold

.title
  font-size 16px
  font-weight 600
  padding-bottom 10px

.survey
  background-color white
  color black
  padding 20px
  display flex
  flex-direction column

.suggestion
  padding-top 10px
  font-size 14px
</style>