xk-admin/apps/web-antd/src/views/business/chat/components/MessageBubble.vue

<script setup>
import { computed, ref, watch } from 'vue';

import { useVbenModal } from '@vben/common-ui';
import { useUserStore } from '@vben/stores';

import { Avatar, Button, Image } from 'ant-design-vue';

import { getChatMessageRegisterInfoApi } from '#/views/business/chat/api';
import { useChatStore } from '#/views/business/chat/stores/chat';
import { sendMessage } from '#/views/business/chat/utils/request';

// 辅助函数：按需解析消息内容
const getParsedContent = (messageType, messageContent) => {
  // 对于需要 JSON 解析的消息类型：4, 9, 10, 11, 12, 13, 14
  if ([4, 9, 10, 11, 12, 13, 14].includes(messageType)) {
    try {
      return JSON.parse(messageContent);
    } catch (e) {
      console.error('解析消息内容失败:', e);
      return messageContent;
    }
  }
  return messageContent;
};

// 辅助函数：获取消息类型名称
const getMessageTypeName = (messageType) => {
  const types = {
    0: 'text',
    1: 'image',
    2: 'audio',
    3: 'video',
    4: 'prescription',
    5: 'medical-record',
    6: 'video-call',
    7: 'audio-call',
    8: 'file',
    9: 'system',
    10: 'register',
    11: 'patient-experience',
    12: 'product-card',
    13: 'end-consultation',
    14: 'transfer-prescription',
  };
  return types[messageType] || 'unknown';
};
import { getPrescriptionCheckStatusApi } from '#/views/business/order/prescription/api';
import { receptionApi } from '#/views/doctor/doctor-reception/api';
import PrescriptionDetail from '#/views/doctor/doctor-reception/components/PrescriptionDetail.vue';
import RefusalOfTreatmentModal from '#/views/doctor/doctor-reception/components/RefusalOfTreatmentModal.vue';

import previewMedia from '../composables/useMediaPreview.ts';
import { useThemeStore } from '../stores/theme.ts';
import { useUserStore as chatUseUserStore } from '../stores/user';
import AudioMessage from './AudioMessage.vue';
import { XgVideoPlayer } from '#/components/video-player';
import PatientExperienceCard from '#/views/doctor/online-consultation/components/PatientExperienceCard.vue';
import FollowUpDrugAssistantCard from './FollowUpDrugAssistantCard.vue';
import ProductCard from '#/views/doctor/online-consultation/components/ProductCard.vue';
import EndConsultationCard from '#/views/doctor/online-consultation/components/EndConsultationCard.vue';
import TransferPrescriptionMessageCard from '#/views/doctor/online-consultation/components/TransferPrescriptionMessageCard.vue';
import TransferPrescriptionViewDrawer from '#/views/doctor/online-consultation/components/TransferPrescriptionViewDrawer.vue';

const props = defineProps({
  message: {
    type: Object,
    required: true,
  },
  isSent: {
    type: Boolean,
    default: false,
  },
  senderInfo: {
    type: Object,
    required: true,
  },
});
const emit = defineEmits(['show-user-profile', 'open-prescription', 'transfer-import-success']);
const chatUserStore = chatUseUserStore();
const userStore = useUserStore();
const chatStore = useChatStore();
const themeStore = useThemeStore();

// 转接方查看抽屉相关
const showTransferDrawer = ref(false);
const transferRegisterId = ref(null);

const [RefusalOfTreatmentModals, RefusalOfTreatmentModalApi] = useVbenModal({
  connectedComponent: RefusalOfTreatmentModal,
});

const avatarStyle = computed(() => ({
  background: props.senderInfo.color,
}));

const statusInfo = ref({
  status: 0,
  text: '',
});

// 挂号操作状态
const registerOperating = ref(false);

// 添加处方状态映射
const prescriptionStatusMap = {
  0: '待审核',
  1: '已审核',
  2: '未通过',
};

// 添加挂号状态映射 0待支付1已支付待接诊2接诊中3已结束4已取消5待评价6已评价7已拒诊
const registerStatusMap = {
  0: '待支付',
  1: '待接诊',
  2: '接诊中',
  3: '已结束',
  4: '已取消',
  5: '待评价',
  6: '已评价',
  7: '已拒诊',
};

// 添加支付状态映射
const payStatusMap = {
  0: '未支付',
  1: '已支付',
};

const checkPrescriptionStatus = (parsedContent) => {
  // 优先使用 message_content 中的 status 字段（由定时任务更新）
  if (parsedContent && parsedContent.status !== undefined) {
    statusInfo.value.status = parsedContent.status;
    statusInfo.value.text = prescriptionStatusMap[parsedContent.status];
    return prescriptionStatusMap[parsedContent.status];
  }
  // 如果 status 不存在，才调用 API（作为备用方案）
  if (parsedContent && parsedContent.id) {
    getPrescriptionCheckStatusApi({ id: parsedContent.id }).then((res) => {
    statusInfo.value.status = res.status;
    statusInfo.value.text = prescriptionStatusMap[res.status];
    return prescriptionStatusMap[res.status];
  });
  }
};

