qianzhi-message/TUIKit/components/TUIChat/message-list/index.vue

<template>
  <div>
    <div
      :class="{
        'tui-chat': true,
        'tui-chat-h5': isMobile,
      }"
      @click="onMessageListBackgroundClick"
    >
      <!-- <JoinGroupCard /> -->
      <div class="tui-chat-main">
        <div class="tui-chat-safe-tips">
          <div class="qzy-space-between-center function-box">
            <div
              v-for="(item, index) in chatFunctionList"
              :key="index"
              @tap="sendMsgHandle(item.title)"
            >
              <!-- 前3个按钮状态根据是否聊过天判断，接受按钮根据是否发送面试邀请判断 -->
              <template v-if="loginType == 1">
                <img :src="item.activeIcon" />
              </template>
              <template v-else>
                <img
                  v-if="index != 3"
                  :src="
                    messageList && messageList.length > 0
                      ? item.activeIcon
                      : item.icon
                  "
                />
                <img
                  v-if="index == 3"
                  :src="
                    props.jobInfoData.status == 0 ? item.activeIcon : item.icon
                  "
                />
              </template>
              <div
                class="item-title"
                v-if="index != 3"
                :class="
                  messageList && messageList.length > 0
                    ? ''
                    : 'item-item-disabled'
                "
              >
                {{ item.title }}
              </div>
              <div
                class="item-title"
                v-if="index == 3"
                :class="
                  props.jobInfoData.status == 0 ? '' : 'item-item-disabled'
                "
              >
                {{ item.title }}
              </div>
            </div>
          </div>
          <div
            class="job-info"
            @tap="toDetail(jobInfoData.postId, jobInfoData.postStatus)"
          >
            <div class="qzy-space-between-center text-16 text-bold">
              <span class="color-333">{{ jobInfoData.postName }}</span>
              <span class="text-theme">{{ jobInfoData.salary }}</span>
            </div>
            <div class="text-500 text-14 color-999 company-name">
              {{ jobInfoData.companyName }}
            </div>
          </div>
        </div>
        <MessageGroupApplication
          v-if="isGroup"
          :key="props.groupID"
          :groupID="props.groupID"
        />
        <scroll-view
          id="messageScrollList"
          class="tui-message-list"
          scroll-y="true"
          :scroll-top="scrollTop"
          :scroll-into-view="`tui-${historyFirstMessageID}`"
          @scroll="handelScrollListScroll"
        >
          <p
            v-if="!isCompleted"
            class="message-more"
            @click="getHistoryMessageList"
          >
            {{ TUITranslateService.t("TUIChat.查看更多") }}
          </p>
          <li
            v-for="(item, index) in messageList"
            :id="`tui-${item.ID}`"
            :key="item.vueForRenderKey"
            :class="'message-li ' + item.flow"
          >
            <MessageTimestamp
              :currTime="item.time"
              :prevTime="index > 0 ? messageList[index - 1].time : 0"
            />
            <div class="message-item" @click="toggleID = ''">
              <MessageTip
                v-if="
                  item.type === TYPES.MSG_GRP_TIP ||
                  isCreateGroupCustomMessage(item)
                "
                :content="item.getMessageContent()"
              />
              <div
                v-else-if="!item.isRevoked && !isPluginMessage(item)"
                :id="`msg-bubble-${item.ID}`"
                class="message-bubble-container"
                @longpress="handleToggleMessageItem($event, item, index, true)"
                @touchstart="
                  handleH5LongPress($event, item, index, 'touchstart')
                "
                @touchend="handleH5LongPress($event, item, index, 'touchend')"
                @mouseover="handleH5LongPress($event, item, index, 'touchend')"
              >
                <MessageBubble
                  :messageItem="item"
                  :content="item.getMessageContent()"
                  :blinkMessageIDList="blinkMessageIDList"
                  @resendMessage="resendMessage(item)"
                  @blinkMessage="blinkMessage"
                  @scrollTo="scrollTo"
                  @setReadReceiptPanelVisible="setReadReceiptPanelVisible"
                >
                  <MessageText
                    v-if="item.type === TYPES.MSG_TEXT"
                    :content="item.getMessageContent()"
                  />
                  <ProgressMessage
                    v-if="item.type === TYPES.MSG_IMAGE"
                    :content="item.getMessageContent()"
                    :messageItem="item"
                  >
                    <MessageImage
                      :content="item.getMessageContent()"
                      :messageItem="item"
                      @previewImage="handleImagePreview(index)"
                    />
                  </ProgressMessage>
                  <ProgressMessage
                    v-if="item.type === TYPES.MSG_VIDEO"
                    :content="item.getMessageContent()"
                    :messageItem="item"
                  >
                    <MessageVideo
                      :content="item.getMessageContent()"
                      :messageItem="item"
                    />
                  </ProgressMessage>
                  <MessageAudio
                    v-if="item.type === TYPES.MSG_AUDIO"
                    :content="item.getMessageContent()"
                    :messageItem="item"
                    :broadcastNewAudioSrc="broadcastNewAudioSrc"
                    @getGlobalAudioContext="getGlobalAudioContext"
                  />
                  <MessageFile
                    v-if="item.type === TYPES.MSG_FILE"
                    :content="item.getMessageContent()"
                  />
                  <MessageFace
                    v-if="item.type === TYPES.MSG_FACE"
                    :content="item.getMessageContent()"
                    :isPC="isPC"
                  />
                  <MessageLocation
                    v-if="item.type === TYPES.MSG_LOCATION"
                    :content="item.getMessageContent()"
                  />
                  <MessageCustom
                    v-if="item.type === TYPES.MSG_CUSTOM"
                    :content="item.getMessageContent()"
                    :messageItem="item"
                  />
                </MessageBubble>
              </div>
              <MessagePlugin
                v-else-if="!item.isRevoked && isPluginMessage(item)"
                :message="item"
                @resendMessage="resendMessage"
                @handleToggleMessageItem="handleToggleMessageItem"
                @handleH5LongPress="handleH5LongPress"
              />
              <MessageRevoked
                v-else
                :isEdit="item.type === TYPES.MSG_TEXT"
                :messageItem="item"
                @messageEdit="handleEdit(item)"
              />
              <!-- <MessageTool
                v-if="item.ID === toggleID"
                :class="[
                  'message-tool',
                  item.flow === 'out' ? 'message-tool-out' : 'message-tool-in',
                ]"
                :messageItem="item"
              /> -->
            </div>
          </li>
        </scroll-view>
        <!-- 滚动按钮 -->
        <ScrollButton
          ref="scrollButtonInstanceRef"
          @scrollToLatestMessage="scrollToLatestMessage"
        />
        <Dialog
          v-if="reSendDialogShow"
          :show="reSendDialogShow"
          :isH5="!isPC"
          :center="true"
          :isHeaderShow="isPC"
          @submit="resendMessageConfirm()"
          @update:show="(e) => (reSendDialogShow = e)"
        >
          <p class="delDialog-title">
            {{ TUITranslateService.t("TUIChat.确认重发该消息？") }}
          </p>
        </Dialog>
        <!-- 已读回执用户列表面板 -->
        <ReadReceiptPanel
          v-if="isShowReadUserStatusPanel"
          :message="Object.assign({}, readStatusMessage)"
          @setReadReceiptPanelVisible="setReadReceiptPanelVisible"
        />
      </div>
    </div>

    <InterViewApplication
      :mapAddress="mapAddress"
      ref="InterViewApplicationRef"
      v-if="showDialog"
      :showDialog="showDialog"
      @close="ShowDialogClose"
      :jobInfoData="jobInfoData"
      @onload="InterViewApplicationOnload"
    ></InterViewApplication>
  </div>
