gami-web/app/components/popup/Im.vue

<script setup lang="ts">
import dayjs from 'dayjs'
import { computed, ref, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import type { Conversation } from '@tencentcloud/lite-chat'
import { useImPopup } from '~/composables/useImPopup'
import TitleIcon from '~/assets/icons/tab-active.svg'
import CloseListIcon from '~/assets/icons/im/close-list.svg'
import { IM_ADMIN } from '~/constants'

const { state, close, clearTarget } = useImPopup()
const { t, locale } = useI18n()
const {
  ready,
  conversationList,
  conversationLoading,
  conversationError,
  getConversationList,
  bizUserInfoMap,
  ensureBizUserInfos,
  bizUserOnlineStateMap,
  ensureBizUserOnlineStates,
  login: loginIm,
  logout: logoutIm,
  destroy: destroyIm,
} = useChat()
const route = useRoute()
const { isAuthenticated, isInitialized, userProfile } = useAuth()

type ViewMode = 'list' | 'detail'
const view = ref<ViewMode>('list')
const activeConversationId = ref<string | null>(null)
const placeholderConversation = ref<Conversation | null>(null)

const list = computed(() => conversationList.value
  ? conversationList.value.filter((conv) => {
      return conv.userProfile?.userID !== IM_ADMIN
    })
  : [])

const activeConversation = computed(() => {
  const id = activeConversationId.value
  if (!id) return null
  return list.value.find(c => c.conversationID === id) ?? placeholderConversation.value
})

const getPeerUserNo = (conv: Conversation) => {
  const rawUserId = conv?.userProfile?.userID ? String(conv.userProfile.userID) : ''
  if (rawUserId) {
    // Some SDK payloads may return "C2Cxxx" as userID; business uses plain userNo.
    if (rawUserId.toUpperCase().startsWith('C2C')) return rawUserId.slice(3)
    return rawUserId
  }
  const cid = conv?.conversationID ? String(conv.conversationID) : ''
  return cid.toUpperCase().startsWith('C2C') ? cid.slice(3) : ''
}

const getConversationName = (conv: Conversation) => {
  const userNo = getPeerUserNo(conv)
  const biz = userNo ? bizUserInfoMap.value?.[userNo] : undefined
  return biz?.nickname || conv?.remark || conv?.userProfile?.nick || conv?.groupProfile?.name || conv?.conversationID || ''
}

const getConversationAvatar = (conv: Conversation) => {
  const userNo = getPeerUserNo(conv)
  const biz = userNo ? bizUserInfoMap.value?.[userNo] : undefined
  return biz?.avatar || conv?.userProfile?.avatar || conv?.groupProfile?.avatar || '/avatar.png'
}

const getConversationOnline = (conv: Conversation) => {
  const userNo = getPeerUserNo(conv)
  if (!userNo) return undefined
  if (!Object.prototype.hasOwnProperty.call(bizUserOnlineStateMap.value, userNo)) return undefined
  return bizUserOnlineStateMap.value[userNo] === true
}

const getConversationLastText = (conv: Conversation) => {
  // Ensure UI updates when locale changes.
  void locale.value
  const msg = conv?.lastMessage
  if (!msg) return ''
  const text = msg?.payload?.text
  if (typeof text === 'string' && text.trim()) return text
  const type = String(msg?.type || '').toLowerCase()
  if (type.includes('image')) return t('im.message.image')
  if (type.includes('video')) return t('im.message.video')
  if (type.includes('file')) return t('im.message.file')
  if (type.includes('audio')) return t('im.message.audio')
  return t('im.message.generic')
}

const getConversationTimeLabel = (conv: Conversation) => {
  // Ensure UI updates when locale changes.
  void locale.value
  const sec = Number(conv?.lastMessage?.lastTime)
  if (!Number.isFinite(sec) || sec <= 0) return ''
  const time = dayjs.unix(sec)
  if (dayjs().diff(time, 'second') < 60) return t('im.time.now')
  if (dayjs().isSame(time, 'day')) return time.tz().format('HH:mm')
  return time.tz().format('MM/DD')
}

const fetchConversations = async () => {
  if (!state.visible) return
  if (!ready.value) return
  await getConversationList()
}

const activeName = computed(() => activeConversation.value ? getConversationName(activeConversation.value) : '')
const activeAvatar = computed(() => activeConversation.value ? getConversationAvatar(activeConversation.value) : '/avatar.png')
const activeBizUserInfo = computed(() => {
  if (!activeConversation.value) return undefined
  const userNo = getPeerUserNo(activeConversation.value)
  if (!userNo) return undefined
  return bizUserInfoMap.value?.[userNo]
})

const activeOnline = computed(() => {
  if (!activeConversation.value) return undefined
  return getConversationOnline(activeConversation.value)
})

const openConversationDetail = (conv: Conversation) => {
  activeConversationId.value = conv.conversationID
  placeholderConversation.value = null
  view.value = 'detail'
}

const backToList = () => {
  view.value = 'list'
  activeConversationId.value = null
  placeholderConversation.value = null
  clearTarget()
}

watch(
  () => [state.visible, ready.value] as const,
  ([visible, isReady]) => {
    if (visible && isReady) fetchConversations()
  },
  { immediate: true },
)

async function openConversationByUserId(userIdRaw: unknown) {
  const userId = userIdRaw ? String(userIdRaw).trim() : ''
  if (!userId) return
  if (!state.visible) return
  if (!ready.value) return

  try {
    await ensureBizUserInfos([userId])
    await ensureBizUserOnlineStates([userId])
    await getConversationList()
  }
  catch {
    // ignore; we will still open a placeholder conversation
  }

  const convFromList = list.value.find((c) => {
    const uid = getPeerUserNo(c)
    return uid === userId || String(c?.conversationID ?? '') === `C2C${userId}`
  })

  if (convFromList) {
    placeholderConversation.value = null
    activeConversationId.value = String(convFromList.conversationID)
    view.value = 'detail'
    clearTarget()
    return
  }

  // Fallback: open detail with a minimal placeholder conversation.
  placeholderConversation.value = {
    conversationID: `C2C${userId}`,
    userProfile: { userID: userId },
  } as unknown as Conversation
  activeConversationId.value = `C2C${userId}`
  view.value = 'detail'
  clearTarget()
}

watch(
  () => [state.visible, ready.value, state.targetUserId] as const,
  ([visible, isReady, target]) => {
    if (!visible || !isReady || !target) return
    void openConversationByUserId(target)
  },
  { immediate: true },
)

const handleUpdateShow = (value: boolean) => {
  if (!value) close()
}

watch(
  () => state.visible,
  (visible) => {
    if (!visible) {
      view.value = 'list'
      activeConversationId.value = null
      placeholderConversation.value = null
    }
  },
)

watch(
  () => route.fullPath,
  () => {
    if (state.visible) {
      close()
    }
  },
)

onMounted(async () => {
  watch(
    () => [isAuthenticated.value, isInitialized.value, userProfile.value?.userNo] as const,
    async ([_isAuthenticated, _isInitialized, userNo]) => {
      if (_isInitialized && _isAuthenticated && userNo) {
        await loginIm({ userId: userNo })
      }
    },
    { immediate: true },
  )

  watch(
    () => isAuthenticated.value,
    async (_isAuthenticated, _prevIsAuthenticated) => {
      if (_prevIsAuthenticated && !_isAuthenticated) {
        await logoutIm()
      }
    },
  )
})

onBeforeUnmount(async () => {
  await destroyIm()
})
</script>

<template>
  <van-popup
    :show="state.visible"
    position="bottom"
    teleport="body"
    @update:show="handleUpdateShow"
  >
    <ImConversationDetail
      v-if="view === 'detail'"
      :conversation="activeConversation"
      :name="activeName"
      :avatar="activeAvatar"
      :online="activeOnline"
      :biz-user-info="activeBizUserInfo"
      @back="backToList"
      @close="close"
    />

    <div
      v-else
      class="im-popup"
    >
      <div class="im-popup__bg" />

      <div class="im-popup__header">
        <div class="im-popup__title">
          <TitleIcon class="im-popup__title-icon" />
          <span class="im-popup__title-text">
            {{ t('im.title') }}
          </span>
        </div>
        <button
          class="im-popup__close"
          type="button"
          @click="close"
        >
          <CloseListIcon />
        </button>
      </div>

      <div class="im-popup__content">
        <div
          v-if="!ready"
          class="im-popup__placeholder"
        >
          {{ t('im.placeholder.notReady') }}
        </div>

        <div
          v-else-if="conversationLoading"
          class="im-popup__placeholder"
        >
          {{ t('common.loading') }}
        </div>

        <div
          v-else-if="conversationError"
          class="im-popup__placeholder"
        >
          {{ conversationError }}
        </div>

        <div
          v-else-if="list.length === 0"
          class="im-popup__placeholder"
        >
          <img
            src="~/assets/images/common/empty.png"
            :alt="t('im.placeholder.emptyAlt')"
          >
          {{ t('im.placeholder.empty') }}
        </div>

        <div
          v-else
          class="im-popup__list"
        >
          <ImChatItem
            v-for="conv in list"
            :key="conv.conversationID"
            :avatar="getConversationAvatar(conv)"
            :online="getConversationOnline(conv)"
            :name="getConversationName(conv)"
            :time="getConversationTimeLabel(conv)"
            :message="getConversationLastText(conv)"
            :unread="conv.unreadCount"
            @click="openConversationDetail(conv)"
          />
        </div>
      </div>
    </div>
  </van-popup>
</template>

<style scoped lang="scss">
.im-popup {
  height: 100vh;
  height: 100dvh;
  height: calc(var(--app-vh, 1vh) * 100);
  padding: 16px 16px 20px;
  position: relative;
  display: flex;
  flex-direction: column;

  &__bg {
    @include size(100%, 173px);
    @include bg('~/assets/images/home/header-bg.png', 100% 173px);
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  &__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 1;
  }

  &__title {
    font-size: 24px;
    font-family: var(--font-title);
    font-weight: 600;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;

    &-icon {
      position: absolute;
      z-index: 0;
    }
    &-text {
      position: relative;
      z-index: 1;
    }
  }

  &__close {
    border: none;
    background: transparent;
  }

  &__content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
  }

  &__list {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  &__placeholder {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.70);

    img {
      @include size(100px);
    }
  }
}
</style>