// 计算属性：解析后的消息内容
const parsedContent = computed(() => {
  // 确保 message_content 字段存在，优先使用 message_content，其次使用 content
  const messageContent = props.message.message_content || props.message.content || '';
  return getParsedContent(props.message.message_type, messageContent);
});

// 计算属性：消息类型名称
const messageTypeName = computed(() => {
  return getMessageTypeName(props.message.message_type);
});

/** type10：接口补全的挂号卡字段（不写回 props，避免破坏响应式） */
const registerCardPayload = ref(null);

const registerCardDisplay = computed(() => {
  if (props.message.message_type !== 10) {
    return {};
  }
  let base = {};
  const raw = props.message.message_content || props.message.content || '';
  try {
    base =
      typeof raw === 'string' && raw
        ? JSON.parse(raw)
        : typeof raw === 'object' && raw
          ? { ...raw }
          : {};
  } catch {
    base = {};
  }
  const enrich = registerCardPayload.value;
  if (enrich && typeof enrich === 'object' && !Array.isArray(enrich)) {
    return { ...base, ...enrich };
  }
  return base;
});

const registerDrugNamesLine = computed(() => {
  const pc = registerCardDisplay.value;
  if (!pc || typeof pc !== 'object') return '';
  const arr = pc.selected_western_drugs;
  if (Array.isArray(arr) && arr.length) {
    return arr.map((d) => d?.name).filter(Boolean).join('、');
  }
  if (pc.drug?.name) return pc.drug.name;
  return '';
});

const isFollowUpDrugAssistant = computed(() => {
  if (props.message.message_type !== 11) return false;
  const pc = parsedContent.value;
  return !!(pc && typeof pc === 'object' && pc.flow === 'follow_up_drug');
});

function fetchRegisterCard() {
  if (props.message.message_type !== 10) return;
  const content = getParsedContent(
    props.message.message_type,
    props.message.message_content,
  );
  const id = content && typeof content === 'object' ? content.id : undefined;
  if (!id) return;
  getChatMessageRegisterInfoApi({ id }).then((res) => {
    const body = res?.data?.data ?? res?.data ?? res;
    registerCardPayload.value =
      body && typeof body === 'object' && !Array.isArray(body) ? body : null;
  });
}

watch(
  () => [
    props.message.message_type,
    props.message.id,
    props.message.message_content,
  ],
  () => {
    registerCardPayload.value = null;
    fetchRegisterCard();
  },
  { immediate: true },
);

// 接诊操作
const acceptRegister = async (registerId, orderNo) => {
  if (registerOperating.value) return;

  registerOperating.value = true;

  try {
    // 模拟API调用

    receptionApi(registerId).then(async (value) => {
      // message.success('接诊成功');
      // 更新消息状态
      fetchRegisterCard();

      const messageObj = {
        message_type: 0,
        message_content: '我已接诊，请简单说明您的情况~',
        created_at_text: new Date().toLocaleTimeString().slice(0, 5),
        sender_user_id: `doctor-${chatUserStore.currentUser.doctor_id}`,
        receiver_user_id: chatStore.currentFriend.id,
        isSent: true,
        read: true,
        duration: 0,
      };
      localStorage.setItem('currentRegisterId', String(registerId));
      // chatStore.currentFriend?.register_id = reregisterId;
      chatStore.addMessage(messageObj, chatUserStore.currentUser.doctor_id);
      await sendMessage({
        senderId: chatUserStore.currentUser.doctor_id,
        receiverId: chatStore.currentFriend.id,
        roomId: chatStore.currentFriend.room_id,
        type: 'text',
        content: '我已接诊，请简单说明您的情况~',
      });
    });
  } catch (error) {
    console.error('接诊失败:', error);
  } finally {
    registerOperating.value = false;
  }
};

// 查看转接方详情
const handleViewTransferDetail = (transferData) => {
  transferRegisterId.value = chatStore.currentFriend?.register_id;
  showTransferDrawer.value = true;
};

// 处理转接方导入成功
const handleTransferImportSuccess = (prescriptionData) => {
  // 触发打开处方模态框事件
  const registerId = transferRegisterId.value || chatStore.currentFriend?.register_id;
  if (registerId) {
    emit('open-prescription', registerId);
  }
};

// 拒诊操作
const rejectRegister = async (registerId, orderNo) => {
  if (registerOperating.value) return;

  registerOperating.value = true;

  RefusalOfTreatmentModalApi.setData({
    values: {
      register_id: registerId,
    },
  });
  RefusalOfTreatmentModalApi.open();
  registerOperating.value = false;
};

const bubbleClasses = computed(() => {
  const baseClasses = ['message-bubble'];

  if (props.isSent) {
    baseClasses.push('sent');
  } else {
    baseClasses.push('received');
  }

  if (props.message.message_type === 0) {
    baseClasses.push('bubble-bg');
  }

  if (themeStore.isDarkMode) {
    baseClasses.push('dark');
  }

  return baseClasses;
});

