chat-pc/src/views/message/inner/panel/PanelContent.vue

<script lang="ts" setup>
import { watch, onMounted, ref, nextTick, onUnmounted } from 'vue'
import { NDropdown, NCheckbox, NPopover, NInfiniteScroll } from 'naive-ui'
import { Loading, MoreThree, ToTop } from '@icon-park/vue-next'
import { bus } from '@/utils/event-bus'
import { useDialogueStore } from '@/store'
import { formatTime, parseTime } from '@/utils/datetime'
import { clipboard, htmlDecode, clipboardImage } from '@/utils/common'
import { downloadImage } from '@/utils/functions'
import { MessageComponents, ForwardableMessageType } from '@/constant/message'
import { useMenu } from './menu'
import SkipBottom from './SkipBottom.vue'
import { ITalkRecord } from '@/types/chat'
import { EditorConst } from '@/constant/event-bus'
import { useInject, useTalkRecord, useUtil } from '@/hooks'
import { ExclamationCircleFilled } from '@ant-design/icons-vue'
import { useUserStore, useUploadsStore } from '@/store'
import RevokeMessage from '@/components/talk/message/RevokeMessage.vue'
import { voiceToText, ServeMessageReadDetail } from '@/api/chat.js'
import { confirmBox } from '@/components/confirm-box/service.js'
import ws from '@/connect'
import avatarModule from '@/components/avatar-module/index.vue'

// 定义消息已读状态接口
interface ReadStatus {
  msg_ids: string[]
  talk_type: number
  receiver_id: number
  user_id?: number
}

// 定义状态接口
interface State {
  visibleElements: Set<HTMLElement>
  visibleOutElements: Set<HTMLElement>
  tempWaitDoRead: ReadStatus[]
  tempWaitDoCheck: ReadStatus[]
  setMessageReadInterval: number | null
  setOutMessageReadInterval: number | null
  lastUpdateTime: number
  isScrolling: boolean
  scrollTimer: number | null
  lastTriggerTime: number
  talkReadListDetail: any[]
  readDetailIsUnread: number
  currentMsgReadDetail: any | null
  currentReadDetailPage: number
  hasMoreReadListDetail: boolean
  loadingReadListDetail: boolean
}

const props = defineProps({
  uid: {
    type: Number,
    default: 0
  },
  talk_type: {
    type: Number,
    default: 0
  },
  receiver_id: {
    type: Number,
    default: 0
  },
  index_name: {
    type: String,
    default: ''
  },
  specifiedMsg: {
    type: String,
    default: ''
  },
  num: {
    type: Number,
    default: 0
  }
})

const { loadConfig, records, onLoad, onRefreshLoad, onJumpMessage } = useTalkRecord(props.uid)
const uploadsStore = useUploadsStore()
const { useMessage } = useUtil()
const { dropdown, showDropdownMenu, closeDropdownMenu } = useMenu()
const { showUserInfoModal } = useInject()
const dialogueStore = useDialogueStore()
const userStore = useUserStore()
// const showUserInfoModal = (uid: number) => {
//   userStore.getUserInfo(uid)
// }
// 置底按钮
const skipBottom = ref(false)
// 是否显示消息时间
const isShowTalkTime = (index: number, datetime: string) => {
  if (datetime == undefined) {
    return false
  }

  if (records.value[index].is_revoke == 1) {
    return false
  }

  datetime = datetime.replace(/-/g, '/')
  let time = Math.floor(Date.parse(datetime) / 1000)
  let currTime = Math.floor(new Date().getTime() / 1000)

  // 当前时间5分钟内时间不显示
  if (currTime - time < 300) return false

  // 判断是否是最后一条消息,最后一条消息默认显示时间
  if (index == records.value.length - 1) {
    return true
  }

  let nextDate = records.value[index + 1].created_at.replace(/-/g, '/')

  return !(
    parseTime(new Date(datetime), '{y}-{m}-{d} {h}:{i}') ==
    parseTime(new Date(nextDate), '{y}-{m}-{d} {h}:{i}')
  )
}

