health.applet/miniprogram/module/chats/components/message-consult/message-consult.ts

interface ConsultMessage {
  id: string; //	咨询记录详情ID
  consultRecordId: number; //咨询记录ID
  sender: "user" | "agent" | "human" | "system";
  sendType: string; //	发送类型 1-患者 2-医生 3-系统 4-AI
  messageType: "1" | "2"; // 1文本 2 图片
  messageContent?: string; // 消息内容
  sendTime?: string; // 发送消息的时间
}
import { Post } from "../../../../lib/request/method";
import { upload } from "../../../../lib/request/upload";
import dayjs from "dayjs";

// sendType映射: 1-患者 2-医生 3-系统 4-AI
const sendTypeMap: Record<string, "user" | "agent" | "human" | "system"> = {
  "1": "user", // 患者
  "2": "human", // 医生
  "3": "system", // 系统
  "4": "agent", // AI
};

// 计算底部安全区位置（rpx）
function calculateSafeBottomRpx(): number {
  const systemInfo = wx.getSystemInfoSync();
  // 获取窗口的高度
  const windowHeight = systemInfo.windowHeight;
  // 获取安全区底部的高度
  const safeAreaBottom = systemInfo.safeArea?.bottom ?? windowHeight;
  const safeBottom = windowHeight - safeAreaBottom;
  //将px转为rpx
  return (750 / systemInfo.windowWidth) * safeBottom;
}

// 判断消息是否为真正的咨询结束消息（排除30分钟提醒消息）
function isConsultEndMessage(msg: ConsultMessage): boolean {
  if (msg.sendType !== "3" || !msg.messageContent) {
    return false;
  }
  const content = msg.messageContent;
  // 排除30分钟提醒消息（包含"30分钟"和"5分钟后"）
  const isReminder =
    content.includes("30分钟") &&
    (content.includes("5分钟后") || content.includes("将在"));
  // 判断是否为真正的咨询结束消息
  const isRealEnd = content.includes("咨询结束") && !isReminder;
  return isRealEnd;
}

// 获取的聊天消息为ConsultMessage格式 提取为一个公共的方法
function transformMessage(item: AnyObject): ConsultMessage {
  const sender = sendTypeMap[item.sendType];
  return {
    id: `msg-${item.id}`,
    consultRecordId: item.consultRecordId,
    sender,
    sendTime: item.sendTime || "",
    sendType: item.sendType,
    messageType: item.messageType as "1" | "2",
    messageContent: item.messageContent || "",
  };
}