</template>
<script lang="ts" setup>
import InterViewApplication from "./interview-application.vue";
import ToolbarItemContainer from "../../TUIChat/message-input-toolbar/evaluate/index.vue";
import {
  ref,
  nextTick,
  onMounted,
  onUnmounted,
  getCurrentInstance,
  watch,
} from "../../../adapter-vue";
import TUIChatEngine, {
  IMessageModel,
  TUIStore,
  StoreName,
  TUITranslateService,
  TUIChatService,
} from "@tencentcloud/chat-uikit-engine";
import throttle from "lodash/throttle";
import {
  setInstanceMapping,
  getBoundingClientRect,
  getScrollInfo,
} from "@tencentcloud/universal-api";
// import { JoinGroupCard } from '@tencentcloud/call-uikit-wechat';
import Link from "./link";
import MessageGroupApplication from "./message-group-application/index.vue";
import MessageText from "./message-elements/message-text.vue";
import ProgressMessage from "../../common/ProgressMessage/index.vue";
import MessageImage from "./message-elements/message-image.vue";
import MessageAudio from "./message-elements/message-audio.vue";
import MessageFile from "./message-elements/message-file.vue";
import MessageFace from "./message-elements/message-face.vue";
import MessageCustom from "./message-elements/message-custom.vue";
import MessageTip from "./message-elements/message-tip.vue";
import MessageBubble from "./message-elements/message-bubble.vue";
import MessageLocation from "./message-elements/message-location.vue";
import MessageTimestamp from "./message-elements/message-timestamp.vue";
import MessageVideo from "./message-elements/message-video.vue";
import MessageTool from "./message-tool/index.vue";
import MessageRevoked from "./message-tool/message-revoked.vue";
import MessagePlugin from "../../../plugins/plugin-components/message-plugin.vue";
import ReadReceiptPanel from "./read-receipt-panel/index.vue";
import ScrollButton from "./scroll-button/index.vue";
import { isPluginMessage } from "../../../plugins/plugin-components/index";
import Dialog from "../../common/Dialog/index.vue";
import { Toast, TOAST_TYPE } from "../../common/Toast/index";
import { isCreateGroupCustomMessage } from "../utils/utils";
import { isEnabledMessageReadReceiptGlobal } from "../utils/utils";
import { isPC, isH5, isMobile } from "../../../utils/env";
import { IAudioContext } from "../../../interface";
import config from "@/request/config";
import value from "../../../../uni_modules/uview-ui/components/u-text/value";