// 窗口滚动事件
const onPanelScroll = (e: any) => {
  if (e.target.scrollTop == 0) {
    onRefreshLoad()
  }

  const height = e.target.scrollTop + e.target.clientHeight

  skipBottom.value = height < e.target.scrollHeight - 200
  if (!skipBottom.value && dialogueStore.unreadBubble) {
    dialogueStore.setUnreadBubble(0)
  }

  // 设置滚动状态
  state.value.isScrolling = true
  if (state.value.scrollTimer) {
    clearTimeout(state.value.scrollTimer)
  }
  state.value.scrollTimer = window.setTimeout(() => {
    state.value.isScrolling = false
    // 滚动停止，强制触发一次
    checkVisibleOutElements()
    // 重置节流时间戳，保证下一次变化能立刻触发
    lastVisibleOutTriggerTime = Date.now()
  }, 300) // 300ms 的防抖时间

  // 检测是否到达底部
  if (skipBottom.value == false) {
    let len = dialogueStore.records.length

    if (len > 100) {
      // 为了优化数据过多页面卡顿，页面最多只显示100条数据
      // 目前没有用虚拟列表只能这么干
      dialogueStore.records.splice(0, len - 100)

      let minSequence = 0
      dialogueStore.records.forEach((item: ITalkRecord) => {
        if (minSequence == 0 || item.sequence < minSequence) {
          minSequence = item.sequence
        }
      })

      loadConfig.cursor = minSequence
      loadConfig.status = 1
    }
  }
}

// 复制文本信息
const onCopyText = (data: ITalkRecord) => {
  if (data.msg_type == 1) {
    if (data.extra.content && data.extra.content.length > 0) {
      return clipboard(htmlDecode(data.extra.content), () => useMessage.success('复制成功'))
    }
  }

  if (data.extra?.url) {
    return clipboardImage(data.extra.url, () => {
      useMessage.success('复制成功')
    })
  }
}

// 删除对话消息
const onDeleteTalk = (data: ITalkRecord) => {
  dialogueStore.ApiDeleteRecord([data.msg_id])
}

// 撤销对话消息
const onRevokeTalk = (data: ITalkRecord) => {
  dialogueStore.ApiRevokeRecord(data.msg_id)
}

// 多选事件
const onMultiSelect = (data: ITalkRecord) => {
  dialogueStore.updateDialogueRecord({
    msg_id: data.msg_id,
    isCheck: true
  })

  dialogueStore.isOpenMultiSelect = true
}

const onDownloadFile = (data: ITalkRecord) => {
  if (data.msg_type == 3) {
    return downloadImage(data.extra.url, `${data.msg_id}.${data.extra.suffix}`)
  }

  if (data.msg_type == 4) {
    return useMessage.info('音频暂不支持下载!')
  }

  return useMessage.info('视频暂不支持下载!')
}

const onQuoteMessage = (data: ITalkRecord) => {
  let item = {
    id: data.msg_id,
    title: `${data.nickname} ${data.created_at}`,
    describe: '',
    image: ''
  }

  switch (data.msg_type) {
    case 1:
      item.describe = data?.extra?.content
      break // 文本消息
    case 2:
      item.describe = '[代码消息]'
      break // 代码消息
    case 3:
      item.image = data.extra.url
      break // 图片文件
    case 4:
      item.describe = '[语音文件]'
      break // 语音文件
    case 5:
      item.describe = '[视频文件]'
      break // 视频文件
    case 6:
      item.describe = '[其它文件]'
      break // 其它文件
    case 7:
      item.describe = '[位置消息]'
      break // 位置消息
    case 8:
      item.describe = '[名片消息]'
      break // 名片消息
    case 9:
      item.describe = '[转发消息]'
      break // 转发消息
    case 10:
      item.describe = '[登录消息]'
      break // 登录消息
    case 11:
      item.describe = '[投票消息]'
      break // 投票消息
    case 12:
      item.describe = '[图文消息]'
      break // 图文消息
  }

  bus.emit('editor:quote', item)
}

const onCollectImage = (data: ITalkRecord) => {
  if (data.msg_type == 3) {
    dialogueStore.ApiCollectImage({
      msg_id: data.msg_id
    })
  }
}

