<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"
    />
    <audio-element
      v-else-if="this.payload.data === 'audio'"
      :isMine="isMine"
      :payload="message.payload"
      :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";
import AudioElement from "./audio-element.vue";
export default {
  name: "CustomElement",
  props: {
    payload: {
      type: Object,
      required: true,
    },
    message: {
      type: Object,
      required: true,
    },
    isMine: {
      type: Boolean,
    },
  },
  components: {
    VideoElement,
    MessageBubble,
    MessageGroupLiveStatus,
    ImageElement,
    AudioElement,
  },
  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>