interface IEmits {
  (e: "closeInputToolBar"): void;
  (e: "handleEditor", message: IMessageModel, type: string): void;
}

const emits = defineEmits<IEmits>();
const props = defineProps({
  groupID: {
    type: String,
    default: "",
  },
  isGroup: {
    type: Boolean,
    default: false,
  },
  jobInfoData: {
    type: Object,
  },
  address: {
    type: Object,
  },
});
const mapAddress = ref();
watch(props, (nweProps) => {
  console.log("ccc", nweProps);
  mapAddress.value = nweProps.address;
});

const showDialog = ref(false);
const chatFunctionList = ref();
let observer: any = null;
let groupType: string | undefined;
const sentReceiptMessageID = new Set<string>();
const thisInstance = getCurrentInstance()?.proxy || getCurrentInstance();
const messageList = ref<IMessageModel[]>();
const isCompleted = ref(false);
const currentConversationID = ref("");
const toggleID = ref("");
const scrollTop = ref(5000); // 首次是 15 条消息，最大消息高度为300
const TYPES = ref(TUIChatEngine.TYPES);
const isLoadingMessage = ref(false);
const isLongpressing = ref(false);
const blinkMessageIDList = ref<string[]>([]);
const messageTarget = ref<IMessageModel>();
const scrollButtonInstanceRef = ref<InstanceType<typeof ScrollButton>>();
const historyFirstMessageID = ref<string>("");
let selfAddValue = 0;

// audio control
const broadcastNewAudioSrc = ref<string>("");

// 阅读回执状态message
const readStatusMessage = ref<IMessageModel>();
const isShowReadUserStatusPanel = ref<boolean>(false);

// 消息重发 Dialog
const reSendDialogShow = ref(false);
const resendMessageData = ref();