const onClickNickname = (data: ITalkRecord) => {
  bus.emit(EditorConst.Mention, {
    id: data.user_id,
    value: data.nickname
  })
}

// 会话列表右键显示菜单
const onContextMenu = (e: any, item: ITalkRecord) => {
  console.log('item', item)
  if (!dialogueStore.isShowEditor || dialogueStore.isOpenMultiSelect) {
    return e.preventDefault()
  }

  showDropdownMenu(e, props.uid, item)

  e.preventDefault()
}

const onConvertText = async (data: ITalkRecord) => {
  console.log('data', data)
  data.is_convert_text = 1
  const res = await voiceToText({ msgId: data.msg_id, voiceUrl: data.extra.url })
  if (res.code == 200) {
    data.extra.content = res.data.convText
  }
}
const onloseConvertText = (data: ITalkRecord) => {
  data.is_convert_text = 0
}
const evnets = {
  copy: onCopyText,
  revoke: onRevokeTalk,
  delete: onDeleteTalk,
  multiSelect: onMultiSelect,
  download: onDownloadFile,
  quote: onQuoteMessage,
  collect: onCollectImage,
  convertText: onConvertText,
  closeConvertText: onloseConvertText
}

// 会话列表右键菜单回调事件
const onContextMenuHandle = (key: string) => {
  // 触发事件
  evnets[key] && evnets[key](dropdown.item)
  closeDropdownMenu()
}

const onRowClick = (item: ITalkRecord) => {
  if (dialogueStore.isOpenMultiSelect) {
    if (ForwardableMessageType.includes(item.msg_type)) {
      item.isCheck = !item.isCheck
    } else {
      useMessage.info('此类消息不支持转发')
    }
  }
}

const lastParams = ref('')

// 监听整个 props 对象的变化
watch(
  () => props,
  async (newProps) => {
    await nextTick()
    let specialParams = undefined
    console.error(newProps, 'newProps')
    if (newProps.specifiedMsg) {
      try {
        const parsed = JSON.parse(decodeURIComponent(newProps.specifiedMsg))
        // 只有会话id和参数都匹配才进入特殊模式
        if (
          parsed.talk_type === newProps.talk_type &&
          parsed.receiver_id === newProps.receiver_id
        ) {
          specialParams = parsed
        }
      } catch (e) {}
    }
    onLoad(
      {
        receiver_id: newProps.receiver_id,
        talk_type: newProps.talk_type,
        limit: 30
      },
      specialParams ? { specifiedMsg: specialParams } : undefined
    )
  },
  { immediate: true, deep: true }
)

// onMounted(() => {
// onLoad({ ...props, limit: 30 })
// })
const retry = (item: any) => {
  confirmBox({
    content: '确定重发吗'
  }).then(() => {
    uploadsStore.retryCommonUpload(item.extra.upload_id)
  })
}

const onContextMenuAvatar = (e: any, item: any) => {
  e.preventDefault()
  if (item.float !== 'right') {
    bus.emit(EditorConst.Mention, {
      id: item.user_id,
      value: item.nickname
    })
  }
}

const state = ref<State>({
  visibleElements: new Set(),
  visibleOutElements: new Set(),
  tempWaitDoRead: [],
  tempWaitDoCheck: [],
  setMessageReadInterval: null,
  setOutMessageReadInterval: null,
  lastUpdateTime: 0,
  isScrolling: false,
  scrollTimer: null,
  lastTriggerTime: 0,
  talkReadListDetail: [],
  readDetailIsUnread: 1,
  currentMsgReadDetail: null,
  currentReadDetailPage: 1,
  hasMoreReadListDetail: true,
  loadingReadListDetail: false
})

// 定义观察者变量
let observer: IntersectionObserver | null = null

