<template>
  <div class="message-wrapper" :class="messagePosition">
    <!-- 会话类型：C2C(Client to Client, 端到端) 会话 -->
    <div v-if="currentConversationType === TIM.TYPES.CONV_C2C" class="c2c-layout" :class="messagePosition">
      <div class="col-1 profile">
        <!-- 头像 -->
        <el-avatar v-if="isMine" :size="60" :src="avatar" @error="handleImgError">
          <div class="avatar">{{ nick }}</div>
        </el-avatar>
        <el-avatar v-else :size="60" :src="avatar" @error="handleImgError">
          <div class="avatar">{{ nickname }}</div>
        </el-avatar>
      </div>
      <div class="col-2">
        <!-- 消息主体 -->
        <div class="content-wrapper">
          <text-element
            v-if="message.type === TIM.TYPES.MSG_TEXT"
            :isMine="isMine"
            :payload="message.payload"
            :message="message"
          />
          <sound-element
            v-else-if="message.type === TIM.TYPES.MSG_SOUND || message.type === TIM.TYPES.MSG_AUDIO"
            :isMine="isMine"
            :payload="message.payload"
            :message="message"
          />
          <file-element
            v-else-if="message.type === TIM.TYPES.MSG_FILE"
            :isMine="isMine"
            :payload="message.payload"
            :message="message"
          />
          <image-element
            v-else-if="message.type === TIM.TYPES.MSG_IMAGE"
            :isMine="isMine"
            :payload="message.payload"
            :message="message"
          />
          <video-element
            v-else-if="message.type === TIM.TYPES.MSG_VIDEO"
            :isMine="isMine"
            :payload="message.payload"
            :message="message"
          />
        </div>
      </div>
      <div class="col-3">
        <!-- 消息状态 -->
      </div>
    </div>
    <!-- 会话类型：GROUP(群组) 会话 -->
    <div v-if="currentConversationType === TIM.TYPES.CONV_GROUP" class="group-layout" :class="messagePosition">
      <!-- 头像 群组没有获取单个头像的接口，暂时无法显示头像-->
      <div class="col-1">
        <el-avatar :size="60" :src="avatar" @error="handleImgError">
          <div class="avatar">{{ nick }}</div>
        </el-avatar>
      </div>
      <div class="col-2">
        <!-- 消息主体 -->
        <div class="content-wrapper">
          <text-element
            v-if="message.type === TIM.TYPES.MSG_TEXT"
            :isMine="isMine"
            :payload="message.payload"
            :message="message"
          />
          <sound-element
            v-else-if="message.type === TIM.TYPES.MSG_SOUND || message.type === TIM.TYPES.MSG_AUDIO"
            :isMine="isMine"
            :payload="message.payload"
            :message="message"
          />
          <file-element
            v-else-if="message.type === TIM.TYPES.MSG_FILE"
            :isMine="isMine"
            :payload="message.payload"
            :message="message"
          />
          <image-element
            v-else-if="message.type === TIM.TYPES.MSG_IMAGE"
            :isMine="isMine"
            :payload="message.payload"
            :message="message"
          />
          <video-element
            v-else-if="message.type === TIM.TYPES.MSG_VIDEO"
            :isMine="isMine"
            :payload="message.payload"
            :message="message"
          />
        </div>
      </div>
      <div class="col-3">
        <!-- 消息状态 -->
      </div>
    </div>
    <!-- TODO 会话类型：SYSTEM(系统) 会话 -->
  </div>
</template>

<script>
import { mapState } from "vuex";
import textElement from "@/components/timApp/message/text-element.vue";
import soundElement from "@/components/timApp/message/sound-element.vue";
import fileElement from "@/components/timApp/message/file-element.vue";
import imageElement from "@/components/timApp/message/image-element.vue";
import videoElement from "@/components/timApp/message/video-element.vue";

export default {
  name: "MessageItem",
  components: {
    textElement,
    soundElement,
    fileElement,
    imageElement,
    videoElement,
  },
  props: {
    message: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      renderDom: [],
      isImgError: false,
    };
  },
  computed: {
    ...mapState({
      currentConversation: (state) => state.conversation.currentConversation,
      currentUserProfile: (state) => state.user.currentUserProfile,
    }),
    avatar() {
      if (this.currentConversation.type === "C2C") {
        return this.message.avatar;
      } else if (this.currentConversation.type === "GROUP") {
        console.log("currentConversation", this.currentUserProfile);
        return this.isMine ? this.currentUserProfile.avatar : this.message.avatar;
      } else {
        return "";
      }
    },
    nick() {
      console.log("message-item", this.message);
      return this.message.nick;
    },
    nickname() {
      return this.currentConversation?.info?.name;
    },
    currentConversationType() {
      return this.currentConversation.type;
    },
    isMine() {
      // console.log(this.currentUserProfile, this.currentConversation);
      return this.message.flow === "out";
    },
    messagePosition() {
      if (["TIMGroupTipElem", "TIMGroupSystemNoticeElem"].includes(this.message.type)) {
        return "position-center";
      }
      if (this.message.isRevoked) {
        // 撤回消息
        return "position-center";
      }
      if (this.isMine) {
        return "position-right";
      } else {
        return "position-left";
      }
    },
  },
  methods: {
    handleImgError() {
      this.isImgError = true;
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .el-avatar > img {
  width: 100%;
  object-fit: contain !important;
}
.message-wrapper {
  margin: 20px 0;

  .content-wrapper {
    display: flex;
    align-items: center;
  }
}
.group-layout,
.c2c-layout,
.system-layout {
  display: flex;
  align-items: center;
  .col-1 {
    .avatar {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);
      background: #0e71ff;
      font-size: 16px;
      font-weight: 400;
      color: #ffffff;
    }
  }

  .group-member-avatar {
    cursor: pointer;
  }

  .col-2 {
    display: flex;
    flex-direction: column;
    // max-width 50% // 此设置可以自适应宽度，目前由bubble限制
  }

  .col-3 {
    width: 30px;
  }

  &.position-left {
    .col-2 {
      align-items: flex-start;
    }
  }

  &.position-right {
    flex-direction: row-reverse;

    .col-2 {
      align-items: flex-end;
    }
  }

  &.position-center {
    justify-content: center;
  }
}

.c2c-layout {
  .col-2 {
    .base {
      margin-top: 3px;
    }
  }
}

.group-layout {
  .col-2 {
    .chat-bubble {
      margin-top: 5px;
      outline: none;
    }
  }
}
</style>