// 消息滑动到底部，建议搭配 nextTick 使用
const scrollToBottom = () => {
  // 文本消息高度：60, 最大消息高度 280
  scrollTop.value += 300;
  // 解决 uniapp 打包到 app 首次进入滑动到底部，300 可设置
  const timer = setTimeout(() => {
    scrollTop.value += 1;
    clearTimeout(timer);
  }, 300);
};

// 监听回调函数
const onCurrentConversationIDUpdated = (conversationID: string) => {
  currentConversationID.value = conversationID;

  // 开启已读回执的状态 群聊缓存群类型
  if (isEnabledMessageReadReceiptGlobal()) {
    const { groupProfile } =
      TUIStore.getConversationModel(conversationID) || {};
    groupType = groupProfile?.type;
  }
};
const ShowDialogClose = () => {
  showDialog.value = false;
};
const loginType = ref(uni.getStorageSync("loginType"));
onMounted(() => {
  let loginType = uni.getStorageSync("loginType");
  if (loginType > 0) {
    chatFunctionList.value = [
      {
        icon: require("@/static/images/icon/chat-icon1.png"),
        activeIcon: require("@/static/images/icon/chat-icon1-active.png"),
        title: "打电话",
      },
      {
        icon: require("@/static/images/icon/chat-icon2.png"),
        activeIcon: require("@/static/images/icon/chat-icon2-active.png"),
        title: "交换名片",
      },
      {
        icon: require("@/static/images/icon/chat-icon3-active.png"),
        activeIcon: require("@/static/images/icon/chat-icon3-active.png"),
        title: "面试邀请",
      },
    ];
  } else {
    chatFunctionList.value = [
      {
        icon: require("@/static/images/icon/chat-icon1.png"),
        activeIcon: require("@/static/images/icon/chat-icon1-active.png"),
        title: "打电话",
      },
      {
        icon: require("@/static/images/icon/chat-icon2.png"),
        activeIcon: require("@/static/images/icon/chat-icon2-active.png"),
        title: "交换名片",
      },
      {
        icon: require("@/static/images/icon/chat-icon3.png"),
        activeIcon: require("@/static/images/icon/chat-icon3-active.png"),
        title: "发送简历",
      },
      {
        icon: require("@/static/images/icon/chat-icon4.png"),
        activeIcon: require("@/static/images/icon/chat-icon4-active.png"),
        title: "接受预约",
      },
    ];
  }
  // 消息列表监听
  TUIStore.watch(StoreName.CHAT, {
    messageList: onMessageListUpdated,
    messageSource: onMessageSourceUpdated,
    isCompleted: onChatCompletedUpdated,
  });

  TUIStore.watch(StoreName.CONV, {
    currentConversationID: onCurrentConversationIDUpdated,
  });

  setInstanceMapping("messageList", thisInstance);

  uni.$on("scroll-to-bottom", scrollToLatestMessage);
});

// 取消监听
onUnmounted(() => {
  TUIStore.unwatch(StoreName.CHAT, {
    messageList: onMessageListUpdated,
    isCompleted: onChatCompletedUpdated,
  });

  TUIStore.unwatch(StoreName.CONV, {
    currentConversationID: onCurrentConversationIDUpdated,
  });

  observer?.disconnect();
  observer = null;

  uni.$off("scroll-to-bottom");
});

const handelScrollListScroll = throttle(
  function (e: Event) {
    scrollButtonInstanceRef.value?.judgeScrollOverOneScreen(e);
  },
  500,
  { leading: true }
);