// 检查需要发送已读回执的元素
const checkVisibleElements = () => {
  if (state.value.visibleElements.size > 0) {
    let waitDoRead: ReadStatus[] = []
    state.value.visibleElements.forEach((el: HTMLElement) => {
      const msgId = el.dataset.msgid
      const talkType = Number(el.dataset.talktype)
      const receiverId = Number(el.dataset.receiverid)

      if (!msgId) return

      if (waitDoRead.length === 0) {
        waitDoRead.push({
          msg_ids: [msgId],
          talk_type: talkType,
          receiver_id: receiverId
        })
      } else {
        const existingItem = waitDoRead.find(
          (item) => item.talk_type === talkType && item.receiver_id === receiverId
        )
        if (existingItem) {
          existingItem.msg_ids.push(msgId)
        } else {
          waitDoRead.push({
            msg_ids: [msgId],
            talk_type: talkType,
            receiver_id: receiverId
          })
        }
      }
    })
    if (waitDoRead.length > 0) {
      waitDoRead.forEach((doReadItem) => {
        const prevItem = state.value.tempWaitDoRead.find(
          (prev) =>
            prev.talk_type === doReadItem.talk_type && prev.receiver_id === doReadItem.receiver_id
        )
        if (!prevItem || !doReadItem.msg_ids.every((id) => prevItem.msg_ids.includes(id))) {
          console.error('====发送了新版已读回执=====', doReadItem)
          ws.emit('im.message.new.read', doReadItem)
        }
      })
    }
    state.value.tempWaitDoRead = JSON.parse(JSON.stringify(waitDoRead))
  }
}

// 检查需要获取别人发送的已读回执列表的元素
const checkVisibleOutElements = () => {
  if (state.value.visibleOutElements.size > 0) {
    let waitDoCheck: ReadStatus[] = []
    state.value.visibleOutElements.forEach((el: HTMLElement) => {
      const msgId = el.dataset.msgid
      const talkType = Number(el.dataset.talktype)
      const receiverId = Number(el.dataset.receiverid)

      if (!msgId) return

      if (waitDoCheck.length === 0) {
        waitDoCheck.push({
          msg_ids: [msgId],
          talk_type: talkType,
          receiver_id: receiverId,
          user_id: props.uid
        })
      } else {
        const existingItem = waitDoCheck.find(
          (item) => item.talk_type === talkType && item.receiver_id === receiverId
        )
        if (existingItem) {
          existingItem.msg_ids.push(msgId)
        } else {
          waitDoCheck.push({
            msg_ids: [msgId],
            talk_type: talkType,
            receiver_id: receiverId,
            user_id: props.uid
          })
        }
      }
    })
    if (waitDoCheck.length > 0) {
      waitDoCheck.forEach((doCheckItem) => {
        console.error('====组装了新版已读回执参数，需要发送socket=====', doCheckItem)
        ws.emit('im.message.listen.read', doCheckItem)
      })
    }
    state.value.tempWaitDoCheck = JSON.parse(JSON.stringify(waitDoCheck))
  }
}

// 定义节流时间戳
let lastVisibleOutTriggerTime = 0

//新版采用socket监听已读回执，不轮询接口
watch(
  () => state.value.visibleOutElements,
  (newVal) => {
    const now = Date.now()
    if (now - lastVisibleOutTriggerTime < 1000) {
      return
    }
    lastVisibleOutTriggerTime = now
    checkVisibleOutElements()
  },
  {
    deep: true,
    immediate: true
  }
)

// 观察者函数
const handleIntersection = (entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting && entry.intersectionRatio >= 0.5) {
      let elData = entry.target.dataset
      const msgType = elData.msgtype
      const userId = elData.userid
      if (Number(msgType) < 1000 && Number(userId) !== Number(props.uid)) {
        //我读别人发的消息，需要发送已读回执
        state.value.visibleElements.add(entry.target)
      }
      if (Number(msgType) < 1000 && Number(userId) === Number(props.uid)) {
        //我发的消息，需要获取别人发送的已读回执列表
        state.value.visibleOutElements.add(entry.target)
      }
    } else {
      // 元素离开视口，从集合中移除
      state.value.visibleElements.delete(entry.target)
      state.value.visibleOutElements.delete(entry.target)
    }
  })
}

// 监听消息列表变化
watch(
  () => records.value,
  () => {
    nextTick(() => {
      // 断开旧的观察者
      if (observer) {
        observer.disconnect()
      }

      // 重新初始化观察者
      const options = {
        root: null,
        threshold: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0],
        rootMargin: '50px 0px'
      }
      observer = new IntersectionObserver(handleIntersection, options)

      // 重新观察所有消息元素
      const messageElements = document.querySelectorAll('.message-item')
      messageElements.forEach((el) => {
        if (observer) {
          observer.observe(el)
        }
      })
    })
  },
  { deep: true }
)

