packages/customerService/index/index
<template>
  <view class="chat-container">
    <!-- 聊天头部 -->
    <view :style="{ paddingTop: top + 'px', height: localHeight + 'px' }" class="chat-header">
      <view class="back-btn" @tap="goBack">
        <uni-icons color="#333" size="28" type="left"></uni-icons>
      </view>
      <view class="chat-title">{{ chatTarget.title || '客服' }}</view>
      <view class="change-service-btn" @tap="goToChangeService">
        <uni-icons color="#333" size="22" type="switch"></uni-icons>
      </view>
    </view>

    <!-- 连接状态提示 -->
    <view v-if="connectingStatus" class="connecting-status">{{ connectingStatus }}</view>

    <!-- 聊天消息区域 -->
    <scroll-view :scroll-into-view="scrollToView" class="chat-messages" lower-threshold="100" scroll-y="true"
                 upper-threshold="100" @scrolltolower="loadMoreHistory" @scrolltoupper="loadMoreHistory">
      <!-- 加载历史消息提示 -->
      <view v-if="isLoadingHistory" class="message-time">加载历史消息...</view>

      <!-- 消息列表 -->
      <block v-for="(message, index) in messages" :key="index">
        <!-- 时间分割线 -->
        <view v-if="needShowTime(index)" class="message-time">{{ formatTime(message.time) }}</view>

        <!-- 消息项 -->
        <view :id="'msg-' + index" :class="{
          'self': message.isSelf,
          'other': !message.isSelf,
          'loading': message.isLoading
        }" class="message-item">
          <image :src="message.isSelf ? userAvatar : getAvatarUrl(message)" class="message-avatar"
                 mode="aspectFill"></image>
          <view class="message-content">
            {{ message.content }}
          </view>
        </view>
      </block>
    </scroll-view>

    <!-- 输入区域 -->
    <view class="chat-input-area">
      <view class="input-container">
        <textarea v-model="inputMessage" :adjust-position="true" auto-height class="message-input"
                  cursor-spacing="10" enable-keyboard-accessory-view="true" hold-keyboard="true" maxlength="500"
                  placeholder="请输入消息..." @blur="onInputBlur" @confirm="sendMessage" @focus="onInputFocus"
                  @input="handleInput"></textarea>
        <button :disabled="inputMessage.trim() === ''" class="send-btn" @tap="sendMessage">
          发送
        </button>
      </view>
    </view>
  </view>
</template>

<script>
import { menuButtonInfo, picUrl, request } from '@/utils'
import { apiArr } from '@/api/customerService'
import mqttTool from '@/utils/mqtt'