const InterViewApplicationOnload = () => {
  emits("emitStatus", true);
};
// 各种消息处理
const sendMsgHandle = (title) => {
  const header = {
    "Content-Type": "application/json",
    Authorization: uni.getStorageSync("token")
      ? uni.getStorageSync("token")
      : uni.getStorageSync("unitoken"),
  };
  console.log("props.jobInfoData", props.jobInfoData);
  if (loginType.value == 1) {
  } else {
    // 未发送过附件简历
    if (
      messageList.value.length == 0 &&
      (title == "打电话" || title == "交换名片" || title == "发送简历")
    ) {
      uni.$u.toast("与对方沟通后才可" + title);
      return false;
    }
  }

  //未收到面试邀请，接受按钮置灰不进行任何操作
  if (title == "接受预约") {
    if (props.jobInfoData.status == 0) {
      uni.request({
        url: config.baseUrl + "/recruit/recruitInterview/changeStatus",
        method: "POST",
        header: header,
        data: {
          id: props.jobInfoData.interviewId,
          status: 1,
        },
        success: function (res) {
          emits("emitStatus", true);
        },
      });
    } else {
      return false;
    }
  }

  if (title == "发送简历" || title == "交换名片") {
    let obj = {};
    if (title == "发送简历") {
      if (props.jobInfoData.recruitResumeUrl) {
        obj = {
          msgContent: {},
          msgType: "TIMFileElem",
          sendResume: 2,
        };
      } else {
        uni.$u.toast("请先上传附件简历~");
        return false;
      }
    } else if (title == "交换名片") {
      if (loginType.value == 1) {
        obj = {
          msgContent: {},
          msgType: "TIMTextElem",
          sendCard: 1,
        };
      } else {
        obj = {
          msgContent: {},
          msgType: "TIMTextElem",
          sendCard: 2,
        };
      }
    }

    console.log("props.jobInfoData", props.jobInfoData);

    // 发送消息后本地存储文本
    let url = config.baseUrl + "/recruit/recruitCommunicate";
    let data = {
      companyUserId: props.jobInfoData.companyUserId,
      postId: props.jobInfoData.postId,
      recruitUserId: props.jobInfoData.recruitUserId,
      sendType: 0,
      status: props.jobInfoData.status,
      ...obj,
    };
    console.log("data", data);

    let id = uni.getStorageSync("id");
    if (loginType.value == 1) {
      data.sendType = 1;
      // data.companyUserId = id;
    }

    uni.request({
      url: url,
      method: "POST",
      header: header,
      data: data,
      success: function (res) {
        if (res.data.code === 200) {
          // 发送简历后才能发送名片，打电话等高亮显示
          if (title == "发送简历" && props.jobInfoData.sendResume != 2) {
            emits("emitStatus", true);
          }
        } else {
          uni.$u.toast(res.data.msg);
        }
      },
    });
  } else if (title == "打电话") {
    if (loginType.value == 1) {
      uni.makePhoneCall({
        phoneNumber: props.jobInfoData.recruitUserPhone,
      });
    } else {
      uni.makePhoneCall({
        phoneNumber: props.jobInfoData.companyUserPhone,
      });
    }
  } else if (title == "面试邀请") {
    showDialog.value = true;
  }
};

// 跳转详情
const toDetail = (postId, postStatus) => {
  if (postStatus == -1) {
    uni.$u.toast("该岗位已删除");
  } else {
    webUni.webView.navigateTo({
      url: "/packageJob/home/job-details?id=" + postId + "&type=1",
    });
  }
};

function getGlobalAudioContext(
  audioMap: Map<string, IAudioContext>,
  options?: { newAudioSrc: string }
) {
  if (options?.newAudioSrc) {
    broadcastNewAudioSrc.value = options.newAudioSrc;
  }
}

async function onMessageListUpdated(list: IMessageModel[]) {
  observer?.disconnect();
  // 是否已发送更新请求标志
  let isRequest = false;
  console.log(111111111111111111, list);
  messageList.value = list
    .filter((message) => !message.isDeleted)
    .map((message) => {
      message.vueForRenderKey = `${message.ID}`;
      console.log(isRequest);
      console.log(message);
      if (
        !isRequest &&
        message.type == "TIMCustomElem" &&
        (JSON.parse(JSON.stringify(message.cloudCustomData)).status == 0) !=
          props.jobInfoData
      ) {
        emits("emitStatus", true);
        // 仅执行一次更新请求
        isRequest = true;
      }
      return message;
    });
  const newLastMessage = messageList.value?.[messageList.value?.length - 1];
  if (messageTarget.value) {
    // scroll to target message
    scrollAndBlinkMessage(messageTarget.value);
  } else if (
    !isLoadingMessage.value &&
    !(
      scrollButtonInstanceRef.value?.isScrollButtonVisible &&
      newLastMessage?.flow === "in"
    )
  ) {
    // scroll to bottom
    nextTick(() => {
      scrollToBottom();
    });
  }
  if (isEnabledMessageReadReceiptGlobal()) {
    nextTick(() => bindIntersectionObserver());
  }
}