// 事件总线防抖处理
let eventBusDebounceTimer: number | null = null

onMounted(() => {
  // 事件总线监听
  bus.subscribe('check-visible-out-elements', (type) => {
    if (eventBusDebounceTimer) {
      clearTimeout(eventBusDebounceTimer)
    }
    eventBusDebounceTimer = window.setTimeout(() => {
      checkVisibleOutElements()
      eventBusDebounceTimer = null
    }, 500)
  })
  //设置观察者前设置定时器
  if (state.value.setMessageReadInterval) {
    clearInterval(state.value.setMessageReadInterval)
    state.value.setMessageReadInterval = null
  }
  state.value.setMessageReadInterval = setInterval(() => {
    checkVisibleElements()
  }, 2000)

  if (state.value.setOutMessageReadInterval) {
    clearInterval(state.value.setOutMessageReadInterval)
    state.value.setOutMessageReadInterval = null
  }
  // 旧版采用定时器来轮询已读回执，新版采用socket监听已读回执
  // state.value.setOutMessageReadInterval = setInterval(() => {
  //   checkVisibleOutElements()
  // }, 2000)

  //初始化设置观察者
  const options = {
    root: null,
    threshold: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0],
    rootMargin: '50px 0px'
  }
  observer = new IntersectionObserver(handleIntersection, options)

  // 观察所有消息元素
  nextTick(() => {
    const messageElements = document.querySelectorAll('.message-item')
    messageElements.forEach((el) => {
      if (observer) {
        observer.observe(el)
      }
    })
  })
})

onUnmounted(() => {
  if (observer) {
    observer.disconnect()
  }
  if (state.value.setMessageReadInterval) {
    clearInterval(state.value.setMessageReadInterval)
    state.value.setMessageReadInterval = null
    checkVisibleElements()
  }
  if (state.value.setOutMessageReadInterval) {
    clearInterval(state.value.setOutMessageReadInterval)
    state.value.setOutMessageReadInterval = null
    checkVisibleOutElements()
  }
  // 清理事件总线防抖定时器
  if (eventBusDebounceTimer) {
    clearTimeout(eventBusDebounceTimer)
    eventBusDebounceTimer = null
  }
  // 事件总线移除监听
  bus.unsubscribe('check-visible-out-elements', checkVisibleOutElements)
})

//点击显示对应消息的已读回执详情
const toShowMessageReadDetail = async (item?: ITalkRecord) => {
  if (item) {
    state.value.currentMsgReadDetail = item
    onReadTabChange('unread-tab')
    return
  }
  let params = {
    page: state.value.currentReadDetailPage,
    pageSize: 10,
    type: 'detail', //list是列表，detail是详情
    talkType: state?.value?.currentMsgReadDetail?.talk_type, //1私聊2群聊
    receiverId: state?.value?.currentMsgReadDetail?.receiver_id, //私聊的时候是对方用户id，群聊的时候是对方群id
    msgId: state?.value?.currentMsgReadDetail?.msg_id,
    isUnread: state?.value?.readDetailIsUnread //不送或者送0代表看已读，送1看未读
  }
  console.log(params)
  const resp = await ServeMessageReadDetail(params)
  console.log(resp)
  if (resp.code === 200) {
    console.log(resp?.data?.data?.length)
    if (resp?.data?.data?.length > 0) {
      state.value.hasMoreReadListDetail = true
      if (state.value.currentReadDetailPage === 1) {
        state.value.talkReadListDetail = resp.data.data
      } else {
        state.value.talkReadListDetail = [...state.value.talkReadListDetail, ...resp.data.data]
      }
    } else {
      if (state.value.currentReadDetailPage === 1) {
        state.value.talkReadListDetail = []
      }
      state.value.hasMoreReadListDetail = false
    }
  }
}

//已读回执tab切换
const onReadTabChange = (value) => {
  if (value === 'unread-tab') {
    //未读
    state.value.readDetailIsUnread = 1
  } else if (value === 'read-tab') {
    //已读
    state.value.readDetailIsUnread = 0
  }
  state.value.currentReadDetailPage = 1
  toShowMessageReadDetail()
}