const handlePreviewMedia = (content, type) => {
  previewMedia(content, type);
};

const showUserProfile = () => {
  emit('show-user-profile', props.senderInfo);
};

const formatDuration = (seconds) => {
  const mins = Math.floor(seconds / 60);
  const secs = seconds % 60;
  return `${mins}:${secs.toString().padStart(2, '0')}`;
};

const formatTextWithLinks = (text) => {
  console.log(text, props.message);
  if (!text) return text; // 或 return text (但可能返回 undefined/null，根据需求调整)
  // 如果 text 是对象，转换为字符串
  if (typeof text === 'object') {
    text = JSON.stringify(text);
  }
  const urlRegex = /(https?:\/\/\S+)/g;
  return text.replaceAll(
    urlRegex,
    '<a href="$1" target="_blank" rel="noopener noreferrer" class="text-link">$1</a>',
  );
};

const openUrl = (url) => {
  window.open(url, '_blank', 'noopener,noreferrer');
};

const getCallStatusText = (status) => {
  const statusMap = {
    invite: '发起通话',
    accepted: '通话已接通',
    rejected: '通话被拒绝',
    ended: '通话已结束',
    missed: '未接通话',
  };
  return statusMap[status] || '通话消息';
};

const handleImageError = (event) => {
  event.target.src = '/placeholder.svg?height=200&width=300';
};

const handleVideoError = (event) => {
  console.error('视频加载失败:', event);
};

const [PrescriptionDetailModal, PrescriptionDetailModalApi] = useVbenModal({
  connectedComponent: PrescriptionDetail,
});

const viewPrescription = (item) => {
  PrescriptionDetailModalApi.setData({
    values: item.id,
  });
  PrescriptionDetailModalApi.open();
};

// 格式化日期时间
const formatDateTime = (timestamp) => {
  if (!timestamp) return '';
  const date = new Date(timestamp * 1000);
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
  });
};

// 获取性别文本
const getSexText = (sex) => {
  return sex === 1 ? '男' : '女';
};

</script>