Component({
  properties: {},
  data: {
    messages: [] as ConsultMessage[],
    inputText: "",
    inputFocus: true,
    inputBoxBottom: 0,
    baseInputBottom: 0,
    keepFocus: true,
    _kbTimer: 0 as any,
    _keyboardHeight: 0, // 当前键盘高度
    isTransferredToHuman: false, // 是否已转人工
    consultEnded: false, // 是否已结束咨询
    _pollTimer: 0 as any, // 5秒轮询最新消息定时器
    textareaHeight: 80, // textarea 高度（rpx），初始值与 min-height 一致
  },

  lifetimes: {
    async attached() {
      const safeBottomRpx = calculateSafeBottomRpx();
      const tabBarHeight = 100; // rpx
      const baseBottom = safeBottomRpx + tabBarHeight;
      console.log("baseBottom==输入框的位置", baseBottom);
      // 获取咨询中的id
      const consultId = wx.getStorageSync("consultId");
      let messages: ConsultMessage[] = [];

      if (consultId) {
        try {
          // 获取所有消息的数据
          const res = await Post(`/consultManage/getAllMsgs/${consultId}`);
          if (res.data && res.data.length > 0) {
            messages = res.data.map((item: AnyObject) =>
              transformMessage(item)
            );
          }
        } catch (error: any) {
          wx.showToast({
            title: error?.errMsg || "获取历史消息失败",
            icon: "none",
          });
        }
      }

      // 检查历史消息中是否有真正的咨询结束消息（排除30分钟提醒消息）
      const hasEndMessage = messages.some((msg: ConsultMessage) =>
        isConsultEndMessage(msg)
      );

      const consultEnded = hasEndMessage || wx.getStorageSync("consultEnded");
      console.log(
        "安全区的距离",
        safeBottomRpx,
        "consultEnded==是否已结束咨询",
        consultEnded
      );
      this.setData({
        baseInputBottom: baseBottom,
        inputBoxBottom: baseBottom,
        messages,
        consultEnded: !!consultEnded,
      });
      console.log("baseBottom==输入框的位置", baseBottom);
      this.triggerEvent("boxBottom", { inputBoxBottom: baseBottom });
      // 监听键盘高度变化事件
      let lastHeight = 0;

      const kbHandler = (res: any) => {
        const height = res?.height ?? 0;
        if (!this.data.inputFocus) {
          lastHeight = 0;
        } else {
          lastHeight = Math.max(lastHeight, height); // 记录键盘最大高度
        }
        console.log("height==键盘高度", height, "lastHeight=====", lastHeight);

        // 如果键盘高度没有实际变化，不更新位置
        if (this.data._keyboardHeight && lastHeight) {
          return;
        }

        // 清除之前的定时器
        if (this.data._kbTimer) {
          clearTimeout(this.data._kbTimer);
        }

        // 键盘展开时立即更新位置，确保没有空隙
        // 键盘收起时稍微延迟，避免与输入框高度变化冲突
        let _kbTimer = setTimeout(() => {
          console.log("lastHeight==键盘高度 zx", lastHeight);
          this._updateInputPosition(lastHeight);
        }, 300);
        this.setData({ _kbTimer: _kbTimer });
      };

      wx.onKeyboardHeightChange?.(kbHandler);
      (this as any)._kbHandler = kbHandler;

      // 渲染完成后再触发一次聚焦，确保键盘弹起
      this._ensureFocus();

      // 如果咨询未结束，启动轮询最新消息
      if (!consultEnded) {
        this._startPolling();
      }
    },
    detached() {
      // 清理监听和定时器
      if ((this as any)._kbHandler) {
        wx.offKeyboardHeightChange?.((this as any)._kbHandler);
      }
      if (this.data._kbTimer) {
        clearTimeout(this.data._kbTimer);
      }
      // 清理轮询定时器
      this._stopPolling();
    },
  },
  methods: {
    // 滚动到底部-
    _scrollToBottom() {
      this.triggerEvent("scroll", { id: "bottom" });
    },
    // 收起键盘并更新位置
    _hideKeyboardAndUpdatePosition() {
      wx.hideKeyboard?.();
      this.setData({
        inputFocus: false,
        keepFocus: false,
      });
      this._updateInputPosition(0);
    },
    // 统一的位置更新方法
    _updateInputPosition(keyboardHeight: number) {
      // 避免重复更新相同高度（10px 容差）
      if (
        Math.abs(keyboardHeight - this.data._keyboardHeight) < 10 &&
        Math.abs(this.data.inputBoxBottom - this.data.baseInputBottom) < 10 &&
        keyboardHeight === 0
      ) {
        return;
      }

      const systemInfo = wx.getSystemInfoSync();
      const rpx2px = systemInfo.windowWidth / 750;

      // 键盘高度是 px，转换为 rpx
      const keyboardHeightRpx =
        keyboardHeight > 0 ? keyboardHeight / rpx2px : 0;

      // 计算输入框底部位置
      // 键盘展开时：面板紧贴键盘（bottom = 键盘高度），确保没有空隙
      // 键盘收起时：保留 tabbar 距离（baseInputBottom 已包含安全区 + 100rpx tabbar）
      const nextBottom =
        keyboardHeight > 0 ? keyboardHeightRpx : this.data.baseInputBottom;

      // 避免重复更新相同位置（1rpx 容差，更精确）
      if (Math.abs(nextBottom - this.data.inputBoxBottom) < 1) {
        return;
      }

      // 更新位置
      this.setData({
        inputBoxBottom: nextBottom,
        _keyboardHeight: keyboardHeight,
      });

      // 通知父组件更新底部 padding
      this.triggerEvent("boxBottom", { inputBoxBottom: nextBottom });

      // 键盘弹出时平滑滚动到底部
      if (keyboardHeight > 0) {
        this.triggerEvent("scroll", { id: "bottom" });
      }
    },
    _ensureFocus() {
      if (!this.data.keepFocus) return;
      this.setData({ inputFocus: false });
      wx.nextTick?.(() => {
        setTimeout(() => {
          if (this.data.keepFocus) this.setData({ inputFocus: true });
        }, 120);
      });
    },
    tapPanel() {
      if (!this.data.inputFocus && this.data.keepFocus) {
        this._ensureFocus();
      }
    },
    endConsult() {
      // 收起键盘并更新位置
      this._hideKeyboardAndUpdatePosition();
      wx.showModal({
        title: "",
        content: "确定要结束本次咨询?",
        cancelText: "继续咨询",
        confirmText: "结束",
      }).then((res: any) => {
        if (res.confirm) {
          // 确认结束
          this._endConsult();
        } else {
          // 继续咨询，恢复聚焦
          this.setData({ keepFocus: true });
          this._ensureFocus();
        }
      });
    },
    async _endConsult() {
      // 格式化日期时间，格式：MM-DD HH:mm:ss（与系统消息格式一致）
      const endDate = dayjs().format("MM-DD HH:mm:ss");

      // 手动添加系统消息样式的结束时间
      const consultId = wx.getStorageSync("consultId");
      this._appendMessage({
        id: `end-time-${Date.now()}`,
        consultRecordId: consultId || 0,
        sender: "system",
        sendType: "3",
        messageType: "1",
        messageContent: "咨询结束",
        sendTime: endDate,
      });

      // 调用结束咨询接口
      if (consultId) {
        try {
          await Post(`/consultManage/end/${consultId}`);
        } catch (error: any) {
          wx.showToast({
            title: error?.errMsg || "结束咨询失败",
            icon: "none",
          });
        }
      }

      // 设置结束状态
      this.setData({ consultEnded: true });

      // 更新本地存储：标记咨询已结束
      wx.setStorageSync("consultEnded", true);
      //咨询结束之后 需要清除咨询id
      wx.removeStorageSync("consultId");
      // 停止轮询最新消息
      this._stopPolling();

      // 收起键盘
      wx.hideKeyboard?.();

      // 重置底部位置为正常值（tabbar 高度 + 安全区高度）
      const safeBottomRpx = calculateSafeBottomRpx();
      const tabBarHeight = 100; // rpx
      const normalBottom = tabBarHeight + safeBottomRpx;

      // 通知父组件重置 paddingBottom，避免菜单下方有大的距离
      this.triggerEvent("boxBottom", { inputBoxBottom: normalBottom });

      // 通知父组件显示guide菜单组件
      this.triggerEvent("consultEvent", { type: "end" });

      // 滚动到底部
      this._scrollToBottom();
    },
    handleInput(event: any) {
      const value = event.detail.value;
      this.setData({ inputText: value });

      // 内容为空时，立即重置为最小高度
      if (!value || value.trim() === "") {
        if (this.data.textareaHeight !== 80) {
          this.setData({ textareaHeight: 80 });
        }
      }
    },
    onLineChange(event: any) {
      const minHeight = 80; // 最小高度（rpx）
      const maxHeight = 200; // 最大高度（rpx）
      const lineCount = event.detail.lineCount || 1;

      // 如果输入框为空，直接设置为最小高度
      if (!this.data.inputText || this.data.inputText.trim() === "") {
        if (this.data.textareaHeight !== minHeight) {
          this.setData({ textareaHeight: minHeight });
        }
        return;
      }

      // 单行时保持最小高度，不更新
      if (lineCount === 1) {
        // 只有当当前高度不是最小高度时才更新
        if (this.data.textareaHeight !== minHeight) {
          this.setData({ textareaHeight: minHeight });
        }
        return;
      }

      // 多行时才动态计算高度
      // 字体大小 28rpx，行高 1.9，所以每行实际高度约为 28 * 1.9 ≈ 53rpx
      const lineHeight = 53; // 每行高度（rpx）
      const padding = 24; // 上下 padding 总和（12rpx * 2 = 24rpx）

      // 计算高度：行数 * 行高 + 上下 padding
      const calculatedHeight = lineCount * lineHeight + padding;
      // 限制在 minHeight 和 maxHeight 之间
      const finalHeight = Math.max(
        minHeight,
        Math.min(maxHeight, calculatedHeight)
      );

      // 只在高度确实需要变化时更新（阈值设为 3rpx，减少频繁更新和跳动）
      if (Math.abs(this.data.textareaHeight - finalHeight) > 3) {
        this.setData({ textareaHeight: finalHeight });
      }
    },
    onInputFocus(event: any) {
      const keyboardHeight = event.detail.height ?? 0;

      // 设置 focus 状态
      this.setData({
        inputFocus: true,
        keepFocus: true,
      });

      // 立即更新位置
      this._updateInputPosition(keyboardHeight);
    },
    onInputBlur() {
      console.log("onInputBlur==输入框失焦");

      // 设置 focus 状态
      this.setData({
        inputFocus: false,
      });
      clearTimeout(this.data._kbTimer);
      // 延迟恢复位置，确保键盘完全收起
      setTimeout(() => {
        this._updateInputPosition(0);
      }, 100);
    },

    // 启动轮询最新消息
    _startPolling() {
      // 如果咨询已结束，不启动轮询
      if (this.data.consultEnded) return;
      // 清除之前的轮询定时器
      this._stopPolling();
      // 每5秒轮询一次
      const timer = setInterval(() => {
        // 如果咨询已结束，停止轮询
        if (this.data.consultEnded) {
          this._stopPolling();
          return;
        }
        this._getLatestMessages();
      }, 5000);
      this.setData({ _pollTimer: timer });
    },
    // 停止轮询最新消息
    _stopPolling() {
      if (this.data._pollTimer) {
        clearInterval(this.data._pollTimer);
        this.setData({ _pollTimer: 0 });
      }
    },
    // 获取最新消息
    async _getLatestMessages() {
      const consultId = wx.getStorageSync("consultId");
      if (!consultId) return;
      try {
        // 获取最新消息
        const res = await Post(`/consultManage/getLatestMsgs/${consultId}`);
        // 如果有最新消息要追加到消息列表
        if (res.data && Array.isArray(res.data) && res.data.length > 0) {
          const newMessages = res.data.map((item: AnyObject) =>
            transformMessage(item)
          );
          const allMessages = [...this.data.messages, ...newMessages];
          this.setData({ messages: allMessages });

          // 检查是否有真正的咨询结束消息（排除30分钟提醒消息）
          const hasEndMessage = newMessages.some((msg: ConsultMessage) =>
            isConsultEndMessage(msg)
          );

          // 如果收到真正的咨询结束消息，更新状态并停止轮询
          // 注意：30分钟提醒消息不会触发此逻辑，会继续轮询等待真正的结束消息
          if (hasEndMessage && !this.data.consultEnded) {
            this.setData({ consultEnded: true });
            wx.setStorageSync("consultEnded", true);
            this._stopPolling();

            // 收起键盘
            wx.hideKeyboard?.();

            // 重置底部位置为正常值（tabbar 高度 + 安全区高度）
            const safeBottomRpx = calculateSafeBottomRpx();
            const tabBarHeight = 100; // rpx
            const normalBottom = tabBarHeight + safeBottomRpx;

            // 通知父组件重置 paddingBottom
            this.triggerEvent("boxBottom", { inputBoxBottom: normalBottom });

            // 通知父组件显示guide菜单组件
            this.triggerEvent("consultEvent", { type: "end" });
          }

          //如果有最新消息要滚动到底部
          this._scrollToBottom();
        }
      } catch (error: any) {
        wx.showToast({
          title: error?.errMsg || "获取最新消息失败",
          icon: "none",
        });
      }
    },
    // 发送消息到后端
    async _sendMessage(messageType: "1" | "2", messageContent: string) {
      const consultId = wx.getStorageSync("consultId");
      if (!consultId) {
        wx.showToast({ title: "咨询ID不存在", icon: "none" });
        return;
      }
      try {
        await Post(`/consultManage/sendConsultMsg`, {
          consultRecordId: consultId,
          messageType,
          messageContent,
        }).then(() => {
          // 发送成功后获取最新消息
          // 重置轮询定时器，避免短时间内重复调用
          this._stopPolling();
          this._getLatestMessages();
          // 重新启动轮询，避免重复调用
          setTimeout(() => {
            if (!this.data.consultEnded) {
              this._startPolling();
            }
          }, 5000);
        });
      } catch (error: any) {
        wx.showToast({
          title: error?.errMsg || "发送失败，请重试",
          icon: "none",
        });
      }
    },
    async sendText() {
      const text = this.data.inputText.trim();
      // 至少要有一个内容才能发送
      if (!text) {
        wx.showToast({ title: "发送内容不能为空", icon: "none" });
        return;
      }
      const consultId = wx.getStorageSync("consultId");
      // 先添加用户消息到界面
      const messageId = `user-text-${Date.now()}`;
      this._appendMessage({
        id: messageId,
        consultRecordId: consultId || 0,
        sender: "user",
        sendType: "1",
        messageType: "1",
        messageContent: text,
      });
      // 平滑滚动到底部，确保新消息可见
      this._scrollToBottom();
      // 发送信息
      this._sendMessage("1", text);

      // 清空输入框，保持键盘展开状态
      // 同时重置高度为最小高度，确保立即恢复
      this.setData({
        inputText: "",
        textareaHeight: 80, // 重置为最小高度
      });
    },
    async chooseImage() {
      // 保存当前焦点状态，选择图片后恢复
      const wasFocused = this.data.inputFocus;
      const currentKeyboardHeight = this.data._keyboardHeight;

      // 临时收起键盘，选择图片需要系统界面
      this._hideKeyboardAndUpdatePosition();

      try {
        const res = await wx.chooseMedia({
          count: 1,
          mediaType: ["image"],
          sourceType: ["album", "camera"],
        });
        const files = res.tempFiles ?? [];
        const file = files[0];
        if (!file?.tempFilePath) return;
        const imagePath = file.tempFilePath;
        // 直接发送图片
        await this._sendImageMessage(imagePath);

        // 如果之前键盘是展开的，选择图片后恢复键盘
        if (wasFocused) {
          wx.nextTick?.(() => {
            setTimeout(() => {
              this.setData({
                inputFocus: true,
                keepFocus: true,
              });
              // 恢复键盘位置
              if (currentKeyboardHeight > 0) {
                this._updateInputPosition(currentKeyboardHeight);
              }
            }, 200);
          });
        }
      } catch (error: any) {
        // 用户取消选择图片时不提示错误
        if (error.errMsg && !error.errMsg.includes("cancel")) {
          console.error("选择图片失败", error);
        }

        // 取消时也恢复键盘（如果之前是展开的）
        if (wasFocused) {
          wx.nextTick?.(() => {
            setTimeout(() => {
              this.setData({
                inputFocus: true,
                keepFocus: true,
              });
              // 恢复键盘位置
              if (currentKeyboardHeight > 0) {
                this._updateInputPosition(currentKeyboardHeight);
              }
            }, 200);
          });
        }
      }
    },
    // 发送图片
    async _sendImageMessage(imagePath: string) {
      const consultId = wx.getStorageSync("consultId");
      try {
        // 先添加图片消息到界面（显示本地路径）
        const messageId = `user-image-${Date.now()}`;
        this._appendMessage({
          id: messageId,
          consultRecordId: consultId || 0,
          sender: "user",
          sendType: "1",
          messageType: "2",
          messageContent: imagePath, // 先用本地路径，上传后更新
        });

        // 上传图片
        const imageUrl = await upload({
          params: { name: "file", file: imagePath },
          transform({ data }: any) {
            return data?.url || data;
          },
        });

        // 发送图片消息
        await this._sendMessage("2", imageUrl);

        // 更新消息中的图片URL（从本地路径更新为服务器URL）
        const messages = this.data.messages;
        const messageIndex = messages.findIndex(
          (msg: ConsultMessage) => msg.id === messageId
        );
        if (messageIndex !== -1) {
          messages[messageIndex].messageContent = imageUrl;
          this.setData({ messages });
        }
        // 平滑滚动到底部，确保新消息可见
        this._scrollToBottom();
      } catch (error: any) {
        wx.showToast({
          title: error?.errMsg || "图片上传失败",
          icon: "none",
        });
      }
    },
    // 预览图片
    previewImage(e: any) {
      const currentUrl = e.currentTarget.dataset.url;
      // 获取所有图片消息的 URL 列表
      const urls = this.data.messages
        .filter(
          (msg: ConsultMessage) => msg.messageType === "2" && msg.messageContent
        )
        .map((msg: ConsultMessage) => msg.messageContent!);
    
      wx.previewImage({
        current: currentUrl, // 当前显示图片的链接
        urls: urls.length > 0 ? urls : [currentUrl], // 需要预览的图片链接列表
        fail: (err) => {
          wx.showToast({
            title: err?.errMsg || "预览图片失败",
            icon: "none",
          });
        },
      });
    },
    _appendMessage(message: ConsultMessage) {
      // 把获取的最新的消息追加到所有消息后面
      const messages = [...this.data.messages, message];
      this.setData({ messages });
    },
  },
});