// 滚动到最新消息
async function scrollToLatestMessage() {
  try {
    const { scrollHeight } = await getScrollInfo(
      "#messageScrollList",
      "messageList"
    );
    if (scrollHeight) {
      scrollTop.value === scrollHeight
        ? (scrollTop.value = scrollHeight + 1)
        : (scrollTop.value = scrollHeight);
    } else {
      scrollToBottom();
    }
  } catch (error) {
    scrollToBottom();
  }
}

async function onMessageSourceUpdated(message: IMessageModel) {
  messageTarget.value = message;
  scrollAndBlinkMessage(messageTarget.value);
}

function scrollAndBlinkMessage(message: IMessageModel) {
  if (
    messageList.value?.some(
      (messageListItem) => messageListItem?.ID === message?.ID
    )
  ) {
    nextTick(async () => {
      await scrollToTargetMessage(message);
      await blinkMessage(message?.ID);
      messageTarget.value = undefined;
    });
  }
}

function onChatCompletedUpdated(flag: boolean) {
  isCompleted.value = flag;
}

// 获取历史消息
const getHistoryMessageList = () => {
  isLoadingMessage.value = true;
  const currentFirstMessageID = messageList.value?.[0]?.ID || "";
  TUIChatService.getMessageList().then(() => {
    nextTick(() => {
      historyFirstMessageID.value = currentFirstMessageID;
      const timer = setTimeout(() => {
        historyFirstMessageID.value = "";
        isLoadingMessage.value = false;
        clearTimeout(timer);
      }, 500);
    });
  });
};

// todo: webview 跳转
const openComplaintLink = () => {};

// 消息操作
const handleToggleMessageItem = (
  e: any,
  message: IMessageModel,
  index: number,
  isLongpress = false
) => {
  if (isLongpress) {
    isLongpressing.value = true;
  }
  toggleID.value = message.ID;
};

// h5 long press
let timer: number;
const handleH5LongPress = (
  e: any,
  message: IMessageModel,
  index: number,
  type: string
) => {
  if (!isH5) return;
  function longPressHandler() {
    clearTimeout(timer);
    handleToggleMessageItem(e, message, index, true);
  }
  function touchStartHandler() {
    timer = setTimeout(longPressHandler, 500);
  }
  function touchEndHandler() {
    clearTimeout(timer);
  }
  switch (type) {
    case "touchstart":
      touchStartHandler();
      break;
    case "touchend":
      touchEndHandler();
      setTimeout(() => {
        isLongpressing.value = false;
      }, 200);
      break;
  }
};

// 消息撤回后，编辑消息
const handleEdit = (message: IMessageModel) => {
  emits("handleEditor", message, "reedit");
};

// 重发消息
const resendMessage = (message: IMessageModel) => {
  reSendDialogShow.value = true;
  resendMessageData.value = message;
};

// 图片预览
// 开启图片预览
const handleImagePreview = (index: number) => {
  if (!messageList.value) {
    return;
  }
  const imageMessageIndex: number[] = [];
  const imageMessageList: IMessageModel[] = messageList.value.filter(
    (item, index) => {
      if (
        !item.isRevoked &&
        !item.hasRiskContent &&
        item.type === TYPES.value.MSG_IMAGE
      ) {
        imageMessageIndex.push(index);
        return true;
      }
      return false;
    }
  );
  uni.previewImage({
    current: imageMessageIndex.indexOf(index),
    urls: imageMessageList.map(
      (message) => message.payload.imageInfoArray?.[2].url
    ),
    // #ifdef APP-PLUS
    indicator: "number",
    // #endif
  });
};