<template>
  <div
    :class="isSent ? 'flex-row-reverse' : 'flex-row'"
    class="mb-4 flex items-start gap-3"
  >
    <RefusalOfTreatmentModals />
    <PrescriptionDetailModal />
    <!-- 头像 -->
    <div
      v-if="isSent"
      :style="avatarStyle"
      class="cursor-pointer rounded-full"
      @click="showUserProfile"
    >
      <Avatar
        v-if="userStore.userInfo?.avatar"
        :size="48"
        :src="userStore.userInfo?.avatar"
      />
      <Avatar v-else :size="48">
        {{ userStore.userInfo?.nick_name.charAt(0) }}
      </Avatar>
    </div>
    <div
      v-else
      :style="avatarStyle"
      class="cursor-pointer rounded-full"
      @click="showUserProfile"
    >
      <Avatar v-if="senderInfo.avatar" :size="48" :src="senderInfo.avatar" />
      <Avatar v-else :size="48">{{ senderInfo.nick_name.charAt(0) }}</Avatar>
    </div>

    <!-- 消息内容区域 -->
    <div
      :class="isSent ? 'items-end' : 'items-start'"
      class="flex max-w-xs flex-col md:max-w-md lg:max-w-lg xl:max-w-xl"
    >
      <!-- 发送者名称 -->
      <div
        v-if="isSent"
        class="mb-1 px-2 text-xs text-gray-500 dark:text-gray-400"
      >
        {{ userStore.userInfo?.nick_name }}
      </div>
      <div v-else class="mb-1 px-2 text-xs text-gray-500 dark:text-gray-400">
        {{ senderInfo.nick_name }}
      </div>

      <!-- 消息气泡 -->
      <div :class="bubbleClasses" class="relative rounded-2xl p-4 shadow-sm">
        <!-- 图片消息 -->
        <div
          v-if="message.message_type === 1"
          class="image-message relative cursor-pointer"
          style="width: 400px;"
          @click="handlePreviewMedia(parsedContent, 'image')"
        >
          <Image
            :src="parsedContent"
            alt="图片消息"
            class="max-w-full rounded-lg"
            @error="handleImageError"
          />
        </div>

        <!-- 视频消息 -->
        <div
          v-else-if="message.message_type === 3"
          class="video-message relative cursor-pointer"
          @click="handlePreviewMedia(parsedContent, 'video')"
        >
          <XgVideoPlayer
            :src="parsedContent"
            class="video-thumbnail max-w-full rounded-lg"
            thumbnail
          />
          <div class="video-overlay">
            <div class="play-button">
              <i class="fas fa-play"></i>
            </div>
            <div v-if="message.duration" class="video-duration">
              {{ formatDuration(message.duration) }}
            </div>
          </div>
        </div>

        <!-- URL链接消息 -->
        <div v-else-if="messageTypeName === 'url'" class="url-message">
          <div class="url-preview" @click="openUrl(message.url)">
            <div class="url-favicon">
              <img
                v-if="message.favicon"
                :alt="message.domain"
                :src="message.favicon"
              />
              <i v-else class="fas fa-link"></i>
            </div>
            <div class="url-content">
              <div class="url-title">{{ message.title || message.url }}</div>
              <div v-if="message.description" class="url-description">
                {{ message.description }}
              </div>
              <div class="url-domain">{{ message.domain }}</div>
            </div>
            <div v-if="message.thumbnail" class="url-thumbnail">
              <img :alt="message.title" :src="message.thumbnail" />
            </div>
          </div>
          <div v-if="message.text" class="url-text">
            <Button type="link">{{ message.text }}</Button>
          </div>
        </div>

        <!-- 音频消息 -->
        <AudioMessage
          v-else-if="message.message_type === 2"
          :is-sent="isSent"
          :message="message"
        />

        <!-- 挂号卡片消息 -->
        <div v-else-if="message.message_type === 10" class="register-card">
          <div class="flex items-center gap-3">
            <div
              class="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-green-100 dark:bg-green-900"
            >
              <i
                class="fas fa-calendar-check text-xl text-green-500 dark:text-green-300"
              ></i>
            </div>

            <div class="min-w-0 flex-1">
              <div class="flex items-center justify-between">
                <div class="font-semibold text-gray-800 dark:text-gray-100">
                  挂号信息
                </div>
                <div
                  :class="{
                    'bg-yellow-100 text-yellow-800':
                      registerCardDisplay.status === 0,
                    'bg-blue-100 text-blue-800': registerCardDisplay.status === 1,
                    'bg-red-100 text-red-800': registerCardDisplay.status === 2,
                    'bg-red-100 text-red-800': registerCardDisplay.status === 3,
                    'bg-gray-100 text-gray-800': registerCardDisplay.status === 4,
                    'bg-purple-100 text-purple-800':
                      registerCardDisplay.status === 5,
                    'bg-indigo-100 text-indigo-800':
                      registerCardDisplay.status === 6,
                    'bg-pink-100 text-pink-800': registerCardDisplay.status === 7,
                  }"
                  class="rounded-full px-2 py-1 text-xs font-medium"
                >
                  {{ registerStatusMap[registerCardDisplay.status] || '未知状态' }}
                </div>
              </div>

              <div
                class="mt-1 flex flex-wrap gap-2 text-xs text-gray-600 dark:text-gray-300"
              >
                <div class="flex items-center gap-1">
                  <i class="fas fa-hashtag text-xs"></i>
                  <span class="max-w-[120px] truncate">{{
                    registerCardDisplay.order_no
                  }}</span>
                </div>

                <div class="flex items-center gap-1">
                  <i class="fas fa-list-ol text-xs"></i>
                  <span>第{{ registerCardDisplay.order_number }}号</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 患者信息 -->
          <div class="mt-3 rounded-lg bg-gray-50 p-3 dark:bg-gray-800">
            <div class="mb-2 flex items-center justify-between">
              <div class="font-medium text-gray-700 dark:text-gray-200">
                患者信息
              </div>
              <div
                :class="{
                  'bg-red-100 text-red-800': registerCardDisplay.is_pay === 0,
                  'bg-green-100 text-green-800': registerCardDisplay.is_pay === 1,
                }"
                class="rounded-full px-2 py-1 text-xs font-medium"
              >
                {{ payStatusMap[registerCardDisplay.is_pay] || '未知' }}
              </div>
            </div>

            <div
              class="grid grid-cols-2 gap-2 text-sm text-gray-600 dark:text-gray-300"
            >
              <div class="flex items-center gap-1">
                <i class="fas fa-user text-xs"></i>
                <span>{{ registerCardDisplay.user_patient?.name || '未知' }}</span>
              </div>
              <div class="flex items-center gap-1">
                <i class="fas fa-birthday-cake text-xs"></i>
                <span>{{ registerCardDisplay.user_patient?.age || 0 }}岁</span>
              </div>
              <div class="flex items-center gap-1">
                <i class="fas fa-venus-mars text-xs"></i>
                <span>{{ getSexText(registerCardDisplay.user_patient?.sex) }}</span>
              </div>
              <div class="flex items-center gap-1">
                <i class="fas fa-phone text-xs"></i>
                <span>{{
                  registerCardDisplay.user_patient?.mobile ? '已绑定' : '未绑定'
                }}</span>
              </div>
            </div>
          </div>

          <!-- 主诉 / 所选药品 / 数量（与小程序挂号卡对齐） -->
          <div
            v-if="registerCardDisplay.chief_complaint || registerDrugNamesLine || (registerCardDisplay.number != null && registerCardDisplay.number !== '')"
            class="mt-3 space-y-2 rounded-lg border border-gray-100 p-3 text-sm dark:border-gray-600"
          >
            <div v-if="registerCardDisplay.chief_complaint">
              <span class="font-medium text-gray-600 dark:text-gray-300">主诉：</span>
              <span class="text-gray-800 dark:text-gray-100">{{
                registerCardDisplay.chief_complaint
              }}</span>
            </div>
            <div v-if="registerDrugNamesLine">
              <span class="font-medium text-gray-600 dark:text-gray-300">所选药品：</span>
              <span class="text-gray-800 dark:text-gray-100">{{
                registerDrugNamesLine
              }}</span>
            </div>
            <div
              v-if="registerCardDisplay.number != null && registerCardDisplay.number !== ''"
            >
              <span class="font-medium text-gray-600 dark:text-gray-300">数量：</span>
              <span class="text-gray-800 dark:text-gray-100"
                >各 {{ registerCardDisplay.number }} 盒</span
              >
            </div>
          </div>

          <!-- 操作按钮区域 -->
          <div class="mt-3 border-t border-gray-200 pt-3 dark:border-gray-600">
            <div class="mb-2 flex items-center justify-between">
              <div class="text-sm font-medium text-gray-700 dark:text-gray-200">
                挂号费用:
                <span class="text-green-500 dark:text-green-400">¥{{ registerCardDisplay.price }}</span>
              </div>
            </div>

            <!-- 接诊/拒诊按钮 - 只在待就诊状态显示 -->
            <div v-if="registerCardDisplay.status === 1" class="mt-2 flex gap-2">
              <Button
                :loading="registerOperating"
                class="flex-1"
                size="small"
                type="primary"
                @click="
                  acceptRegister(registerCardDisplay.id, registerCardDisplay.order_no)
                "
              >
                <i class="fas fa-check mr-1"></i>
                接诊
              </Button>
              <Button
                :loading="registerOperating"
                class="flex-1"
                danger
                size="small"
                @click="
                  rejectRegister(registerCardDisplay.id, registerCardDisplay.order_no)
                "
              >
                <i class="fas fa-times mr-1"></i>
                拒诊
              </Button>
            </div>

            <!-- 查看详情按钮 -->
            <!--            <div class="flex items-center justify-center mt-2">-->
            <!--              <div class="flex items-center text-blue-500 dark:text-blue-300 hover:text-blue-600 dark:hover:text-blue-200 transition-colors cursor-pointer">-->
            <!--                <span class="text-sm font-medium">查看详情</span>-->
            <!--                <i class="fas fa-chevron-right ml-1 text-xs"></i>-->
            <!--              </div>-->
            <!--            </div>-->
          </div>

          <!-- 时间信息 -->
          <div class="mt-2 text-xs text-gray-500 dark:text-gray-400">
            创建时间: {{ registerCardDisplay.created_at }}
            <span v-if="registerCardDisplay.pay_time" class="ml-2">
              支付时间: {{ formatDateTime(registerCardDisplay.pay_time) }}
            </span>
          </div>
        </div>

        <!-- 处方卡片消息 -->
        <div
          v-else-if="message.message_type === 4"
          class="prescription-card"
          @click="viewPrescription(parsedContent)"
        >
          <div class="flex items-center gap-3">
            <div
              class="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900"
            >
              <i
                class="fas fa-file-prescription text-xl text-blue-500 dark:text-blue-300"
              ></i>
            </div>

            <div class="min-w-0 flex-1">
              <div class="flex items-center justify-between">
                <div class="font-semibold text-gray-800 dark:text-gray-100">
                  电子处方
                </div>
                <div
                  :class="{
                    'bg-yellow-100 text-yellow-800': statusInfo.status === 0,
                    'bg-green-100 text-green-800': statusInfo.status === 1,
                    'bg-red-100 text-red-800': statusInfo.status === 2,
                    'bg-blue-100 text-blue-800': statusInfo.status === 3,
                    'bg-gray-100 text-gray-800': statusInfo.status === 4,
                  }"
                  class="rounded-full px-2 py-1 text-xs font-medium"
                >
                  {{
                    checkPrescriptionStatus(parsedContent) ||
                    statusInfo.text ||
                    '加载中'
                  }}
                </div>
              </div>

              <div
                class="mt-1 flex flex-wrap gap-2 text-xs text-gray-600 dark:text-gray-300"
              >
                <div class="flex items-center gap-1">
                  <i class="fas fa-hashtag text-xs"></i>
                  <span class="max-w-[100px] truncate">{{
                    parsedContent.order_no
                  }}</span>
                </div>

                <div class="flex items-center gap-1">
                  <i class="fas fa-truck text-xs"></i>
                  <span>{{ parsedContent.express_name }}</span>
                </div>
              </div>
            </div>
          </div>

          <div
            class="mt-3 flex items-center justify-between border-t border-gray-200 pt-2 dark:border-gray-600"
          >
            <div class="text-sm font-medium text-gray-700 dark:text-gray-200">
              支付金额:
              <span class="text-red-500 dark:text-red-400">
                ¥{{ parsedContent.total_pay_price }}
              </span>
            </div>

            <div
              class="flex items-center text-blue-500 transition-colors hover:text-blue-600 dark:text-blue-300 dark:hover:text-blue-200"
            >
              <span class="text-sm font-medium">查看处方</span>
              <i class="fas fa-chevron-right ml-1 text-xs"></i>
            </div>
          </div>
        </div>

        <!-- 在线复诊|购药信息 -->
        <div
          v-else-if="messageTypeName === 'follow-up-visit'"
          class="group transition-all duration-200"
        >
          <!-- 卡片容器 -->
          <div
            :class="{
              'border-green-200': parsedContent.hasVisited === '1', // 已到访状态
              'border-yellow-200': parsedContent.hasVisited === '0', // 未到访状态
            }"
            class="rounded-lg border p-4 shadow-sm"
          >
            <!-- 标题区域 -->
            <div class="mb-3 flex items-center justify-between">
              <h3 class="flex items-center text-lg font-semibold">
                <svg
                  class="mr-2 h-4 w-4 text-green-500"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                  />
                </svg>
                {{ parsedContent.drug_name }} 复诊信息
              </h3>
              <span
                :class="{
                  'text-green-800': parsedContent.hasVisited === '1',
                  'bg-yellow-100 text-yellow-800':
                    parsedContent.hasVisited === '0',
                }"
                class="rounded-full px-2 py-1 text-xs"
              >
                {{ parsedContent.hasVisited === '1' ? '就诊过' : '未就诊过' }}
              </span>
            </div>

            <!-- 症状信息 -->
            <div class="space-y-2">
              <p class="flex items-start text-sm">
                <span class="w-20">症状描述：</span>
                <span class="flex-1">{{ parsedContent.illnessInfo }}</span>
              </p>

              <!-- 用药状态 -->
              <p
                :class="{
                  'font-medium text-blue-600':
                    parsedContent.hasUsedDrug === '1',
                  'text-gray-500': parsedContent.hasUsedDrug === '0',
                }"
                class="text-sm"
              >
                <span class="w-20 text-gray-500">用药情况：</span>
                {{
                  parsedContent.hasUsedDrug === '1' ? '使用过' : '未使用过'
                }}
              </p>

              <!-- 医生信息 -->
              <p
                class="mt-3 border-t border-gray-100 pt-3 text-sm text-gray-500"
              >
                <span class="w-20 text-gray-400">主诊医生：</span>
                ID: {{ parsedContent.doctor_id }}
              </p>
            </div>
          </div>
        </div>

        <!-- 系统消息/价格更新卡片 (type=9) -->
        <div
          v-else-if="message.message_type === 9"
          class="system-message-card"
        >
          <div
            v-if="parsedContent?.type === 'price_update'"
            class="price-update-card"
          >
            <div class="price-update-header">
              <div class="header-icon">
                <i class="fas fa-tag"></i>
              </div>
              <span class="price-title">订单价格更新</span>
            </div>
            <div class="price-update-content">
              <p class="price-message">{{ parsedContent.message }}</p>
              
              <!-- 订单信息 -->
              <div class="order-info">
                <div class="info-item">
                  <span class="info-label">
                    <i class="fas fa-hashtag"></i>
                    订单号
                  </span>
                  <span class="info-value">{{ parsedContent.order_no }}</span>
                </div>
              </div>

              <!-- 价格详情 -->
              <div class="price-info-section">
                <div class="price-info-row">
                  <span class="price-label">
                    <i class="fas fa-shipping-fast"></i>
                    运费
                  </span>
                  <span class="price-value shipping-fee">
                    <span v-if="parsedContent.is_free_shipping === 1 || parsedContent.is_free_shipping === '1'" class="free-shipping-tag">
                      <i class="fas fa-check-circle"></i>
                      包邮
                    </span>
                    <span v-else>¥{{ parsedContent.trans_expenses || '0.00' }}</span>
                  </span>
                </div>
                <div class="price-info-row total-row">
                  <span class="price-label">
                    <i class="fas fa-money-bill-wave"></i>
                    总价
                  </span>
                  <span class="price-amount">¥{{ parsedContent.total_pay_price }}</span>
                </div>
              </div>
            </div>
          </div>
          <div v-else class="system-message-text">
            {{ typeof parsedContent === 'string' ? parsedContent : '系统消息' }}
          </div>
        </div>

        <!-- type11：复诊助理用药确认（与药店患者就诊经历卡片分流） -->
        <FollowUpDrugAssistantCard
          v-else-if="message.message_type === 11 && isFollowUpDrugAssistant"
          :content="parsedContent"
        />

        <!-- 患者就诊经历卡片 (type=11) -->
        <PatientExperienceCard
          v-else-if="message.message_type === 11"
          :content="parsedContent"
        />

        <!-- 商品卡片 (type=12) -->
        <ProductCard
          v-else-if="message.message_type === 12"
          :content="parsedContent"
          @click-product="(product) => console.log('点击商品:', product)"
        />

        <!-- 结束问诊卡片 (type=13) -->
        <EndConsultationCard
          v-else-if="message.message_type === 13"
          :content="parsedContent"
        />

        <!-- 转接方消息卡片 (type=14) -->
        <TransferPrescriptionMessageCard
          v-else-if="message.message_type === 14"
          :content="parsedContent"
          :register-id="chatStore.currentFriend?.register_id"
          @view-detail="handleViewTransferDetail"
          @import-success="handleTransferImportSuccess"
        />

        <!-- 通话消息 -->
        <div
          v-else-if="
            message.message_type === 6 || message.message_type === 7
          "
          class="call-message"
        >
          <div class="call-info">
            <i
              :class="message.message_type === 6 ? 'fa-video' : 'fa-phone'"
              class="fas"
            ></i>
            <span>{{ getCallStatusText(message.callStatus) }}</span>
          </div>
          <div v-if="message.duration" class="call-duration">
            通话时长: {{ formatDuration(message.duration) }}
          </div>
        </div>

        <!-- 文本消息 -->
        <div v-else class="whitespace-pre-wrap text-base leading-relaxed">
          <span v-html="formatTextWithLinks(parsedContent || message.message_content || message.content || '')"></span>
        </div>
      </div>

      <!-- 消息时间和状态 -->
      <div
        class="mt-1 flex items-center gap-1 px-2 text-xs text-gray-400 dark:text-gray-500"
      >
        <span>{{ message.time }}</span>
        <i
          v-if="isSent && message.read"
          class="fas fa-check-double text-green-500"
        ></i>
        <i
          v-else-if="isSent && !message.read"
          class="fas fa-clock text-gray-400"
        ></i>
      </div>
    </div>

    <!-- 转接方查看抽屉 -->
    <TransferPrescriptionViewDrawer
      v-model:visible="showTransferDrawer"
      :register-id="transferRegisterId"
      @import-success="handleTransferImportSuccess"
    />
  </div>
