import { TUIUserService } from "@tencentcloud/chat-uikit-engine";

// open user online status
// This interface is only valid when called after successful login
TUIUserService.switchUserStatus({ displayOnlineStatus: true });

// close user online status
// This interface is only valid when called after successful login 
TUIUserService.switchUserStatus({ displayOnlineStatus: false });

import { TUILogin } from "@tencentcloud/tui-core";
import { TUIUserService } from "@tencentcloud/chat-uikit-engine";

TUILogin.login(loginInfo).then((res: any) => {
  TUIUserService.switchUserStatus({ displayOnlineStatus: true });
});

TUIStore.watch(StoreName.USER, {
  ...
  displayOnlineStatus: (status: boolean) => {
    displayOnlineStatus.value = status;
  },
  userStatusList: (list: Map<string, IUserStatus>) => {
    list?.size && (userOnlineStatusMap.value = Object.fromEntries(list?.entries()));
  },
});

function getOnlineStatus(): boolean {
  return (
    props.displayOnlineStatus &&
    props.userOnlineStatusMap &&
    props.item?.userID &&
    props.userOnlineStatusMap?.[props.item.userID]?.statusType === TUIChatEngine.TYPES.USER_STATUS_ONLINE 
  );
};

<div
  v-if="props.displayOnlineStatus"
  :class="{
    'online-status': true,
    'online-status-online': isOnline,
    'online-status-offline': !isOnline
  }"
></div>