<template>
  <div class="replies-item" :class="!isRoot ? 'replies-item-normal' : ''">
    <div class="message-bubble" ref="htmlRefHook">
      <img
        class="avatar"
        :src="
          message?.avatar ||
          'https://news-info.ks3-cn-beijing.ksyuncs.com/07/1690787574969.png'
        "
        onerror="this.src='https://news-info.ks3-cn-beijing.ksyuncs.com/07/1690787574969.png'"
      />
      <main class="message-area">
        <div class="message-area-title">
          <label class="name">
            {{
              isRoot
                ? message.nameCard || message.nick || message.from
                : message.messageSender
            }}
          </label>
          <label class="time">
            {{
              caculateTimeago(
                (isRoot ? message?.time : message?.messageTime) * 1000
              )
            }}
          </label>
        </div>
        <div class="content content-in">
          <MessageText
            v-if="
              message.messageType === constant.typeText ||
              message.type === TIM.TYPES.MSG_TEXT ||
              !isRoot
            "
            :data="
              handleTextMessageShowContext(
                isRoot
                  ? message
                  : { payload: { text: message?.messageAbstract } }
              )
            "
          />
          <span
            v-if="
              message.messageType === constant.typeCustom ||
              message.type === TIM.TYPES.MSG_CUSTOM
            "
          >
            {{ handleCustomMessageShowContext(message)?.custom }}
          </span>
          <img
            v-if="
              message.messageType === constant.typeImage ||
              message.type === TIM.TYPES.MSG_IMAGE
            "
            class="message-img"
            :src="message?.payload?.imageInfoArray[1].url"
          />
          <div
            v-if="
              message.messageType === constant.typeAudio ||
              message.type === TIM.TYPES.MSG_AUDIO
            "
            class="message-audio"
            :style="`width: ${message?.payload?.second * 10 + 40}Px`"
          >
            <i class="icon icon-voice"></i>
            <label>{{ message?.payload?.second }}s</label>
          </div>
          <div
            v-if="
              message.messageType === constant.typeVideo ||
              message.type === TIM.TYPES.MSG_VIDEO
            "
            class="message-video-cover"
          >
            <img
              class="message-videoimg"
              :src="message?.payload?.snapshotUrl || message?.payload?.thumbUrl"
            />
          </div>
          <img
            v-if="
              message.messageType === constant.typeFace ||
              message.type === TIM.TYPES.MSG_FACE
            "
            class="message-img"
            :src="url"
          />
          <div
            v-if="
              message.messageType === constant.typeFile ||
              message.type === TIM.TYPES.MSG_FILE
            "
            class="message-file"
          >
            <i class="icon icon-files"></i>
            <div class="message-file-content">
              <label>{{ message?.payload?.fileName }}</label>
              <span>
                {{
                  handleFileMessageShowContext(message)?.size ||
                  message?.payload?.fileSize
                }}
              </span>
            </div>
          </div>
          <MessageEmojiReact :message="message" type="content" />
        </div>
      </main>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, watchEffect } from 'vue';
import { Message } from '../../interface';
import {
  handleTextMessageShowContext,
  handleCustomMessageShowContext,
  handleFileMessageShowContext
} from '../../utils/utils';
import { MessageText, MessageEmojiReact } from '../../components';
import { caculateTimeago } from '../../../utils';
import constant from '../../../constant';
import TIM from '../../../../../TUICore/tim/index';
const RepliesItem = defineComponent({
  props: {
    message: {
      type: Object,
      default: () => ({})
    },
    isH5: {
      type: Boolean,
      default: false
    },
    isRoot: {
      type: Boolean,
      default: false
    }
  },
  components: {
    MessageText,
    MessageEmojiReact
  },
  setup(props: any, ctx: any) {
    const data = reactive({
      message: {} as Message,
      isH5: false,
      url: '',
      isRoot: false,
      constant,
      TIM
    });
    watchEffect(() => {
      data.message = props.message;
      data.isH5 = props.isH5;
      data.isRoot = props.isRoot;
      if (data.message.type === TIM.TYPES.MSG_FACE) {
        data.url = `https://web.sdk.qcloud.com/im/assets/face-elem/${data.message?.payload?.data}@2x.png`;
      }
    });
    return {
      ...toRefs(data),
      handleTextMessageShowContext,
      handleCustomMessageShowContext,
      handleFileMessageShowContext,
      caculateTimeago
    };
  }
});
export default RepliesItem;
</script>
<style lang="scss" scoped>
.replies-item {
  padding: 15Px;
  width: auto;
  &-normal {
    padding: 12.8Px 15Px 0 17Px;
    .message-bubble {
      padding-bottom: 0;
      .avatar {
        width: 48Px;
        height: 48Px;
        border-radius: 8Px;
      }
      .message-area {
        padding: 0 0 8Px 0;
        margin: 0 0 0 16Px;
        border-bottom: 0.1Px solid #dbdbdb;
        &-title {
          .name {
            font-size: 14Px;
            line-height: 20Px;
          }
          .time {
            font-size: 12Px;
            line-height: 18Px;
          }
        }
        .content,
        .content-in {
          background: inherit;
          border-radius: 0;
          padding: 0;
          line-height: 22Px;
        }
      }
    }
  }
  .avatar {
    width: 36Px;
    height: 36Px;
    border-radius: 5Px;
  }
  .message-bubble {
    width: 100%;
    display: flex;
    padding-bottom: 5Px;
  }
  .line-left {
    border: 1Px solid rgba(0, 110, 255, 0.5);
  }

  .message-area {
    max-width: calc(100% - 54Px);
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0 8Px;
    flex: 1;
    &-title {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      .name,
      .time {
        padding-bottom: 4Px;
        font-weight: 400;
        font-size: 0.8rem;
        color: #999999;
        letter-spacing: 0;
      }
      .name {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    .content {
      padding: 12Px;
      font-weight: 400;
      font-size: 14Px;
      color: #000000;
      letter-spacing: 0;
      word-wrap: break-word;
      word-break: break-all;
      width: fit-content;
      &-in {
        background: #f2f2f2;
        border-radius: 0Px 10Px 10Px 10Px;
        .message-img,
        .message-videoimg {
          width: inherit;
          height: inherit;
          max-height: 100%;
          max-width: 100%;
          max-height: 300Px;
        }
      }
    }
  }
  .message-label {
    align-self: flex-end;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    font-size: 12Px;
    color: #b6b8ba;
    word-break: keep-all;
  }
  .message-file {
    flex: 1;
    display: flex;
    cursor: pointer;
    .message-file-content {
      flex: 1;
      display: flex;
      flex-direction: column;
    }
  }

  .message-audio {
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    max-width: 100%;
    overflow: hidden;
    .icon {
      margin: 0 4Px;
    }
    audio {
      width: 0;
      height: 0;
    }
  }
  .reserve {
    flex-direction: row-reverse;
  }
}
</style>