</template>

<style scoped>
.message-bubble {
  position: relative;
  max-width: 100%;
  word-wrap: break-word;
  transition: all 0.2s ease;
}

.message-bubble.sent {
  color: white;
  border-bottom-right-radius: 4px;
}

.bubble-bg {
  background: linear-gradient(135deg, #4361ee, #3f37c9);
}
.bubble-bg.dark {
  background: linear-gradient(135deg, #4361ee, #3f37c9);
}

.message-bubble.received.bubble-bg {
  background: white;
  color: #1a202c;
  border: 1px solid #e2e8f0;
  border-bottom-left-radius: 4px;
}

.message-bubble.received.dark.bubble-bg {
  background: #374151;
  color: #f7fafc;
  border-color: #4b5563;
}

.video-message {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  max-width: 300px;
}

.video-thumbnail {
  width: 100%;
  height: auto;
  max-height: 200px;
  object-fit: cover;
  display: block;
}

.video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.3) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.video-message:hover .video-overlay {
  opacity: 1;
}

.play-button {
  width: 60px;
  height: 60px;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.play-button:hover {
  background: rgba(0, 0, 0, 0.8);
  transform: scale(1.1);
}

.video-duration {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.call-message {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 0;
}

.call-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}

.call-info i {
  width: 16px;
  text-align: center;
}

.call-duration {
  font-size: 12px;
  opacity: 0.8;
}

.url-message {
  max-width: 400px;
}

.url-preview {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  background: white;
  display: flex;
  align-items: flex-start;
  padding: 12px;
  gap: 12px;
}

.url-preview:hover {
  border-color: #4361ee;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(67, 97, 238, 0.15);
}

.message-bubble.sent .url-preview {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}

.message-bubble.received.dark .url-preview {
  border-color: #4b5563;
  background: #4b5563;
}

.url-favicon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.url-favicon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2px;
}

.url-content {
  flex: 1;
  min-width: 0;
}

.url-title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
  color: #1a202c;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.message-bubble.sent .url-title {
  color: white;
}

