<template>
  <div>
    <div v-if="payload && payload.data === 'AUDIPASS'" class="other-message-item">【系统提示】处方审核通过</div>
    <div v-else-if="isVideoConsult && videoConsultDisplayText" class="video-consult-record-row">
      <div class="video-consult-record-bubble">
        <svg class="video-consult-record-icon" width="16" height="16" viewBox="0 0 24 24" fill="none">
          <path d="M23 7l-7 5 7 5V7z" stroke="currentColor" stroke-width="2"></path>
          <rect x="1" y="5" width="15" height="14" rx="2" ry="2" stroke="currentColor" stroke-width="2"></rect>
        </svg>
        <span class="video-consult-record-text">{{ videoConsultDisplayText }}</span>
      </div>
    </div>
    <div v-else-if="payload.extension" :class="payload.data === 'STARTCONSULT' ? 'message-item' : 'other-message-item'">
      【系统提示】 {{ formattedExtension }}</div>
  </div>
</template>
<script setup>
import { ref, computed } from "vue";
const props = defineProps({
  messageItem: {
    type: Object,
    default: () => ({}),
  },
  content: {
    type: String,
    default: "",
  },
});
const payload = computed(() => {
  return props.messageItem.payload;
});

const isVideoConsult = computed(() => {
  return !!(payload.value && payload.value.description === "VIDEO_CONSULT");
});

function parseVideoRecordExtension(ext) {
  if (!ext || typeof ext !== "string") return null;
  try {
    const obj = JSON.parse(ext);
    if (!obj || typeof obj !== "object") return null;
    // 只要对象中有 doctorText 和 patientText 字段就直接返回
    // 不管是否有其他字段（如 v, t 等）
    if (obj.doctorText || obj.patientText) {
      return {
        doctorText: obj.doctorText || "已结束",
        patientText: obj.patientText || "已结束"
      };
    }
    return null;
  } catch {
    return null;
  }
}

// 解析并格式化系统提示消息的 extension 字段
const formattedExtension = computed(() => {
  const pl = payload.value || {};
  const ext = typeof pl.extension === "string" ? pl.extension.trim() : "";
  if (!ext) return "";
  const flow = props.messageItem && typeof props.messageItem.flow === "string" ? props.messageItem.flow : "";

  // 尝试解析为JSON对象
  const record = parseVideoRecordExtension(ext);
  if (record && (record.doctorText || record.patientText)) {
    return flow === "in" ? record.patientText : record.doctorText;
  }
  // 不是JSON或解析失败，直接返回原文本
  return ext;
});

const videoConsultDisplayText = computed(() => {
  const pl = payload.value || {};
  const ext = typeof pl.extension === "string" ? pl.extension.trim() : "";
  if (!ext) return "";
  const flow = props.messageItem && typeof props.messageItem.flow === "string" ? props.messageItem.flow : "";

  // 优先尝试解析为JSON对象
  const record = parseVideoRecordExtension(ext);
  if (record && record.doctorText && record.patientText) {
    return flow === "in" ? record.patientText : record.doctorText;
  }
  // 兼容历史：extension 直接是文案
  return ext;
});
</script>

<style scoped lang="scss">
//灰色 字体颜色
.message-item {
  padding: 0 10px;
  //   color: #666;
  // border-radius: 10px;
  margin: 10px;
  text-align: center;
  color: red;
  font-size: 14px;
}

.other-message-item {
  padding: 0 10px;
  color: #666;
  margin: 10px;
  text-align: center;
  font-size: 14px;
}

.video-consult-record-row {
  display: flex;
  justify-content: flex-end;
  padding: 8px 10px;
}

.video-consult-record-bubble {
  display: inline-flex;
  align-items: center;
  max-width: 70%;
  padding: 10px 12px;
  background: #f2f2f2;
  color: #333;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1;
}

.video-consult-record-icon {
  flex: 0 0 auto;
  margin-right: 6px;
  color: #666;
}

.video-consult-record-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>