//加载更多已读回执
const loadMoreReadListDetail = () => {
  console.log('loadMoreReadListDetail')
  if (!state.value.hasMoreReadListDetail || state.value.loadingReadListDetail) {
    return
  }
  state.value.loadingReadListDetail = true
  state.value.currentReadDetailPage++
  toShowMessageReadDetail().finally(() => {
    state.value.loadingReadListDetail = false
  })
}
</script>

<template>
  <section class="section">
    <div
      id="imChatPanel"
      class="me-scrollbar me-scrollbar-thumb talk-container"
      @scroll="onPanelScroll($event)"
    >
      <!-- 数据加载状态栏 -->
      <div class="load-toolbar pointer">
        <span v-if="loadConfig.status == 0"> 正在加载数据中 ... </span>
        <span v-else-if="loadConfig.status == 1" @click="onRefreshLoad"> 查看更多消息 ... </span>
        <span v-else class="no-more"> 没有更多消息了 </span>
      </div>

      <div
        class="message-item"
        v-for="(item, index) in records"
        :key="item.msg_id"
        :id="item.msg_id"
        :data-msgid="item.msg_id"
        :data-msgtype="item.msg_type"
        :data-userid="item.user_id"
        :data-talktype="props?.talk_type"
        :data-receiverid="props?.receiver_id"
      >
        <!-- 系统消息 -->
        <div v-if="item.msg_type >= 1000" class="message-box">
          <component
            :is="MessageComponents[item.msg_type] || 'unknown-message'"
            :extra="item.extra"
            :data="item"
          />
        </div>

        <!-- 撤回消息 -->
        <div v-else-if="item.is_revoke == 1" class="message-box">
          <revoke-message
            :login_uid="uid"
            :data="item"
            :user_id="item.user_id"
            :nickname="item.nickname"
            :talk_type="item.talk_type"
            :datetime="item.created_at"
          />
        </div>

        <div
          v-else
          class="message-box record-box"
          :class="{
            'direction-rt': item.float == 'right',
            'multi-select': dialogueStore.isOpenMultiSelect,
            'multi-select-check': item.isCheck
          }"
        >
          <!-- 多选按钮 -->
          <aside v-if="dialogueStore.isOpenMultiSelect" class="checkbox-column shrink-0">
            <n-checkbox
              size="small"
              :checked="item.isCheck"
              @update:checked="item.isCheck = !item.isCheck"
            />
          </aside>
          <!-- 头像信息 -->

          <aside class="avatar-column">
            <im-avatar
              class="pointer"
              :src="item.avatar"
              :size="42"
              :username="item.nickname"
              @contextmenu.prevent="onContextMenuAvatar($event, item)"
              @click="showUserInfoModal(item.erp_user_id, item.user_id)"
            />
          </aside>

          <!-- 主体信息 -->
          <main class="main-column">
            <!-- <div class="talk-title">
              <span
                class="nickname pointer"
                v-show="talk_type == 2 && item.float == 'left'"
                @click="onClickNickname(item)"
              >
                <span class="at">@</span>{{ item.nickname }}
              </span>
              <span>{{ parseTime(item.created_at, '{y}/{m}/{d} {h}:{i}') }}</span>
            </div> -->
            <div class="talk-title">
              <span class="mr-7px" v-show="talk_type == 2 && item.float == 'left'"
                >{{ item.nickname }}
              </span>
              <span>{{ parseTime(item.created_at, '{y}/{m}/{d} {h}:{i}') }}</span>
            </div>
            <div
              class="talk-content"
              :class="{ pointer: dialogueStore.isOpenMultiSelect }"
              @click="onRowClick(item)"
            >
              <component
                :is="MessageComponents[item.msg_type] || 'unknown-message'"
                :extra="item.extra"
                :data="item"
                :max-width="true"
                :source="'panel'"
                @contextmenu.prevent="onContextMenu($event, item)"
              />
              <div
                v-if="
                  item.float === 'right' && item.extra.percentage === -1 && item.extra.is_uploading
                "
                class="mr-10px"
              >
                <n-button text style="font-size: 20px;" @click="retry(item)">
                  <n-icon color="#CF3050">
                    <ExclamationCircleFilled />
                  </n-icon>
                </n-button>
              </div>
              <!-- <div class="talk-tools">
                <template v-if="talk_type == 1 && item.float == 'right'">
                  <loading
                    theme="outline"
                    size="19"
                    fill="#000"
                    :strokeWidth="1"
                    class="icon-rotate"
                    v-show="item.send_status == 1"
                  />

                  <span v-show="item.send_status == 1"> 正在发送... </span>
                  <span v-show="item.send_status != 1"> 已送达 </span>
                </template>