.message-bubble.received.dark .url-title {
  color: #f7fafc;
}

.url-description {
  font-size: 12px;
  color: #64748b;
  margin-bottom: 4px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.message-bubble.sent .url-description {
  color: rgba(255, 255, 255, 0.8);
}

.message-bubble.received.dark .url-description {
  color: #9ca3af;
}

.url-domain {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 500;
}

.message-bubble.sent .url-domain {
  color: rgba(255, 255, 255, 0.7);
}

.message-bubble.received.dark .url-domain {
  color: #6b7280;
}

.url-thumbnail {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
}

.url-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.url-text {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.5;
}

:deep(.text-link) {
  color: #4361ee;
  text-decoration: underline;
  transition: color 0.2s ease;
}

:deep(.text-link:hover) {
  color: #3f37c9;
}

.message-bubble.sent :deep(.text-link) {
  color: rgba(255, 255, 255, 0.9);
}

.message-bubble.sent :deep(.text-link:hover) {
  color: white;
}

/* 挂号卡片样式 */
.register-card {
  @apply w-full max-w-xs cursor-pointer rounded-xl bg-white p-4 shadow-sm transition-all duration-300 md:max-w-sm dark:bg-gray-700;
  @apply border border-gray-200 hover:border-green-300 hover:shadow-md dark:border-gray-600 dark:hover:border-green-500;
}

.message-bubble.sent .register-card {
  @apply border-green-200/50 bg-green-50/30 dark:border-green-700/70 dark:bg-green-900/30;
}

.register-card:hover {
  @apply -translate-y-0.5 transform;
}

/* 处方卡片样式 - 使用TailwindCSS类替代 */
.prescription-card {
  @apply w-full max-w-xs cursor-pointer rounded-xl bg-white p-4 shadow-sm transition-all duration-300 md:max-w-sm dark:bg-gray-700;
  @apply border border-gray-200 hover:border-blue-300 hover:shadow-md dark:border-gray-600 dark:hover:border-blue-500;
}

.message-bubble.sent .prescription-card {
  @apply border-blue-200/50 bg-blue-50/30 dark:border-blue-700/70 dark:bg-blue-900/30;
}

.prescription-card:hover {
  @apply -translate-y-0.5 transform;
}

/* 系统消息/价格更新卡片样式 */
.system-message-card {
  @apply w-full max-w-md rounded-xl p-4;
}

.price-update-card {
  @apply rounded-xl border border-orange-200 bg-gradient-to-r from-orange-50 to-amber-50 p-4 shadow-sm dark:border-orange-700 dark:from-orange-900/30 dark:to-amber-900/30;
  transition: all 0.3s ease;
}

.price-update-card:hover {
  @apply shadow-md;
  transform: translateY(-2px);
}

.message-bubble.sent .price-update-card {
  @apply border-orange-200/50 bg-orange-50/30 dark:border-orange-700/70 dark:bg-orange-900/30;
}

.price-update-header {
  @apply mb-3 flex items-center gap-3;
}

.header-icon {
  @apply flex h-10 w-10 items-center justify-center rounded-lg bg-orange-100 text-orange-500 dark:bg-orange-900/50 dark:text-orange-300;
}

.price-title {
  @apply flex-1 text-base font-semibold text-orange-700 dark:text-orange-300;
}

.price-update-content {
  @apply space-y-3;
}

.price-message {
  @apply rounded-lg bg-white/60 p-2 text-sm text-gray-700 dark:bg-gray-800/60 dark:text-gray-300;
}

.order-info {
  @apply rounded-lg bg-white/60 p-3 dark:bg-gray-800/60;
}

.info-item {
  @apply flex items-center justify-between;
}

.info-label {
  @apply flex items-center gap-1.5 text-xs text-gray-500 dark:text-gray-400;
}

.info-label i {
  @apply text-orange-500 dark:text-orange-400;
}

.info-value {
  @apply text-sm font-medium text-gray-700 dark:text-gray-200;
}

.price-info-section {
  @apply space-y-2 rounded-lg border-t border-orange-200/50 bg-white/60 pt-3 dark:border-orange-700/50 dark:bg-gray-800/60;
}

.price-info-row {
  @apply flex items-center justify-between;
}

.price-label {
  @apply flex items-center gap-1.5 text-sm text-gray-600 dark:text-gray-300;
}

.price-label i {
  @apply text-orange-500 dark:text-orange-400;
}

.price-value {
  @apply text-sm font-medium text-gray-700 dark:text-gray-200;
}

.shipping-fee {
  @apply flex items-center;
}

.free-shipping-tag {
  @apply inline-flex items-center gap-1 rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-700 dark:bg-green-900/50 dark:text-green-300;
}

.free-shipping-tag i {
  @apply text-green-600 dark:text-green-400;
}

.total-row {
  @apply border-t border-orange-200/50 pt-2 dark:border-orange-700/50;
}

.total-row .price-label {
  @apply text-base font-semibold;
}

.price-amount {
  @apply text-lg font-bold text-orange-600 dark:text-orange-400;
}

.system-message-text {
  @apply rounded-lg bg-gray-100 p-3 text-center text-sm text-gray-600 dark:bg-gray-700 dark:text-gray-300;
}

/* 患者就诊经历卡片发送样式 */
.message-bubble.sent .patient-experience-card {
  @apply border-blue-200/50 bg-blue-50/30 dark:border-blue-700/70 dark:bg-blue-900/30;
}

/* 商品卡片发送样式 */
.message-bubble.sent .product-card {
  @apply border-purple-200/50 bg-purple-50/30 dark:border-purple-700/70 dark:bg-purple-900/30;
}

/* 结束问诊卡片发送样式 */
.message-bubble.sent .end-consultation-card {
  @apply border-gray-200/50 bg-gray-50/30 dark:border-gray-700/70 dark:bg-gray-900/30;
}

/* 图片和视频消息发送样式 */
.message-bubble.sent .image-message,
.message-bubble.sent .video-message {
  opacity: 0.9;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
}

/* 通话消息发送样式 */
.message-bubble.sent .call-message {
  color: white;
}
</style>