// 監(jiān)聽(tīng)會(huì)話消息區(qū)域添加滾動(dòng)監(jiān)聽(tīng)事件
const listenScrollEvent = () => {
  chatMsgContainer.value.addEventListener('scroll', scrolHandle)
}


// 滾動(dòng)邏輯處理回調(diào)函數(shù)
const scrolHandle = throttle(event => {
  const { scrollHeight, scrollTop } = chatMsgContainer.value || {}
  const { target } = event || {}
  // 記錄下當(dāng)前會(huì)話滾動(dòng)位置，切換會(huì)話的時(shí)候需要回滾到最后停留的位置
  userInfo.value.scrollPosition = scrollHeight - scrollTop || 0
  // 超出一屏，滾動(dòng)到頂部，且沒(méi)有拉取完所有的數(shù)據(jù)
  if (
    target.scrollTop === 0 &&
    target.scrollHeight > target.clientHeight &&
    !userInfo.value?.isComplete
  ) {
    handleScrollEvent(event) // 拉取歷史消息
  }
}, 300)

// 消息滾動(dòng)
const handleMessageScroll = (len: number, oldLen: number) => {
  if (!len) return
  let msgScrollTimer = null
  let targetDom = null
  nextTick(() => {
    // 獲取到加載后最后一條數(shù)據(jù)位置
    const recentlyMsg = messagePools[len - 1]
    // 計(jì)算新加載數(shù)據(jù)條數(shù)
    const calcMsgLenDiff = len - oldLen
    // 首次加載數(shù)據(jù)的時(shí)候讓滾動(dòng)條滾動(dòng)到最底部
    if (len <= LIMIT_MESSAGE) {
      // msgid是會(huì)話中的唯一標(biāo)識(shí)，可以用此作為唯一ID
      targetDom = document.querySelector(recentlyMsg.msgid)
      // true 元素的頂部將對(duì)齊到可滾動(dòng)祖先的可見(jiàn)區(qū)域的頂部。對(duì)應(yīng)于scrollIntoViewOptions: {block: "start", inline: "nearest"}
      firstDom?.scrollIntoView?.(true)
    } else if (calcMsgLenDiff <= 1 && !recentlyMsg?.isHistory) {
      // 這里用來(lái)處理用戶(hù)/客服發(fā)送消息滾動(dòng)邏輯
      handleUserOrCustomerMsg()
    } else if (calcMsgLenDiff >= 1) {
      // 拉取歷史消息邏輯
      // 獲取到加載前最后一條數(shù)據(jù)位置
      const prevLastMsg = messagePools[calcMsgLenDiff - 1]
      targetDom = document.querySelector(prevLastMsg.msgid)
      targetDom?.scrollIntoView?.()
    }
    userInfo.value.isShowLoading = false
  })
}


// 監(jiān)聽(tīng)會(huì)話消息數(shù)據(jù)變化
watch(
  () => messagePools.length,
  (len, oldLen) => {
    handleMessageScroll(len, oldLen)
  },
  {
    immediate: true
  }
)

// 消息滾動(dòng)
const handleMessageScroll = (len: number, oldLen: number) => {
  if (!len) return
  let msgScrollTimer = null
  let targetDom = null
  nextTick(() => {
    // 獲取到加載后最后一條數(shù)據(jù)位置
    const recentlyMsg = messagePools[len - 1]
    // 計(jì)算新加載數(shù)據(jù)條數(shù)
    const calcMsgLenDiff = len - oldLen
    // 首次加載數(shù)據(jù)的時(shí)候讓滾動(dòng)條滾動(dòng)到最底部
    if (len <= LIMIT_MESSAGE) {
      ...
      // 針對(duì)圖片/視頻渲染慢的場(chǎng)景做個(gè)補(bǔ)償
      msgScrollTimer = setTimeout(() => {
        clearTimeout(msgScrollTimer)
        firstDom?.scrollIntoView?.(true)
      }, SCROLL_THRESHOLD)
    } else if (calcMsgLenDiff <= 1 && !recentlyMsg?.isHistory) {
      // 這里用來(lái)處理用戶(hù)/客服發(fā)送消息滾動(dòng)邏輯
      handleUserOrCustomerMsg()
    } else if (calcMsgLenDiff >= 1) {
      // 拉取歷史消息邏輯
      // ...
      // 針對(duì)圖片/視頻渲染慢的場(chǎng)景做個(gè)補(bǔ)償
      msgScrollTimer = setTimeout(() => {
        clearTimeout(msgScrollTimer)
        targetDom?.scrollIntoView?.()
      }, SCROLL_THRESHOLD)
    }
    userInfo.value.isShowLoading = false
  })
}

const allImgOrVedioLoaded = async() => {
  const imgNodes = document.querySelectorAll('.messageWrapper img') || []
  const vedioNodes = document.querySelectorAll('.messageWrapper vedio') || []
  const promises = [...imgNodes, ...vedioNodes]
  // 等待所有的資源加載完成，無(wú)論成功還是失敗
  return await Promise.allSettled(
    promises.map(source => {
      new Promise(resolve => {
        source.addEventListener('load', () => resolve(source))
      })
    })
  )
}
// 消息滾動(dòng)
const handleMessageScroll = (len: number, oldLen: number) => {
  if (!len) return
  let msgScrollTimer = null
  let targetDom = null
  nextTick(() => {
        ...
      // 等待img/vedio所有資源加載完成，執(zhí)行回滾操作
      allImgOrVedioLoaded().then(() => {
        firstDom.scrollIntoView(true)
      })
    } else if (calcMsgLenDiff <= 1 && !recentlyMsg?.isHistory) {
      // 這里用來(lái)處理用戶(hù)/客服發(fā)送消息滾動(dòng)邏輯
      handleUserOrCustomerMsg()
    } else if (calcMsgLenDiff >= 1) {
      // 拉取歷史消息邏輯
      // ...
      // 等待img/vedio所有資源加載完成，執(zhí)行回滾操作
      allImgOrVedioLoaded().then(() => {
        targetDom.scrollIntoView()
      })
    }
    userInfo.value.isShowLoading = false
  })
}

display: flex;
flex-direction: column-reverse;