const resendMessageConfirm = () => {
  reSendDialogShow.value = !reSendDialogShow.value;
  const messageModel = resendMessageData.value;
  messageModel.resendMessage();
};

function blinkMessage(messageID: string): Promise<void> {
  return new Promise((resolve) => {
    const index = blinkMessageIDList.value.indexOf(messageID);
    if (index < 0) {
      blinkMessageIDList.value.push(messageID);
      const timer = setTimeout(() => {
        blinkMessageIDList.value.splice(
          blinkMessageIDList.value.indexOf(messageID),
          1
        );
        clearTimeout(timer);
        resolve();
      }, 3000);
    }
  });
}

function scrollTo(scrollHeight: number) {
  scrollTop.value = scrollHeight;
}

async function bindIntersectionObserver() {
  if (!messageList.value || messageList.value.length === 0) {
    return;
  }

  if (
    groupType === TYPES.value.GRP_AVCHATROOM ||
    groupType === TYPES.value.GRP_COMMUNITY
  ) {
    // 直播群以及社群不进行消息的已读回执监听
    return;
  }

  observer?.disconnect();
  observer = uni
    .createIntersectionObserver(thisInstance, {
      threshold: [0.7],
      observeAll: true,
      // uni 下会把 safetip 也算进去 需要负 margin 来排除
    })
    .relativeTo("#messageScrollList", { top: -70 });

  observer?.observe(".message-li.in .message-bubble-container", (res: any) => {
    if (sentReceiptMessageID.has(res.id)) {
      return;
    }
    const matchingMessage = messageList.value.find((message: IMessageModel) => {
      return res.id.indexOf(message.ID) > -1;
    });
    if (
      matchingMessage &&
      matchingMessage.needReadReceipt &&
      matchingMessage.flow === "in" &&
      !matchingMessage.readReceiptInfo?.isPeerRead
    ) {
      TUIChatService.sendMessageReadReceipt([matchingMessage]);
      sentReceiptMessageID.add(res.id);
    }
  });
}

function setReadReceiptPanelVisible(visible: boolean, message?: IMessageModel) {
  if (!visible) {
    readStatusMessage.value = undefined;
  } else {
    readStatusMessage.value = message;
  }
  isShowReadUserStatusPanel.value = visible;
}

async function scrollToTargetMessage(message: IMessageModel) {
  const targetMessageID = message.ID;
  const isTargetMessageInScreen =
    messageList.value &&
    messageList.value.some((msg) => msg.ID === targetMessageID);
  if (targetMessageID && isTargetMessageInScreen) {
    const timer = setTimeout(async () => {
      try {
        const scrollViewRect = await getBoundingClientRect(
          "#messageScrollList",
          "messageList"
        );
        const originalMessageRect = await getBoundingClientRect(
          "#tui-" + targetMessageID,
          "messageList"
        );
        const { scrollTop } = await getScrollInfo(
          "#messageScrollList",
          "messageList"
        );
        const finalScrollTop =
          originalMessageRect.top +
          scrollTop -
          scrollViewRect.top -
          (selfAddValue++ % 2);
        scrollTo(finalScrollTop);
        clearTimeout(timer);
      } catch (error) {
        // todo
      }
    }, 500);
  } else {
    Toast({
      message: TUITranslateService.t("TUIChat.无法定位到原消息"),
      type: TOAST_TYPE.WARNING,
    });
  }
}

function onMessageListBackgroundClick() {
  emits("closeInputToolBar");
}
</script>
<style lang="scss" scoped src="./style/index.scss"></style>

<style lang="scss" scoped>
.function-box {
  padding: 20px 0px 12px;
  > div {
    flex: 1;
    text-align: center;
  }
  img {
    width: 20px;
    height: 20px;
    margin-bottom: 12px;
  }
}
.job-info {
  padding: 8px 25px;
  background: #f1fffd;
  .company-name {
    margin-top: 5px;
  }
}
</style>