<n-icon class="more-tools pointer" :component="MoreThree" @click="onContextMenu($event, item)" />
</div> -->
            </div>

            <div
              v-if="item.extra.reply"
              class="talk-reply pointer"
              @click="onJumpMessage(item.extra?.reply?.msg_id)"
            >
              <n-icon :component="ToTop" size="14" class="icon-top" />
              <span class="ellipsis">
                回复 {{ item.extra?.reply?.nickname }}:
                {{ item.extra?.reply?.content }}
              </span>
            </div>

            <!-- 已读回执 -->
            <div class="talk_read_num" v-if="item.user_id === props.uid">
              <n-popover trigger="click" placement="bottom-end" style="height: 382px; padding: 0;">
                <template #trigger>
                  <span v-if="props.talk_type === 1">{{
                    item.read_total_num > 0 ? '已读' : '未读'
                  }}</span>
                  <span v-if="props.talk_type === 2" @click="toShowMessageReadDetail(item)">
                    已读 ({{ item?.read_total_num || 0 }}/{{
                      props.num - 1 > 0 ? props.num - 1 : 0
                    }})
                  </span>
                </template>
                <div class="talk-read-list-detail">
                  <n-tabs
                    type="line"
                    animated
                    justify-content="space-around"
                    @update:value="onReadTabChange"
                  >
                    <n-tab name="unread-tab">
                      {{ `未读(${props.num - 1 - (item.read_total_num || 0) || 0})` }}
                    </n-tab>
                    <n-tab name="read-tab">
                      {{ `已读(${item.read_total_num || 0})` }}
                    </n-tab>
                  </n-tabs>
                  <div class="talk-read-list">
                    <n-infinite-scroll style="height: 340px;" @load="loadMoreReadListDetail">
                      <div
                        class="talk-read-list-item"
                        v-for="(talkReadDetailItem,
                        talkReadDetailIndex) in state.talkReadListDetail"
                        :key="talkReadDetailIndex"
                      >
                        <avatarModule
                          :mode="1"
                          :avatar="talkReadDetailItem.avatar"
                          :userName="talkReadDetailItem.nickName"
                          :groupType="0"
                          :customStyle="{
                            width: '36px',
                            height: '36px'
                          }"
                          :customTextStyle="{
                            fontSize: '12px',
                            fontWeight: 'bold',
                            color: '#fff',
                            lineHeight: '17px'
                          }"
                        ></avatarModule>
                        <div class="talk-read-list-item-info">
                          <span style="font-size: 12px; font-weight: 600; line-height: 17px;">{{
                            talkReadDetailItem.nickName
                          }}</span>
                          <span style="font-size: 12px; color: #999; line-height: 14px;">{{
                            talkReadDetailItem.jobNum
                          }}</span>
                        </div>
                      </div>
                    </n-infinite-scroll>
                  </div>
                </div>
              </n-popover>
            </div>
          </main>
        </div>

        <div class="datetime" v-show="isShowTalkTime(index, item.created_at)">
          {{ formatTime(item.created_at) }}
        </div>
      </div>
    </div>

    <!-- 置底按钮 -->
    <SkipBottom v-model="skipBottom" />
  </section>

  <!-- 右键菜单 -->
  <n-dropdown
    :show="dropdown.show"
    :x="dropdown.x"
    :y="dropdown.y"
    style="width: 142px;"
    :options="dropdown.options"
    @select="onContextMenuHandle"
    @clickoutside="closeDropdownMenu"
  />
