<template>
  <div
    v-if="
      referenceMessage?.messageID &&
      allMessageID.indexOf(referenceMessage.messageID) !== -1
    "
    :class="`${type} ${message.flow === 'in' && type + '-reverse'}`"
  >
    <p class="message-reference-user">
      <span class="nick">
        {{ referenceForShow.nick || referenceForShow.from }}
      </span>
      <span class="colon">{{ type === 'reference' ? ':' : '' }}</span>
    </p>
    <div
      class="face-box"
      v-if="referenceMessage.messageType === constant.typeText"
    >
      <div v-for="(item, index) in face" :key="index">
        <span class="text-box" v-if="item.name === 'text'">
          {{ item.text }}
        </span>
        <img class="text-img" v-else-if="item.name === 'img'" :src="item.src" />
      </div>
    </div>
    <span v-if="referenceMessage.messageType === constant.typeCustom">
      {{ referenceMessage.messageAbstract }}
    </span>
    <img
      v-if="referenceMessage.messageType === constant.typeImage"
      class="message-img"
      :src="referenceForShow.payload.imageInfoArray[1].url"
    />
    <div
      v-if="referenceMessage.messageType === constant.typeVideo"
      class="message-video-cover"
    >
      <img
        class="message-videoimg"
        :src="
          referenceForShow?.payload?.snapshotUrl ||
          referenceForShow?.payload?.thumbUrl
        "
      />
    </div>
    <img
      v-if="referenceMessage.messageType === constant.typeFace"
      class="message-img"
      :src="url"
    />
    <span
      v-if="
        referenceMessage.messageType === constant.typeFile ||
        referenceMessage.messageType === constant.typeAudio
      "
    >
      {{ referenceMessage?.messageAbstract }}
    </span>
  </div>
  <div v-else :class="`${type} ${message.flow === 'in' && type + '-reverse'}`">
    <p>{{ referenceMessage?.messageSender }}</p>
    <span>{{ referenceMessage?.messageAbstract }}</span>
  </div>
</template>
<script lang="ts">
import { Message } from '../interface';
import { defineComponent, reactive, toRefs, watch, watchEffect } from 'vue';
import constant from '../../constant';
const MessageReference = defineComponent({
  props: {
    message: {
      type: Object,
      default: {} as Message
    },
    referenceMessage: {
      type: Object,
      default: () => ({})
    },
    referenceForShow: {
      type: Object,
      default: () => ({})
    },
    face: {
      type: Array,
      default: () => []
    },
    url: {
      type: String,
      default: ''
    },
    allMessageID: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      deafault: ''
    }
  },
  setup(props: any, ctx: any) {
    const data = reactive({
      message: {},
      referenceMessage: {},
      referenceForShow: {},
      allMessageID: '',
      face: [],
      url: '',
      type: ''
    });
    watchEffect(() => {
      data.message = props.message;
      data.referenceMessage = props.referenceMessage;
      data.referenceForShow = props.referenceForShow;
      data.face = props.face;
      data.url = props.url;
      data.allMessageID = props.allMessageID;
      data.type = props.type;
    });
    watch(
      () => props.referenceForShow,
      () => {
        data.referenceForShow = props.referenceForShow;
      },
      {
        deep: true
      }
    );
    return {
      ...toRefs(data),
      constant
    };
  }
});
export default MessageReference;
</script>
<style lang="scss" scoped>
@import url('../../../styles/common.scss');
@import url('../../../styles/icon.scss');
.reference {
  width: 100%;
  display: flex;
  flex-direction: inherit;
  justify-content: center;
  padding: 10Px;
  line-height: 20Px;
  .message-img,
  .message-video-cover,
  .message-videoimg {
    max-width: min(calc(100vw - 230Px), 300Px);
    max-height: min(calc(100vw - 230Px), 300Px);
  }
  .face-box {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    &-name {
      padding-right: 5Px;
    }
    .text-img {
      width: 20Px;
      height: 20Px;
    }
  }
  p {
    font-family: PingFangSC-Regular;
    font-weight: 400;
    font-size: 12Px;
    color: #999999;
    letter-spacing: 0;
    padding-right: 5Px;
    max-width: 100Px;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    white-space: nowrap;
  }
  span {
    line-height: 20Px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    font-size: 12Px;
    color: #999999;
    letter-spacing: 0;
    letter-spacing: 0;
    word-wrap: break-word;
    word-break: break-all;
    display: inline-block;
    p {
      font-weight: 800;
    }
  }
}
.reply {
  display: flex;
  flex-direction: column;
  align-self: start;
  border-left: 2Px solid rgba(0, 110, 255, 0.499298);
  &-reverse {
    border-left: 2Px solid rgba(153, 153, 153, 0.3);
  }
  padding-left: 7Px;
  margin-bottom: 5Px;
  color: #999999;
  font-size: 12Px;
  line-height: 20Px;
  min-width: 40Px;
  .message-img,
  .message-video-cover,
  .message-videoimg {
    max-width: min(calc(100vw - 180Px), 300Px);
    max-height: min(calc(100vw - 180Px), 300Px);
    object-fit: contain;
    align-self: flex-start;
  }
  .face-box {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    .text-img {
      width: 20Px;
      height: 20Px;
    }
  }
  p {
    font-weight: 800;
    max-width: min(calc(100vw - 180Px), 300Px);
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    white-space: nowrap;
  }
}
.message-reference-user {
  display: flex;
  flex-direction: row;
  .nick {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    white-space: nowrap;
  }
  .colon {
    width: fit-content;
  }
}
</style>