export default {
  data(){
    return {
      localHeight: '',
      top: '',
      // 聊天目标信息
      chatTarget: {
        mchId: '',
        bindId: 0,
        title: '',
        avatar: '',
        openId: '' // 接收方的open_id
      },
      // 用户头像
      userAvatar: '',
      // 消息列表
      messages: [],
      // 输入的消息
      inputMessage: '',
      // 是否可以发送消息
      canSend: false,
      // 连接状态
      isConnected: false,
      // 连接状态文本
      connectingStatus: '',
      // 滚动到指定视图
      scrollToView: '',
      // 是否加载历史消息
      isLoadingHistory: false,
      // 心跳包定时器
      keepaliveTimer: null,
      selfClientId: uni.getStorageSync('openId'),
      // MQTT工具实例
      client: null,
      // 重连失败提示定时器
      reconnectFailedTimer: null,
      // 分页参数
      pageNum: 1,
      pageSize: 10,
      // 是否还有更多历史消息
      hasMoreHistory: true,
      // 滚动到底部的标记
      scrollToBottomFlag: false
    }
  },
  onLoad(options){
    const meun = menuButtonInfo()
    this.top = meun.top
    this.localHeight = meun.height
    // 获取聊天对象信息
    if (options.item) {
      const item = JSON.parse(options.item)
      console.log('参数接收:', item)
      if (Number(item.type) === 1) {
        // 客户选择客服跳转进来
        this.chatTarget = item
        console.log('客户找客服跳转:', this.chatTarget)
        this.chatTarget.title = this.chatTarget.employee_name
        this.getMqttConfig()
      } else {
        // 客服选择聊天列表进来
        this.chatTarget = item
        console.log('客服找客户进来:', this.chatTarget)
        this.chatTarget.title = this.chatTarget.server_name
        this.chatTarget.bindId = this.chatTarget.id
        if (this.chatTarget.client_id_one === this.selfClientId) {
          this.chatTarget.openId = this.chatTarget.client_id_two
        } else {
          this.chatTarget.openId = this.chatTarget.client_id_one
        }
      }
    }
    // 初始化MQTT连接
    this.initChat()
    // 初始化用户头像
    this.userAvatar = picUrl + uni.getStorageSync('headPhoto')
  },
  onShow(){
  },
  methods: {
    getAvatarUrl(record){
      return this.chatTarget.employee_image ? this.chatTarget.employee_image : 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/defaultTx.png'
    },
    async connect(){
      this.client = null
      const options = {
        clientId: this.selfClientId
      }

      // 添加连接状态回调
      const callbacks = {
        onConnect: () => {
          console.log('客服连接成功')
          this.isConnected = true
          this.connectingStatus = ''
        },
        onDisconnect: this.onDisconnect.bind(this),
        onError: (error) => {
          console.error('客服连接错误:', error)
          this.isConnected = false
          this.connectingStatus = '连接错误，请重试'
        },
        onReconnect: () => {
          console.log('客服正在重连...')
          this.isConnected = false
          this.connectingStatus = '连接已断开，正在重连...'
        }
      }

      this.client = mqttTool.connect(options, callbacks)
      this.isConnected = !!this.client

      await this.subscribe()
      this.client.on('message', (topic, message) => {
        const msgStr = Buffer.from(message).toString('utf8') // 二进制转UTF-8字符串
        const msg = JSON.parse(msgStr) // 后续解析逻辑不变

        let jsMsg = msg // 直接使用已解析的对象，无需再次解析
        console.log('收到消息', topic, msg)
        if (jsMsg.send_client === this.selfClientId || jsMsg.receive_client === this.selfClientId) {
          console.log('接收或发送人是我')
          if (jsMsg.send_client === this.chatTarget.openId || jsMsg.receive_client === this.chatTarget.openId) {
            console.log('接收或发送人是我的聊天对象')
            this.messages.push({
              content: jsMsg.content,
              time: Date.now(),
              isSelf: jsMsg.send_client === this.selfClientId,
              isLoading: false
            })
            console.log('收到我的消息', this.messages)
            this.scrollToView = 'msg-' + (this.messages.length - 1)
          }
        }
      })
    },
    async subscribe(){
      if (this.isConnected && this.client) {
        this.client.subscribe('contact/message/receive_msg', { qos: 0 }, (err) => {
          if (!err) {
            console.log('订阅成功', 'contact/message/receive_msg', { qos: 0 })
            this.connectingStatus = ''
          } else {
            console.log('订阅失败:', err)
            this.connectingStatus = '订阅失败，请重试'
          }
        })
      } else {
        console.log('连接失败', this.isConnected, this.client)
        this.connectingStatus = '连接失败，请重试'
      }
    },
    // 初始化聊天
    async initChat(){
      try {
        // 显示连接状态
        this.connectingStatus = '正在连接客服...'
        await this.connect()
        // 连接成功后启动心跳包
        this.startKeepalive()
        // 连接成功后立即加载历史消息
        await this.loadHistoryMessages()
      } catch (error) {
        console.error('初始化聊天失败', error)
        this.connectingStatus = '连接失败，请检查网络'

        // 失败后尝试重新连接
        this.reconnectFailedTimer = setTimeout(() => {
          this.initChat()
        }, 3000)
      }
    },

    // 获取MQTT连接配置
    async getMqttConfig(){
      console.log('🚀 ~ onLoad ~ this.chatTarget.open_id:', this.chatTarget.open_id)
      try {
        // 如果没有已创建的实例或clientId，则通过API获取
        return new Promise((resolve, reject) => {
          const params = {
            worker_id: this.chatTarget.id || '',
            open_id: this.selfClientId || ''
          }
          request(apiArr.csGetToClientId, 'POST', params).then((res) => {
            console.log('聊天列表:', res)
            // 检查响应数据格式是否正确
            if (res && res.client_bind && res.client_bind.client_id_one && res.client_bind.client_id_two) {
              if (res.client_bind.client_id_one === this.selfClientId) {
                this.chatTarget.openId = res.client_bind.client_id_two
              } else {
                this.chatTarget.openId = res.client_bind.client_id_one
              }
              this.chatTarget.bindId = res.client_bind.id
              resolve()
            } else {
              console.error('MQTT配置响应格式不正确:', res)
              reject(new Error('未获取到有效的MQTT配置'))
            }
          }).catch(error => {
            console.error('获取MQTT配置失败', error)
            reject(error)
          })
        })
      } catch (error) {
        console.error('获取MQTT配置失败', error)
        throw error
      }
    },

    // MQTT断开连接回调
    onDisconnect(packet){
      console.log('MQTT连接断开', packet)
      this.isConnected = false
      this.client = null

      // 根据断开原因设置不同的连接状态文本
      if (packet && packet.error) {
        // 连接失败的情况
        this.connectingStatus = '连接失败，请检查网络'
      } else {
        // 其他断开连接的情况
        this.connectingStatus = '连接已断开，正在重连...'
      }

      // 停止心跳包
      this.stopKeepalive()
    },

    // 加载历史消息
    async loadHistoryMessages(){
      if (!this.hasMoreHistory || this.isLoadingHistory) {
        return
      }

      try {
        this.isLoadingHistory = true

        // 确保已经获取了mqttConfig.bindId
        if (!this.chatTarget.bindId) {
          await this.getMqttConfig()
        }

        const params = {
          bindId: this.chatTarget.bindId,
          order: 'desc', // 按时间降序排列
          page_num: this.pageNum,
          page_size: this.pageSize
        }

        console.log('请求历史消息参数:', params)
        const res = await request(apiArr.csGetMsgRecord, 'POST', params)

        console.log('历史消息返回结果:', res)
        if (res && res.code === 1 && res.data && res.data.msg_record) {
          const historyMessages = res.data.msg_record

          // 如果没有更多历史消息了
          if (historyMessages.length === 0) {
            this.hasMoreHistory = false
            return
          }

          // 将获取到的历史消息添加到消息列表开头
          // 这里需要根据消息的发送方判断是否是自己发送的消息
          historyMessages.map(msg => (
              this.messages = [{
                content: msg.content,
                time: new Date(msg.create_time).getTime(),
                isSelf: msg.send_client === this.chatTarget.openId,
                isLoading: false
              }, ...this.messages])) // 因为是按时间降序获取的，所以需要反转

          // 添加到消息列表开头
          // this.messages = [...formattedMessages, ...this.messages]

          // 增加页码
          this.pageNum++
        }
      } catch (error) {
        console.error('加载历史消息失败', error)
      } finally {
        this.isLoadingHistory = false
      }
    },

    // 加载更多历史消息
    loadMoreHistory(e){
      // 只有当滚动到顶部时才加载更多历史消息
      if (!e || e.detail.direction === 'top') {
        if (!this.isLoadingHistory && this.hasMoreHistory) {
          this.loadHistoryMessages()
        }
      }
    },

    // 发送消息
    sendMessage(){
      const content = this.inputMessage.trim()
      console.log('发送消息', content)
      if (!content || !this.client || !this.isConnected) return
      // 滚动到底部
      this.scrollToBottom()
      console.log('需要发送的对象', this.chatTarget)
      // 按照用户提供的格式构建发送消息
      const msgData = {
        bind_id: this.chatTarget.bindId, // 聊天列表的ID，这里暂时固定为1
        send_client: this.selfClientId, // 消息发送方open_id 
        receive_client: this.chatTarget.openId, // 消息接收方open_id
        type: 1, // 消息类型，1表示文字消息
        content: content, // 消息内容
        receive_read_status: 2 // 接收方阅读状态
      }
      console.log('发送消息', msgData)
      this.client.publish(
          'contact/message/send_msg', // 使用指定的发送消息主题
          JSON.stringify(msgData),
          { Qos: 0 },
          (err) => {
            if (err) {
              console.error('发送消息失败', err)
              // 可以在这里添加消息发送失败的处理逻辑
            } else {
              console.log('发送消息成功')
            }
          }
      )

      // 清空输入框
      this.inputMessage = ''
    },

    // 处理输入事件
    handleInput(){
      this.canSend = this.inputMessage.trim().length > 0
    },

    onInputFocus(){
      // 输入框获取焦点时，设置滚动到底部的标记
      this.scrollToBottomFlag = true
      setTimeout(() => {
        if (this.scrollToBottomFlag) {
          this.scrollToBottom()
        }
      }, 300)
    },

    onInputBlur(){
      // 输入框失去焦点时，重置滚动标记
      this.scrollToBottomFlag = false
    },

    // 是否需要显示时间分割线
    needShowTime(index){
      if (index === 0) return true

      const currentMsg = this.messages[index]
      const prevMsg = this.messages[index - 1]

      // 如果两条消息间隔超过5分钟，则显示时间分割线
      return (currentMsg.time - prevMsg.time) > 5 * 60 * 1000
    },

    // 格式化时间
    formatTime(time){
      const date = new Date(time)
      const hours = date.getHours().toString().padStart(2, '0')
      const minutes = date.getMinutes().toString().padStart(2, '0')

      return `${ hours }:${ minutes }`
    },

    // 滚动到底部
    scrollToBottom(){
      setTimeout(() => {
        this.scrollToView = 'msg-' + (this.messages.length - 1)
      }, 100)
    },

    // 返回上一页
    goBack(){
      uni.navigateBack()
    },

    // 启动心跳包 - 增强版：添加错误处理和状态检查
    startKeepalive(){
      // 停止之前的定时器
      this.stopKeepalive()

      // 每30秒发送一次心跳包
      this.keepaliveTimer = setInterval(() => {
        if (this.client && this.isConnected) {
          const keepaliveData = {
            client_id: this.selfClientId // 自己的client_id
          }

          this.client.publish(
              'contact/message/keep_time',
              JSON.stringify(keepaliveData),
              {},
              (err) => {
                if (err) {
                  console.error('发送心跳包失败', err)
                  // 心跳包发送失败可能表示连接有问题，可以考虑触发重连
                  if (!this.isConnected) {
                    return
                  }
                  console.log('心跳包发送失败，尝试检查连接状态')
                  // 这里可以添加额外的连接检查逻辑
                }
              }
          )
        } else {
          console.warn('MQTT未连接，停止心跳包')
          this.stopKeepalive()
        }
      }, 30000)
    },

    // 停止心跳包
    stopKeepalive(){
      if (this.keepaliveTimer) {
        clearInterval(this.keepaliveTimer)
        this.keepaliveTimer = null
      }
    },

    // 跳转到切换客服页面
    goToChangeService(){
      uni.navigateTo({
        url: '/packages/customerService/changeService/index?currentMchId=' + this.chatTarget.mchId
      })
    }
  },

  // 页面卸载时停止心跳包
  onUnload(){
    // 断开MQTT连接
    if (this.client) {
      this.client.disconnect()
    }

    // 停止心跳包
    this.stopKeepalive()

    // 清除重连失败提示定时器
    if (this.reconnectFailedTimer) {
      clearTimeout(this.reconnectFailedTimer)
      this.reconnectFailedTimer = null
    }
  }
}
</script>

<style>
@import url("./index.css");
</style>