</template>

<style lang="less" scoped>
.section {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.talk-container {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 15px 30px;
  overflow-y: auto;
  overflow-x: hidden;

  .load-toolbar {
    height: 38px;
    color: #409eff;
    text-align: center;
    line-height: 38px;
    font-size: 13px;

    .no-more {
      color: #b9b3b3;
    }
  }

  .message-item {
    &.border {
      border-radius: 10px;
      border: 1px solid var(--im-primary-color);
    }
  }

  .message-box {
    width: 100%;
    min-height: 30px;
    margin-bottom: 5px;
  }

  .datetime {
    height: 30px;
    line-height: 30px;
    color: #ccc9c9;
    font-size: 12px;
    text-align: center;
    margin: 5px 0;
  }

  .record-box {
    display: flex;
    flex-direction: row;

    .checkbox-column {
      display: flex;
      justify-content: center;
      width: 35px;
      order: 1;
      user-select: none;
      padding-top: 12px;
    }

    .avatar-column {
      width: 47px;
      display: flex;
      align-items: center;
      order: 2;
      user-select: none;
      padding-top: 10px;
      flex-direction: column;
    }

    .main-column {
      flex: 1 auto;
      order: 3;
      position: relative;
      box-sizing: border-box;
      padding: 5px;
      overflow: hidden;
      min-height: 30px;

      .talk-title {
        display: flex;
        align-items: center;
        height: 24px;
        margin-bottom: 2px;
        font-size: 12px;
        user-select: none;
        color: #a7a0a0;
        opacity: 1;

        &.show {
          opacity: 1;
        }

        .nickname {
          color: var(--im-text-color);
          margin-right: 5px;
          font-size: 12px;

          .at {
            display: none;
          }

          &:hover {
            color: var(--im-primary-color);

            .at {
              display: inline-block;
            }
          }
        }

        span {
          transform: scale(0.88);
          transform-origin: left center;
        }
      }

      .talk-content {
        display: flex;
        justify-content: flex-start;
        align-items: flex-end;

        box-sizing: border-box;
        width: 100%;

        .talk-tools {
          display: flex;
          margin: 0 8px;
          color: #a79e9e;
          font-size: 12px;
          user-select: none;
          align-items: center;
          justify-content: space-around;

          .more-tools {
            visibility: hidden;
            margin-left: 5px;
          }
        }
      }

      .talk-reply {
        display: flex;
        align-items: flex-start;
        align-items: center;
        width: fit-content;
        padding: 4px;
        margin-top: 3px;
        margin-right: auto;
        font-size: 12px;
        color: #8f8f8f;
        word-break: break-all;
        background-color: var(--im-message-left-bg-color);
        border-radius: 5px;
        max-width: 300px;
        overflow: hidden;
        user-select: none;

        .icon-top {
          margin-right: 3px;
        }

        .ellipsis {
          display: -webkit-inline-box;
          text-overflow: ellipsis;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
        }
      }

      .talk_read_num {
        text-align: right;
        color: #7a58de;
        font-size: 12px;
        font-weight: 400;
        line-height: 17px;
        margin: 5px 0 0;
        span {
          cursor: pointer;
        }
      }

      &:hover {
        .talk-title {
          opacity: 1;
        }

        .more-tools {
          visibility: visible !important;
        }
      }
    }

    &.direction-rt {
      .avatar-column {
        order: 3;
      }

      .main-column {
        order: 2;

        .talk-title {
          justify-content: flex-end;

          span {
            transform-origin: right center;
          }
        }

        .talk-content {
          flex-direction: row-reverse;
        }

        .talk-reply {
          margin-right: 0;
          margin-left: auto;
        }
      }
    }

    &.multi-select {
      border-radius: 5px;

      &:hover,
      &.multi-select-check {
        background-color: var(--im-active-bg-color);
      }
    }
  }
}

.talk-read-list-detail {
  width: 341px;
  padding: 0 14px;

  .talk-read-list {
    .talk-read-list-item {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      gap: 10px;
      padding: 10px 0;
      border-bottom: 1px solid #f1f1f1;

      .talk-read-list-item-info {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;

        span {
        }
      }
    }
  }
}
</style>